Server-Side Rendering (SSR) with Next.js: Pros and Cons

Server-Side Rendering (SSR) is a technique where a webpage’s HTML is generated on the server for each request and sent to the client. Next.js, a popular React framework, simplifies the implementation of SSR alongside Static Site Generation (SSG) and Client-Side Rendering (CSR).

Let’s dive into the pros and cons of SSR with Next.js to understand when and why to use it.

1. How SSR Works in Next.js

In SSR, the server processes each incoming request, generates the necessary HTML, and sends it to the client. Next.js enables SSR using the getServerSideProps function.

Example of SSR in Next.js

export async function getServerSideProps(context) {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data }, // Will be passed to the page component as props
  };
}

export default function Page({ data }) {
  return <div>{data.title}</div>;
}

In this example:

• The getServerSideProps function fetches data on the server for each request.
• The data is passed as props to the React component for rendering.

2. Pros of Server-Side Rendering with Next.js