Server-Side Rendering in Next.js Explained

Introduction

Next.js is a leading React framework that makes building powerful web applications seamless. One of its standout features is Server-Side Rendering (SSR). But what exactly is SSR, and why should you care as a web developer? This article demystifies SSR in Next.js by explaining its benefits, use cases, and offering practical code examples to get you started.

What is Server-Side Rendering?

Server-Side Rendering (SSR) is the process where your page’s content is rendered on the server, not in the browser. When a user requests a page, the server generates the HTML and sends it to the client—making your site faster and more SEO-friendly right from the start.

Why Use SSR in Next.js?

• SEO Boost: SSR delivers fully-rendered HTML, helping search engines preview your content accurately.
• Faster First Load: Users see meaningful content instantly, even on slow connections or devices.
• Dynamic Data: Fetch up-to-date information at request time, perfect for apps with personalized or frequently changing data.

How SSR Works in Next.js

Next.js gives you SSR by simply exporting an async getServerSideProps function from your page. This function runs on the server with every request.

Basic SSR Example

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

  return {
    props: { news },
  };
}

export default function News({ news }) {
  return (
    <div>
      <h1>Latest News</h1>
      <ul>
        {news.map(article => (
          <li key={article.id}>{article.title}</li>
        ))}
      </ul>
    </div>
  );
}

Every time someone visits /news, the data is fetched server-side just before rendering the page.

SSR vs. Static Generation & Client-Side Rendering

• Static Generation (SSG): Pages are built at deploy time—best for sites with rarely changing content.
• SSR: Pages are built at request time—great for dynamic or personalized content.
• CSR (Client-Side Rendering): Data is loaded on the client after the JavaScript bundle loads.

When Should You Use SSR?

• Pages with user-specific or frequently updated data
• Content that benefits from SEO
• Dashboards, news feeds, or e-commerce product listings

Limitations of SSR

• Potentially longer time-to-first-byte due to server data fetching
• Higher server workload than static pages
• Complex cache management if not handled well

Advanced SSR: Authentication Example

// pages/profile.js
export async function getServerSideProps(context) {
  const token = context.req.cookies.token;
  if (!token) {
    return { redirect: { destination: '/login', permanent: false } };
  }
  // Fetch user with token
  const res = await fetch('https://api.example.com/me', {
    headers: { Authorization: `Bearer ${token}` },
  });
  const user = await res.json();
  return { props: { user } };
}

export default function Profile({ user }) {
  return <div>Welcome, {user.name}!</div>;
}

Conclusion

SSR in Next.js brings performance, SEO, and flexibility to your web projects. By simply leveraging getServerSideProps, you unlock server power with minimal code change. Consider your project’s needs, and blend SSR with SSG and CSR where it makes the most sense. Happy coding!