In the past, serving static pages with dynamic content was difficult.
As a content editor working with a Headless CMS, you want to view draft content in real-time. You need a quick feedback loop, without waiting for your site to redeploy to production. Previously, you’d need to use a different URL for draft content or build custom infrastructure to switch between static and dynamic on the fly.
Next.js 9.3 introduced support for Preview Mode, allowing you to view draft content immediately on the same URL as your statically generated routes.
How it Works
Vercel is the ideal location for using Preview Mode with Next.js.
In a self-hosted Next.js application, every request using Preview Mode would hit your server. By spoofing the cookie, malicious users could attempt to gain access to your underlying Next.js server. Further, you would be charged for this extra usage.
With Vercel, our Edge Network validates the cookies, preventing invalid requests from reaching the Next.js server entirely. If the cookie is invalid, our CDN responds and removes it. If the user is unauthenticated, you will not pay for any extra usage.
Next.js sets two cookies named __prerender_bypass and __next_preview_data. After these cookies are set, requests using Preview Mode are routed to a Serverless Function instead of serving from the cache.
Next.js creates a unique private key for encrypting preview data, which changes with every build. This ensures cookies can't be guessed.
It’s important to note only the preview mode request for draft content will be sever-rendered. All other version of this statically generated page are still cached. You’re not purging the CDN cache or inversely affecting performance.
Examples
- WordPress Example (Demo)
- DatoCMS Example (Demo)
- TakeShape Example (Demo)
- Sanity Example (Demo)
- Prismic Example (Demo)
- Contentful Example (Demo)
- Strapi Example (Demo)
- Agility CMS Example (Demo)
- Cosmic Example (Demo)
- ButterCMS Example (Demo)
- Storyblok Example (Demo)
- GraphCMS Example (Demo)
Learn More
You can view a demo of Preview Mode here. To learn how to implement Preview Mode, view the Next.js Documentation.