Server-Side Rendering (SSR)
Explore how server-side rendering (SSR) works in Next.js to generate fresh HTML pages per request, enabling personalized and frequently changing data handling. Learn when to use SSR versus static rendering, strategies to implement SSR through fetch options, dynamic functions, search parameters, and explicit route configs. Understand SSR’s trade-offs including performance impacts and how streaming with Suspense can optimize loading. By the end, you will be able to decide and apply SSR effectively in your full stack Next.js apps for dynamic user experiences.
In our last lesson, we learned how to opt into static rendering (SSG) for maximum performance. But what if the data needs to be fresh for every user, every time they visit?
With Server-side Rendering (SSR), the server generates a fresh HTML page for each incoming request. This also allows us to use cookies and URL parameters to personalize pages without waiting for client-side JavaScript.
In this lesson, we’ll explore when and how to use SSR effectively in our Next.js apps.
When to use SSR
Choosing between SSG and SSR comes down to the data requirements of our page. While SSG is great for performance, SSR is essential in several key scenarios:
Personalization: We use this approach when we need to display user-specific content, like a dashboard that changes based on the logged in user.
Frequently changing data: This approach is appropriate for real-time information like stock prices, live sports scores, or breaking news.
Request-specific information: We use this approach for content that depends on URL search parameters or request headers, such as for filtering data or
A/B testing It is a method of showing different versions of a page to different users to see which one performs better.
How to implement SSR
Pages in the App Router are statically rendered by default whenever possible. However, if a page depends on data or values that can only be known at request time (such as headers, cookies, or query parameters), Next.js automatically switches that page to dynamic Server-side Rendering.
We can trigger dynamic, per-request rendering in three main ways: ...