Drafting and previewing your Strapi content in Next.js

Summary

In this demo, Alex from Strapi showcases how to implement Draft Mode and content previews in Next.js, enabling dynamic content fetching and real-time updates. The session demonstrates how to bypass static site generation with a draft system, allowing content editors to preview changes instantly without redeploying the site. Alex highlights the use of server-sent events for real-time updates and explores Next.js's caching and revalidation features. This hands-on session emphasizes improving workflows for both developers and content editors, streamlining the process of content previewing, and enhancing user experience with seamless integration between Strapi and Next.js.

Takeaways

• 😀 **Introduction to the session:** Alex, from Strapi, explains the goal of the demo: to showcase how to set up Draft Mode and Preview features in Next.js and Strapi for a streamlined content editing workflow.
• 😀 **Why Draft Mode & Preview Matter:** In modern CMS workflows, the separation between the CMS (Strapi) and front-end (Next.js) introduces complexities when previewing draft content, making Draft Mode crucial for content editors.
• 😀 **The problem with static site generation:** Static rendering makes it difficult to view dynamic content like drafts without bypassing static caching mechanisms, which Draft Mode solves.
• 😀 **How Next.js Draft Mode works:** Draft Mode in Next.js allows for dynamic rendering by bypassing caching, making it possible to preview draft content directly without having to rebuild or refresh the entire site.
• 😀 **Enabling Draft Mode in Next.js:** To enable Draft Mode, a special route (`/preview`) is created, which sets a cookie to signal that the content should be rendered dynamically instead of being cached.
• 😀 **Connecting Strapi for Draft Content:** The presenter integrates Strapi by modifying the data-fetching logic to fetch draft content when Draft Mode is enabled, allowing editors to see unpublished changes in real-time.
• 😀 **Visual feedback with Draft Mode banner:** A banner component is added to the front end to indicate that the user is in Draft Mode, providing visual feedback for content editors working on draft content.
• 😀 **Exiting Draft Mode:** A method is added to allow users to exit Draft Mode, refreshing the page and removing the Draft Mode cookie, ensuring the content is no longer in draft state.
• 😀 **Real-Time Content Updates with Server-Sent Events (SSE):** The demo introduces SSE to allow the front end to listen for real-time updates from Strapi, enabling immediate reflection of changes without manual page reloads.
• 😀 **Strapi Preview Feature:** Strapi’s experimental preview feature simplifies the setup for previewing draft content, eliminating the need for developers to create custom preview routes, making the content editing workflow more efficient.
• 😀 **Next.js 15 Caching Changes:** With the introduction of Next.js 15, the default caching behavior was reverted to improve the handling of dynamic content fetching, which impacts workflows involving static site generation and draft content previews.
• 😀 **Security Considerations:** The presenter mentions that while the demo code works, developers must handle security aspects (e.g., authentication) when implementing features like real-time updates and preview modes in production environments.

Q & A

What is the primary purpose of draft mode and preview in Next.js and Strapi?

The primary purpose of draft mode and preview in Next.js and Strapi is to allow content editors to preview unpublished content in real-time, bypassing static site generation to show dynamic data while editing. This workflow is essential for modern CMS systems that rely on headless CMS setups, where content can be dynamically updated and reviewed before going live.

Why do modern CMS workflows require draft mode and preview functionality?

Modern CMS workflows require draft mode and preview functionality due to the complexity introduced by custom front-end frameworks like Next.js. Unlike traditional CMSs, which handled both content management and rendering, headless CMS setups separate content from the rendering process, making it difficult for content editors to preview changes without dynamic rendering.

How does Next.js handle draft mode functionality?

Next.js handles draft mode through a cookie that is set during the server-side rendering process. This cookie tells Next.js to bypass static site generation and fetch fresh data, allowing content to be rendered dynamically. This setup is important for content editors to see up-to-date draft content during the editing process.

What is the role of the 'preview' route in the demonstration?

The 'preview' route in the demonstration serves as the entry point for enabling draft mode in Next.js. This route is responsible for setting the draft mode cookie and redirecting the user to the appropriate page, allowing them to view unpublished content dynamically.

What are the key steps to enabling draft mode in Next.js during the demo?

The key steps to enabling draft mode in Next.js during the demo include creating a server route for 'preview', setting the draft mode cookie within the server response, and ensuring that content fetching logic checks for the presence of this cookie to render the draft version of the content instead of the static one.

What challenge does the static rendering process pose for content editors in Next.js?

Static rendering in Next.js poses a challenge for content editors because once content is pre-rendered and deployed, changes made to the content require a rebuild and redeployment of the entire application to be reflected. This process can be slow and inefficient for content updates in real-time, which is where draft mode and preview help.

How does the 'exit preview' functionality work in Next.js?

The 'exit preview' functionality in Next.js allows content editors to exit the draft mode. This is done by calling an 'exit preview' API, which removes the draft mode cookie, and then refreshes the page to reflect the published version of the content. The page reloads without losing the current client-side state, making the exit process seamless.

What is the advantage of real-time updates in the preview system?

Real-time updates in the preview system offer a much better experience for content editors by ensuring that any changes to the content, such as creating, updating, or deleting entries, are reflected instantly in the draft mode preview. This eliminates the need for manual refreshes and improves the workflow for real-time content review.

What is the role of server-sent events (SSE) in the demo?

Server-sent events (SSE) are used in the demo to enable real-time updates in the content preview. By subscribing to SSE from the Strapi backend, the client listens for content changes such as new entries or updates, and automatically refreshes the preview page to show the latest changes without requiring a manual reload.

What is a key difference between Next.js 14 and Next.js 15 in terms of caching?

A key difference between Next.js 14 and Next.js 15 is that in version 14, data fetching methods were cached by default, which caused issues for dynamic content. In Next.js 15, caching is disabled by default, allowing for more efficient fetching of fresh data, especially for dynamic content like drafts and previews.