Server-Side Rendering with Next.js

Next.js is a powerful React framework that offers a flexible approach to data fetching and rendering, extending React's capabilities to build production-grade applications. One of its most notable features is Server-Side Rendering (SSR). With SSR, the HTML for a page is generated on the server for each request, rather than being rendered by the browser using JavaScript (which is known as Client-Side Rendering or CSR). This provides significant benefits for both user experience and search engine optimization (SEO).

In a typical CSR React app, the server sends a minimal HTML file with a JavaScript bundle. The browser must then download, parse, and execute the JavaScript to render the page content. This can lead to a blank screen and a delay before the user sees anything meaningful. With SSR, the server fetches any necessary data, renders the complete HTML page, and sends it to the client. The browser can then immediately display the content. This results in a faster perceived load time and a better First Contentful Paint (FCP). After the initial HTML is loaded, Next.js "hydrates" the page, attaching React event listeners to the existing HTML, turning it into a fully interactive single-page application.

SSR in the Next.js App Router

With the introduction of the App Router in Next.js 13, the way we think about rendering has evolved. By default, all components inside the app directory are React Server Components (RSCs). This means they render exclusively on the server, providing an even more streamlined approach to SSR.

Data fetching in Server Components is incredibly simple—you can use async/await directly within your component. Next.js automatically handles the server-side rendering process. This eliminates the need for special functions like getServerSideProps for many use cases.

// app/posts/[id]/page.tsx - A Server Component

async function getPost(id) {
  const res = await fetch(`https://api.example.com/posts/${id}`);
  if (!res.ok) return undefined;
  return res.json();
}

export default async function PostPage({ params }) {
  const post = await getPost(params.id);

  if (!post) {
    return <div>Post not found.</div>;
  }

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </article>
  );
}
      

This component will run on the server for every request, fetch the latest data for the given post ID, and send the fully rendered HTML to the client. This is SSR at its simplest.

When to Choose SSR over SSG

Next.js also excels at Static Site Generation (SSG), where pages are pre-rendered to HTML at build time. The choice between SSR and SSG depends on your data.

Rendering Method Comparison

Next.js also provides a middle ground with Incremental Static Regeneration (ISR), which allows you to re-generate static pages at a set interval, giving you the performance of static with the freshness of dynamic rendering. You can achieve this by using the revalidate option in your fetch calls.

// This fetch will be cached for 60 seconds.
// After 60s, the next request will get the cached version,
// while Next.js re-fetches and updates the cache in the background.
fetch('...', { next: { revalidate: 60 } });
      

Understanding these different rendering strategies is key to building high-performance, scalable applications with Next.js.

10 Common Next.js SSR & Data Fetching Errors and Their Fixes

Working with Next.js data fetching and rendering can be complex. Here are common issues developers face.