Next.js : Draft Mode

What is Draft Mode?

Draft Mode is a feature that lets you switch from static rendering to dynamic rendering for specific pages that fetch data from a headless CMS. Static rendering means that your pages are pre-rendered at build time and served as static HTML files. Dynamic rendering means that your pages are rendered on-demand at request time and fetch the latest data from your data source.

Static rendering has many benefits, such as better performance, SEO, and security. However, it also has some drawbacks, such as longer build times and stale content. For example, if you are writing a draft on your headless CMS and want to preview it on your page, you would have to rebuild your site every time you make a change. This can be slow and inconvenient.

Draft Mode solves this problem by allowing you to bypass static rendering for specific pages and render them dynamically instead. This way, you can fetch the draft content from your headless CMS and see it immediately on your page without rebuilding your site. You can also switch back to static rendering when you are ready to publish your content.

How does Draft Mode work?

Draft Mode works by setting a cookie named __prerender_bypass on your browser when you access a special API route that enables Draft Mode. This cookie tells Nextjs to skip static rendering for pages that use getStaticProps and getStaticPaths and render them dynamically instead.

To use Draft Mode, you need to do two things:

1. Create an API route that enables Draft Mode by calling res.setDraftMode({ enable: true }).
2. Update your page component to fetch the draft content from your headless CMS based on the Draft Mode status.

Configuring: Draft Mode | Next.js