Overview: Exploring Different Rendering Strategies
Explore different rendering strategies in Next.js, including how to use server-side rendering for dynamic content, client-side rendering for specific components, static site generation at build time, and incremental static regeneration to update pages in production. Understand how these methods improve flexibility and performance in building web applications.
We'll cover the following...
Introduction
When talking about rendering strategies, we refer to how we serve a web page (or a web application) to a web browser. There are frameworks, such as Gatsby, that are incredibly good at serving statically generated pages. Other frameworks will make it easy to create server-side rendered pages.
But Next.js brings those concepts to a whole new level, letting us decide which page should be rendered at build time and which should be served dynamically at runtime, regenerating the entire page for each request and making certain parts of our applications incredibly dynamic. The framework also allows us to decide which components should exclusively be rendered on the client side, making our development experience extremely satisfying.
We’ll have a closer look at the following:
How to dynamically render a page for each request using server-side rendering
Different ways to render certain components on the client side only
Generating static pages at build time
How to regenerate static pages in production using incremental static regeneration