Feedback and questions about "Preview mode" - How would you use it for a whole stage instead of specific pages?

[Vadorequest]

I went through https://nextjs.org/docs/advanced-features/preview-mode and I understand the doc explains how to use the new Preview mode for specific routes.

For example when working on a Headless CMS which has the ability to embed a preview, it could display your web app with a page using the data you're recently updated in your CMS, without needing to rebuild the app.

The above example is the use-case that's featured by the documentation.

My use case is a bit different. My CMS doesn't have the ability to embed a preview, so I'm thinking about a different design.

There are three stages in my workflow:

1. Development (local)
2. Staging (online, hosted on Vercel, as a Preview deployment)
3. Production (online, hosted on Vercel, as a Production deployment)

What I would like is to make the whole "staging" stage using the Preview mode.

Thinking out loud, I believe I could check for the existence of __prerender_bypass and/or __next_preview_data in the browser cookie, and redirect the user to the /api/preview if one of those cookies is missing.

This would enable preview mode for the whole session, and all pages should automatically use the preview mode (and thus, all pages would use the latest content automatically).

I'm thinking displaying a static message (like a header) stating "preview mode has been enabled", and maybe some toggle button (on/off) would improve end-user usability, and make testing easier.

Is it how preview mode was intended to be used?
Are there any cons about doing things this way?
How would you manually disable Preview mode? I'm thinking about deleting both cookies manually.

[Vadorequest]

It works exactly as I explained above and was very easy to setup for the whole stage, without needing any extra/fancy security token and such.

The official example could be simplified IHMO, it makes things appear more complicated that they really are, maybe a "simple" and "advanced" examples would make more sense.

PR: UnlyEd/next-right-now#70

One issue though, is browser cache.

If you go to any SSG page (they're all SSG, except when SSR is mentioned) like https://nrn-v2-mst-aptd-gcms-lcz-sty-c1-c546qce0r.now.sh/fr/examples/built-in-features/ui-components

And then you change the color at https://nrn-admin.now.sh/#/Customer/ck73s1dqm2ue30b98uepy9is3, then you navigate on https://nrn-v2-mst-aptd-gcms-lcz-sty-c1-c546qce0r.now.sh, you'll notice the change isn't applied until you force reload (cmd+shift+r).

Is there a way to avoid this issue when preview mode is enabled?
Maybe disable browser cache altogether?

Because my end users won't know it's a cache issue, and will struggle like crazy thinking their changes didn't work. Would be much smoother if that was the default behaviour, or if I could enforce it anyhow.

[Vadorequest]

Here is our demo of the Preview mode, if you'd like to play around:

• Demo: https://nrn-v2-mst-aptd-gcms-lcz-sty-c1-4tcdjsq1t.now.sh
• Admin backoffice (change color there): https://nrn-admin.now.sh/#/Customer/ck73s1dqm2ue30b98uepy9is3
• PR: Implement preview mode UnlyEd/next-right-now#70

I eventually changed my mind and enabled it on all stages (even production) because otherwise it wouldn't be showcased on our demos, but I plan on using it on staging only for real use-cases.