Static Site Generation (SSG) vs Server-Side Rendering in Next.js (2024)

Static Site Generation (SSG) vs Server-Side Rendering in Next.js (1)

Chris Ebube Roland

In simple terms, rendering a web page means creating and displaying the web page so that it appears on your computer or mobile screen for you to see and interact with seamlessly. It’s the process of taking all the code, content, images, and other elements of a website and turning them into what you see in your web browser.

Rendering is more like assembling a jigsaw puzzle or a Rubik’s cube. The web browser takes all the pieces (HTML, CSS, JavaScript, images, elements, and more) and puts them together to give you a complete display picture — the web page you’re looking at.

In this article, we’ll delve into the differences between SSG and SSR in Next.js, the pros and cons of each, and scenarios where you might prefer one over the other using code examples.

Static Site generation renders a page at build time. This means that for SSG, the process of creating the web page occurs before the site is launched and is accessed by users. Look at it this way: the HTML and content for each web page are pre-rendered or pre-generated, so they are ready and static (unchanging) when the website is deployed to a web server.

When a user visits a page on your site, the pre-rendered or pre-generated static HTML is delivered immediately to their browser, with no additional processing at the time of the user’s request.

Unlike static site generation, server-side rendering focuses on or renders a page in real-time. In this scenario, when you visit a website, the computer that hosts the website creates the page for you, like a chef preparing a dish as you order it at a restaurant.

SSR is great for web pages that need to show real-time information, updates, or content that frequently changes. In the same way, a restaurant can customize an order to your specific preference; that’s the same way a server-side rendered website prepares the page you want to visit as soon as you hit ‘Enter’.

Static Site Generation (SSG) vs Server-Side Rendering in Next.js (3)

These two rendering methods boost the performance and user experience of your Next.js application. While SSG creates fast-loading, pre-generated pages, SSR ensures that the dynamic contents on your website are up-to-date and on track.

A significant reason why you should use SSR or SSG in your Next.js applications is the ability for your website to rank highly on search engines.

Here, we will look at how Next.js static site generation works when using SSG, code implementations of SSG, and the pros and cons of using SSG.

To understand how Next.js works with static site generation, imagine making many printed copies of a book before they are read. When you build your Next.js application, it creates static HTML pages for your website.

So when a user visits your website, just like books are ready to be read after printing out their pages, your web pages are ready to be viewed from the pre-generated HTML pages that were created. This makes your Next.js application super-fast, as there is no need to assemble the pages from scratch.

In a nutshell, Next.js with SSG is like printing out your website pages in advance so that when people visit, they get the pages instantly, making for a fast and efficient browsing experience.

You should use Static Site Generation with Next.js when you want to provide faster page loads or minimize server-side processing, improve search engine optimization, and upload pages with heavy content or content that will never change (blogs, portfolios, news sites, documentation, etc.).

Helps in SEO: Search Engine Optimization helps your website rank higher on search engines like Google. In your Next.js application, search engines can easily crawl SSG-indexed pages because they are just HTML files.
CDN-friendly: SSG works better with Content Delivery Networks (CDNs), which means you can serve your static page from distributed servers worldwide, which improves your website’s global performance.
Reduced Server Load: Since the web pages are pre-generated, the server is not expected to process each request sent by a user, which improves your website’s scalability.

Limited Real-Time Update: With SSG, you cannot effectively change or make real-time updates on your website because any update will require a rebuild, causing delays.
Build Time Overhead: The build process can become time-consuming on websites with numerous pages.
Complex Authentication: If your Next.js applications require authentication and logic, it can be challenging to use SSG.

In Next.js, you can implement Static Site Generation by using the `getStaticProps` function.

In the code below, we created a simple Next.js page that uses SSG to fetch and display a list of blog posts from the JSONPlaceholder API. When you build your project, the getStaticProps function pre-generates the HTML for this page, making it a static, fast-loading page.

Step 1:

Firstly, create a new Next.js project:

npx create-next-app my-ssg-app

cd my-ssg-app

Step 2

Create a file called `posts.js` in the ‘pages’ directory:

// pages/posts.js
import React from "react";
const Posts = ({ posts }) => (
 <div>
 <h1>Blog Posts</h1>
 <ul>
 {posts.map((post) => (
 <li key={post.id}>{post.title}</li>
 ))}
 </ul>
 </div>
);
export default Posts;
export async function getStaticProps() {
 const response = await fetch("https://jsonplaceholder.typicode.com/posts");
 const data = await response.json();
 return {
 props: {
 posts: data,
 },
 };
}

Step 3

Run your Next.js application:

npm run dev

Just like we did for SSG, we will also look at how Next.js server-side rendering works, when to use SSR, Next.js code implementations with SSR, and the pros and cons of using SSR.

In SSR, when a user requests a web page, the Next.js server processes the request, fetches the data, and assembles the page on the server, and a fully rendered webpage is sent to the user.

This rendered page can be personalized or updated to show real-time content. Examples of web pages that use SSR are user-specific dashboards.

SSR is always a suitable choice if your Next.js applications require real-time updates, user authentications, server-side data fetching, and complex routing and logic.

Real-Time Updates and Secure Data: SSR allows your Next.js applications to have secure user authentication with real-time updates, which ensures data privacy and website flexibility.
Improved SEO: SSR also ensures better search engine optimization by delivering fully rendered HTML pages.
Server-Side Data Fetching: If your application requires data processing on the server, SSR makes it seamless to fetch server-side data or external APIs.

Time-Consuming Implementations: Using SSR can be very time-consuming because it requires features like server-side code management, data fetching, etc.
Limited Use Cases: Compared to SSG, SSR is the least used rendering method because most websites have static content and do not require real-time updates.
Increased Server Load: SSR can strain server resources, especially when there is a high volume of user requests, potentially affecting the Next.js application’s scalability and performance.

In Next.js, you can implement Server-Side Rendering by using the `getServerSideProps` function.

In this code example, the getServerSideProps function is used to fetch server-side data during each user request, ensuring that users receive real-time content directly from the server.

Step 1

As expected, create a new Next.js project if you haven’t created one yet.

npx create-next-app my-ssr-app

cd my-ssr-app

Step 2

Create a new page in the `pages` directory, such as `about.js`:

// pages/about.js
import React from "react";
const About = ({ serverData }) => (
 <div>
 <h1>About Page</h1>
 <p>{serverData}</p>
 </div>
);
export default About;
export async function getServerSideProps() {
 const serverData = "This data is fetched on the server side.";
 return {
 props: {
 serverData,
 },
 };
}

Step 3

Run your Next.js applications:

npm run dev

Step 4

Access the new about page by navigating to http://localhost:3000/about in your web browser. The page will display content fetched on the server side.

This article highlights the key differences between Static Site Generation (SSGs) and Server-Side Rendering (SSR) in Next.js, providing insights into when, how, and why you should use either of these rendering methods.

However, the decision to use either SSG or SSR should be determined by your application’s specific requirements. SSG is preferable for faster page loads and minimal server-side processing, while SSR excels in scenarios that demand real-time updates, user authentication, and complex logic.

Your choice should depend on the nature of your content and the desired user experience for your website.