Hi team,
Is there a way to generate split pages on build? Using fallback: false in getStaticPaths? We’re able to make split variations work with getStaticProps and fallback: 'blocking', using the middleware workflow, but get 404 for all pages when using fallback: false , which is what we use in our project.
Hi Fahad, it’s possible but it requires some additional snippets of code, following the code from https://docs.plasmic.app/learn/rendering-variations/#1-middleware you would need this addition function
function generateAllPathsWithTraits(
path: string,
possibleTraitValues: Record<string, string[]>
) {
const possibleCombinationOfTraits = [{}];
for (const [trait, possibleValues] of Object.entries(possibleTraitValues)) {
const newCombinations = [];
for (const traitValue of possibleValues) {
for (const combination of possibleCombinationOfTraits) {
newCombinations.push({
...combination,
[trait]: traitValue,
});
}
}
possibleCombinationOfTraits.push(...newCombinations);
}
return possibleCombinationOfTraits.map((traits) =>
rewriteWithTraits(path, traits)
);
}
that you can then call in your getStaticProps as in
export const getStaticPaths: GetStaticPaths = async () => {
const pageModules = await PLASMIC.fetchPages();
function* gen() {
for (const page of pageModules) {
// Generate all possible paths for this page including all variations
const allPaths = generateAllPathsWithTraits(page.path, {
color: ["red", "blue"],
utm_source: ["google", "facebook", "twitter"],
browser: ["Chrome", "Safari", "Other"],
});
for (const path of allPaths) {
yield {
params: {
catchall: path.substring(1).split("/"),
},
};
}
}
}
return {
paths: Array.from(gen()),
fallback: false,
};
};
One thing to pay attention to is that this may generate many pages depending on how much values your traits can assume, so you can also only generate this list of traits on the pages that you desire, so that your build time doesn’t get too affected by it.
In your middleware you would need to replace the call to
// Rewrite the response to use this new pathname
newUrl.pathname = rewriteWithTraits(newUrl.pathname, {
// Add values for custom traits that you are using; these are
// likely read off of the cookie.
...(req.nextUrl.searchParams.has("utm_source")
? { utm_source: req.nextUrl.searchParams.has("utm_source") ?? "" }
: {}),
browser,
});
const res = NextResponse.rewrite(newUrl);
This will disable A/B tests if you have them, but I will be writing a more robust version of these additions, to be available in @plasmicapp/loader-nextjs and some example usage. I will ping you once they are out.
@fmota Thanks very much for the details. I will be on the lookout for the implementation and if possible weight for it to be released before implementing a custom solution. Is there an expected timeline?
Hi Fahad, it’s expected to come in next week
Perfect! I’ll be on the lookout for it.
Hi Fahad, it’s out, still undocumented and without example, but if you add the latest version of @plasmicapp/loader-edge , you can import generateAllPathsWithTraits which is quite similar to the generateAllPaths , by doing something like:
generateAllPathsWithTraits(page.path, {
color: ["red", "blue"],
utm_source: ["google", "facebook", "twitter"],
browser: ["Chrome", "Safari", "Other"],
});
You will have the pages with color, utm_source and browser generated in build time.
@fmota, the function generates page paths fine. But no joy with fallback: false in my testing. I’m getting 404s with it. I will wait for an official example.
Hi Fahad, could you send me the code of your middleware and your usage of generateAllPathsWithTraits ?
There’s an example of it available in https://github.com/plasmicapp/plasmic/tree/master/examples/build-time-targeting now
@fmota Just wanted to say thanks. We did end up figuring it out. It was a bug at our end filtering out pages at build time.
It’s working nicely. Except it adds to build time. Would it be optimized to a point where it only builds page variations available inside Plasmic? Right now it appears it builds everything.
Sorry I didn’t quite follow, could you elaborate more on the page variations that are being built that you wish to ignore ? If you could provide a list of paths as example of what you currently see and what you were expecting it would be helpful too