20. workflow-collaboration: Draft Mode

Draft Mode is a feature that allows you to view your unpublished headless CMS content on your site before publishing it. This is particularly useful for frameworks like Next.js and SvelteKit that support Incremental Static Regeneration (ISR). Here's how Draft Mode works:

How Draft Mode Works

1. BypassToken Configuration: Each ISR route has a bypassToken option, which is assigned a cryptographically-secure value at build time.
2. Cookie Check: When a visitor accesses an ISR route with a bypassToken, the page checks for a __prerender_bypass cookie.
3. Draft Mode Activation: If the cookie exists and matches the bypassToken, the visitor views the page in Draft Mode.

When to Use Draft Mode

• You want to preview your draft content without waiting for cache refreshes or manual revalidation.
• You need to protect unpublished content from public viewing until it's ready.

Getting Started with Next.js on Epycbyte

1. Enable ISR: Use ISR on pages that fetch content, as this is required for Draft Mode.
2. Detect Draft Mode: Add code to your ISR pages to check if Draft Mode is enabled and render the draft content accordingly.
3. Toggle Draft Mode: In the Epycbyte Toolbar, select the eye icon to enable Draft Mode. The toolbar will turn purple when Draft Mode is active.

Sharing Drafts

• To share a draft URL, append the ?__epycbyte_draft=1 query parameter: https://my-site.com/blog/post-01?__epycbyte_draft=1.
• Only team members with access can view and enable Draft Mode, ensuring your content remains secure.

Last Updated

This document was last updated on September 27, 2024.