Server-Side Rendering (SSR) vs. Static Site Generation (SSG) with Next.js

Published on 5.10.2020

When building React applications, you often need to decide how to handle rendering and data fetching. Next.js provides powerful tools for both Server-Side Rendering (SSR) and Static Site Generation (SSG), each of which offers distinct advantages based on the use case.

In this post, we’ll compare SSR and SSG, explore Client-Side Rendering (CSR), and show you how to implement the appropriate methods in Next.js with getStaticProps and getServerSideProps. We’ll also dive into the SEO benefits of pre-rendering and which rendering method to use when building React apps with Next.js.

---

When to Use SSR, SSG, and Client-Side Rendering (CSR)

When building a Next.js application, choosing the right rendering technique depends on your project’s needs. Let’s explore the three most common rendering methods:

1. Server-Side Rendering (SSR)

In SSR, pages are rendered on the server for every request. When a user visits a page, the server generates the HTML dynamically and sends it to the browser. This is ideal for pages that require real-time data and frequent updates.

When to Use SSR:

• Dynamic content: Pages that need to be updated frequently, such as user dashboards, product pages with live data, or any page that requires real-time data fetching.
• SEO: Server-side rendering ensures that search engines can crawl and index your pages because they receive fully-rendered HTML content when they visit the page.
• Personalization: For personalized content that depends on user data, SSR can fetch user-specific data and render it on the server.

2. Static Site Generation (SSG)

With SSG, pages are pre-rendered at build time. The HTML is generated once, and the resulting files are served to the user when they request the page. This results in faster page loads because no server-side processing is needed for each request.

When to Use SSG:

• Static content: Pages that don’t change often and don’t require real-time data, such as blogs, marketing pages, documentation, or landing pages.
• Fast performance: SSG offers lightning-fast load times, as the content is already pre-built and can be served from a CDN.
• SEO: Like SSR, SSG also provides full HTML to search engines, improving SEO since the content is pre-rendered and easily indexed.

3. Client-Side Rendering (CSR)

In CSR, React components are rendered in the browser using JavaScript, and the server only provides a bare-bones HTML document. All content is fetched and rendered on the client-side after the initial page load.

When to Use CSR:

• Highly interactive pages: Pages with a lot of user interactions, like single-page applications (SPAs), dashboards, or apps that don’t need SEO or rely on real-time data fetching.
• No SEO concerns: If SEO is not important for the page (e.g., internal admin pages or user-specific content that’s not indexed by search engines).

---

Implementing getStaticProps and getServerSideProps in Next.js

Now that you understand when to use SSR, SSG, and CSR, let’s see how to implement these techniques in Next.js using getStaticProps and getServerSideProps.

1. Static Site Generation with getStaticProps

getStaticProps is used to fetch data during build time and pre-render the page. This is ideal for pages where content doesn’t change frequently.

Example: Using getStaticProps for SSG

// pages/index.js
import React from 'react';

function HomePage({ data }) {
  return (
    <div>
      <h1>Static Site Generation Example</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export async function getStaticProps() {
  // Fetch data during build time
  const res = await fetch('https://api.example.com/items');
  const data = await res.json();

  return {
    props: { data }, // Passed as props to the page
  };
}

export default HomePage;

In this example, getStaticProps fetches data from an API during build time. The data is then passed as props to the component, and the page is pre-rendered as a static HTML file. This method is excellent for static pages that don’t need frequent updates.

2. Server-Side Rendering with getServerSideProps

getServerSideProps is used for SSR and fetches data on each request, ensuring that the page is always up-to-date with the latest data.

Example: Using getServerSideProps for SSR

// pages/profile.js
import React from 'react';

function ProfilePage({ user }) {
  return (
    <div>
      <h1>Server-Side Rendering Example</h1>
      <p>Name: {user.name}</p>
      <p>Email: {user.email}</p>
    </div>
  );
}

export async function getServerSideProps() {
  // Fetch data on every request (e.g., user-specific data)
  const res = await fetch('https://api.example.com/user');
  const user = await res.json();

  return {
    props: { user }, // Passed as props to the page
  };
}

export default ProfilePage;

In this example, getServerSideProps fetches user data on every request, allowing for real-time, dynamic content rendering. This is suitable for pages that need fresh data on each visit, such as user profiles or dynamic content.

---

SEO Benefits of Pre-Rendering

Both SSR and SSG offer significant SEO benefits because they provide fully rendered HTML pages, making it easier for search engines to crawl and index your content. This ensures that your pages are ranked correctly by search engines, even if they rely on dynamic data.

• SSR: The page is fully rendered on the server before it reaches the browser, so search engines can crawl the HTML and index it right away. This is ideal for pages with real-time or dynamic content.
• SSG: The content is pre-rendered at build time and served as static HTML. Since the HTML is ready for search engines to crawl and index immediately, it provides excellent SEO for static content.

By pre-rendering pages, you reduce the time it takes for search engines to index your site and improve the visibility of your content.

---

Conclusion

Next.js provides a powerful toolkit for rendering React apps with SSR, SSG, and CSR. Each rendering method has its own use case:

• SSR is ideal for dynamic, real-time pages.
• SSG is best for static pages with content that doesn’t change frequently.
• CSR is used for highly interactive apps or when SEO is not a concern.

By using getStaticProps and getServerSideProps, Next.js allows you to easily implement both SSR and SSG, ensuring your app is fast, scalable, and SEO-friendly. Pre-rendering with either SSR or SSG can help boost your app’s performance and make it more discoverable by search engines.

Choose the right rendering strategy based on your project’s needs to optimize both performance and SEO. If you need any further guidance on using Next.js or need help with implementation, feel free to reach out!