Server-Side Rendering (SSR) with Next.js

What is SSR and Why is it Important?

Server-Side Rendering (SSR) is the process of rendering a web page's HTML content on the server instead of the client (browser). In traditional Client-Side Rendering (CSR) approaches, the browser receives an empty HTML and a JavaScript bundle, and then the JavaScript runs to generate the page content. With SSR, an HTML file already filled with content is sent directly to the browser. This provides two main advantages:

• Faster First Contentful Paint (FCP): Users don't have to wait for JavaScript to download and execute to see the content. This significantly improves the user experience, especially on slow network connections.
• Better SEO: Search engine bots may struggle to execute JavaScript to generate content. Since SSR provides bots with a fully crawlable, content-rich HTML, it helps your site rank better in search engines.

Next.js and SSR

Next.js, a React-based framework, supports SSR 'out-of-the-box' and makes it extremely easy. To render a page with SSR in Next.js, you just need to export an async function called getServerSideProps.

export async function getServerSideProps(context) {\n  // This part runs on the server\n  const res = await fetch('https://api.example.com/data');\n  const data = await res.json();\n\n  // The returned data is passed as props to the page component\n  return { props: { data } };\n}

getServerSideProps runs on the server with every request. This ensures that the page is always rendered with the most up-to-date data. This is ideal for pages where content changes frequently (e.g., a news site or the stock status of an e-commerce site).

When to use SSR vs. SSG?

Next.js also supports Static Site Generation (SSG). In SSG, pages are generated once at build time and served from a CDN. This is even faster than SSR. As a rule of thumb:

• Use SSR if you need to personalize content for each request or work with highly dynamic data. (e.g., User dashboard)
• Use SSG (with getStaticProps) if the content is known at build time and is the same for all users (e.g., a blog post, marketing page).

This flexibility in Next.js allows you to choose the most appropriate rendering method for each page of your application.