Preview mode with ODB-supported pages

[lindsaylevine]

preview mode on netlify works as such:

for all pre-rendered getStaticProps pages, we add a cookie-based redirect to _redirects that redirects to a serverless function (wrapping the lambda for that page), only when the next.js preview mode cookies are present. see: https://github.com/netlify/netlify-plugin-nextjs/blob/main/src/lib/pages/getStaticProps/redirects.js#L42-L52

for example:

/getStaticProps/1  /.netlify/functions/next_getStaticProps_id  200!  Cookie=__prerender_bypass,__next_preview_data
/getStaticProps/2  /.netlify/functions/next_getStaticProps_id  200!  Cookie=__prerender_bypass,__next_preview_data
/getStaticProps/static  /.netlify/functions/next_getStaticProps_static  200!  Cookie=__prerender_bypass,__next_preview_data
/getStaticProps/withFallback/3  /.netlify/functions/next_getStaticProps_withFallback_id  200!  Cookie=__prerender_bypass,__next_preview_data
/getStaticProps/withFallback/4  /.netlify/functions/next_getStaticProps_withFallback_id  200!  Cookie=__prerender_bypass,__next_preview_data

this means, if no cookie is present, we serve the static, prerendered html to /getStaticProps/1. if the cookies are present, we redirect to the function to SSR for preview mode.

prior to us adding ODB support for pages with fallback, this worked fine. for /getStaticProps/withFallback/3, we'd fall back to the serverless function to SSR the preview content. however, now that we use builder functions for these pages (instead of standard functions), it'll always cache the first built page in preview mode.

the simplest solution i see:
for these page types (getStaticPropsWithFallback), add a standard function and a builder function (ODB), appended with either a standard or builder label to differentiate the two. then, we'd add one redirect to the builder function by default (which we already do), and one cookie-based redirect to the standard function (instead of to the builder function). i.e.:

/getStaticProps/withFallback/4  /.netlify/functions/next_getStaticProps_withFallback_id_standard  200!  Cookie=__prerender_bypass,__next_preview_data
/getStaticProps/withFallback/:id  /.netlify/functions/next_getStaticProps_withFallback_id_builder 200

[ascorbic]

Would that bypass the cache if it was already in there? Is the cache able to tell that the target function is different, or does the matching URL mean that it never gets hit?

[ascorbic]

@mraerino Would this work? Could a page that's already in the ODB cache bypass it if it matches a different redirect rule?

[lindsaylevine]

hmm this is a great question. my assumption would be that the redirect engine reroutes to the standard function first and the builder function itself is what does the caching? no clue though really, eager to hear what marcus says!

[mraerino]

@mraerino Would this work? Could a page that's already in the ODB cache bypass it if it matches a different redirect rule?

yup! we Vary the cache on cookie headers if you have a rule for them

[ascorbic]

Nice! Then that sounds like the best solution @lindsaylevine

[joeykmh]

Just stumbled across exactly this problem today when trying to implement preview mode with getStaticProps. I'm glad to see it's documented and you have a path forward. I'm wondering if there is a workaround in the mean time which would allow me to SSR every request in preview mode to a route? For example, is there somewhere I can find how to create a standard function to render a next page and hard-code that to a specific path via a redirect rule?

[lindsaylevine]

@josephkmh hey! apologies you're running into this! you could try to install the plugin at version 3.2.2 (https://github.com/netlify/netlify-plugin-nextjs/releases/tag/v3.2.2) which is the release right before we added ODB support to fallback-configured pages. i think it would be a pain to try to replicate plugin logic to create your own standard function for this. if 3.2.2 doesnt work for you til we can get this fixed, i can maybe suggest patching your package with a specific change to write out the ODB logic. lmk!

[joeykmh]

@lindsaylevine thanks so much for the quick reply! Pinning the plugin at 3.2.2 worked 😄

In case anyone else runs across this and is looking for a quick fix: I ran into a couple build and runtime errors when downgrading only the plugin, but installing Next at 10.0.7 combined with the plugin at 3.2.2 works like a charm.

[d4rekanguok]

Hey @josephkmh, I run into the same issue — what's the runtime error you received when downgrading to 3.2.2? I've tried to pin the plugin to 3.2.2 & install Next at various versions, never received any error during build but accessing any page would return these errors:

{"errorType":"Runtime.UnhandledPromiseRejection","errorMessage":"Error: Cannot find module '../chunks/448.71b97d663e27899ecd9f.js'\nRequire stack:\n- /var/task/netlify/functions/next_index/nextPage/index.js\n- /var/task/netlify/functions/next_index/renderNextPage.js\n- /var/task/netlify/functions/next_index/next_index.js\n- /var/task/next_index.js\n- /var/runtime/UserFunction.js\n- /var/runtime/index.js","trace":["Runtime.UnhandledPromiseRejection: Error: Cannot find module '../chunks/448.71b97d663e27899ecd9f.js'","Require stack:","- /var/task/netlify/functions/next_index/nextPage/index.js","- /var/task/netlify/functions/next_index/renderNextPage.js","- /var/task/netlify/functions/next_index/next_index.js","- /var/task/next_index.js","- /var/runtime/UserFunction.js","- /var/runtime/index.js","    at process.<anonymous> (/var/runtime/index.js:35:15)","    at process.emit (events.js:314:20)","    at processPromiseRejections (internal/process/promises.js:209:33)","    at processTicksAndRejections (internal/process/task_queues.js:98:32)"]}

[lindsaylevine]

@d4rekanguok hey derek! check out this issue #209, we ran into this dynamic imports bug in next 10.0.8 (i think) which is why 10.0.7 probably worked for joseph. that bug was fixed in 3.3.0. totally acknowledge these are some hoops to jump through for a workaround so i apologize there. this is a high priority for us so if you hang tight we can get you preview mode in these pages very soon.

[joeykmh]

@d4rekanguok yes I was receiving exactly those types of runtime errors (missing chunks) but 10.0.7 worked for me. 10.0.7 just happened to be the previous version we were on, that's why I chose it.

[LuisOsta]

Does this issue also occur for getServerSideProps? I'm not using getStaticProps but for some reason, the Preview Mode (with the Drawer) still doesn't work for me.

[lindsaylevine]

@LuisOsta hey luis! i think the issue you're experiencing is separate from next.js and this plugin. collaborative deploy previews are an overall netlify feature, and i believe it won't work on any SSR'd page (or function-served page) because the deploy preview snippet is only injected in static/pre-rendered pages. i pinged internally to see if there are plans to change/improve this!