Next.js: Static Site Generation (SSG): When to use SSG vs. SSR vs. Client-Side Rendering

Introduction

Next.js provides multiple rendering strategies, each suited for different use cases. Understanding when to use Static Site Generation (SSG), Server-Side Rendering (SSR), or Client-Side Rendering (CSR) is crucial for optimizing performance and user experience.

• What is Static Site Generation (SSG)?
  • When to Use SSG
  • Example of SSG in Next.js
  • Advantages of SSG
  • Disadvantages of SSG
• What is Server-Side Rendering (SSR)?
  • When to Use SSR
  • Example of SSR in Next.js
  • Advantages of SSR
  • Disadvantages of SSR
• What is Client-Side Rendering (CSR)?
  • When to Use CSR
  • Example of CSR in Next.js
  • Advantages of CSR
  • Disadvantages of CSR
• SSG vs. SSR vs. CSR: Which One to Use?
• Conclusion
• Support
• License

What is Static Site Generation (SSG)?

Static Site Generation (SSG) pre-renders pages at build time. The generated static HTML is then served to users, ensuring fast performance.

When to Use SSG

• Content does not change frequently (e.g., blogs, documentation, marketing pages).
• SEO is important (pre-rendered pages get indexed better).
• Performance is critical (pre-generated HTML loads instantly).

Example of SSG in Next.js

import { GetStaticProps } from 'next';

export default function Blog({ posts }) {
  return (
    <div>
      <h1>Latest Blog Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export const getStaticProps: GetStaticProps = async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: { posts },
    revalidate: 60, // Incremental Static Regeneration (ISR)
  };
};

Advantages of SSG

✔️ Fast performance (pre-generated HTML).
✔️ Great for SEO.
✔️ Can be deployed to CDN for global availability.

Disadvantages of SSG

❌ Build time increases with large datasets.
❌ Cannot fetch dynamic, user-specific data at build time.

What is Server-Side Rendering (SSR)?

Server-Side Rendering (SSR) generates pages on each request. The HTML is generated dynamically on the server.

When to Use SSR

• Content changes frequently and needs to be fresh (e.g., stock prices, live scores).
• Personalization is required (user-specific dashboards, authenticated content).
• SEO is important, but data must be fetched in real-time.

Example of SSR in Next.js

import { GetServerSideProps } from 'next';

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

export const getServerSideProps: GetServerSideProps = async () => {
  const res = await fetch('https://randomuser.me/api/');
  const data = await res.json();

  return {
    props: { user: data.results[0] },
  };
};

Advantages of SSR

✔️ Fresh data on every request.
✔️ Ideal for personalized content.
✔️ SEO benefits (pre-rendered HTML).

Disadvantages of SSR

❌ Slower than SSG due to server processing time.
❌ More load on the server (each request generates HTML dynamically).

What is Client-Side Rendering (CSR)?

Client-Side Rendering (CSR) renders content in the browser using JavaScript. The initial HTML is minimal, and content loads dynamically via API requests.

When to Use CSR

• Content is highly dynamic and changes often (e.g., social feeds, live chat).
• SEO is not a priority (or alternative techniques like pre-rendering are used).
• The app requires heavy interactivity (dashboards, SPAs, admin panels).

Example of CSR in Next.js

import { useEffect, useState } from 'react';

export default function LiveFeed() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  return (
    <div>
      <h1>Live Data</h1>
      {data ? (
        <ul>
          {data.map((item) => (
            <li key={item.id}>{item.title}</li>
          ))}
        </ul>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

Advantages of CSR

✔️ Best for highly interactive UIs.
✔️ Reduced initial load time (HTML is minimal).
✔️ Works well for apps where SEO is not critical.

Disadvantages of CSR

❌ Poor SEO (requires additional work like SSR or prerendering).
❌ Slower time-to-first-contentful-paint (depends on API calls).

SSG vs. SSR vs. CSR: Which One to Use?

Conclusion

• Use SSG for static content like blogs and documentation (best performance).
• Use SSR for frequently updated, personalized, or real-time data.
• Use CSR for highly interactive applications where SEO is not a concern.

Each approach has its strengths and weaknesses, and choosing the right one depends on your application's requirements.

Support

If you found this guide helpful, consider sharing it with your network!

License

MIT