Next.js 15 Tutorial - 55 - Dynamic Rendering

Dynamic Rendering in Next.js

Understanding Dynamic Rendering

• Dynamic rendering is a server-side strategy that generates unique routes for each user request, ideal for displaying personalized data or information available only at the time of the request.

• Examples of dynamic rendering applications include news websites, personalized shopping pages, and social media feeds where content varies based on user-specific data.

Implementing Dynamic Rendering

• In Next.js, dynamic rendering is automatically activated when it detects specific dynamic functions such as cookies, headers, connection draft mode, search parameters, or props.

• To implement this in code, modify components to use the cookies dynamic function by importing it from next/headers, converting the component into an async function to handle cookie retrieval.

Building and Inspecting Output

• After implementing dynamic rendering in the about page component and logging cookie values to the console, build the application using npm run build.

• The terminal output will list generated routes; pay attention to symbols indicating dynamic rendering (e.g., 'F' for server-rendered on demand).

Observations on Dynamic Pages

• Dynamically rendered pages are not generated during build time; thus, no HTML file exists for them in the build folder. Instead, they are created upon each request.

• When starting the application with npm run start, refreshing dynamically rendered pages will show updated content based on real-time data without generating static HTML files.

Key Takeaways

• Dynamic rendering allows for real-time generation of HTML at request time and is particularly useful for personalized content like social media feeds.