How to Use Server-Side Rendering in Next.

js Apps for
Better SEO
freecodecamp.org/news/server-side-rendering-in-next-js-for-improved-seo

Joan Ayebola July 17, 2024

Joan Ayebola
Server-side rendering (SSR) is a web development technique that can help
improve your site's SEO. It does this by generating HTML content on the server
in response to a user's request.

This approach contrasts with client-side rendering (CSR), where content is delivered as a
basic HTML shell, and JavaScript fetches and displays data in the browser.

SSR offers significant SEO advantages, making it a perfect fit for Next.js, a popular React
framework. Let's discuss how using SSR with Next.js can elevate your website's search
engine visibility.

Table of Contents

What is Server-Side Rendering?

Server-side rendering (SSR) is a technique in web development where the web server
generates the complete HTML content of a web page before sending it to the user's browser.

1/11
This is unlike client-side rendering (CSR), where the browser downloads a basic HTML
structure and then uses JavaScript to fetch and display the content.

How to Get Started with Next.js and SSR

Getting started with Next.js and server-side rendering (SSR) involves a few steps. Here's a
step-by-step guide to help you set up a Next.js project and implement SSR.

Step 1: Install Next.js

First, you need to install Next.js. You can do this using create-next-app, which sets up a
new Next.js project with a default configuration. Run the following command in your terminal:

npx create-next-app my-next-app

cd my-next-app
npm run dev

This command creates a new Next.js application in a folder called my-next-app and starts
the development server.

Step 2: Understand the Project Structure

Next.js organizes the project with some default folders and files:

pages/: This folder contains all the pages of your application. Each file represents a
route in your app.
public/: Static assets like images can be placed here.
styles/: Contains CSS files for styling your application.

Step 3: Create a Simple Page with SSR

Now, let's create a simple page that uses SSR.

Create a new file pages/index.js:

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

const Home = ({ data }) => {

return (
<div>
<h1>Welcome to Next.js with SSR</h1>
<p>Data fetched from the server: {data.message}</p>
</div>
);
};

export async function getServerSideProps() {

// Fetch data from an API or other sources
const res = await fetch('https://api.example.com/data');
const data = await res.json();

// Return the data as props to the Home component

return {
props: {
data,
},
};
}

export default Home;

Let's discuss this code in some detail. For the home component:

The Home component is a functional component that accepts props.

The data prop contains the data fetched from the server.
Inside the component, we render a welcome message and the fetched data.

The getServerSideProps function:

This function is exported from the pages/index.js file.

It executes on the server for each request to this page.
Inside this function, you can perform asynchronous operations such as fetching data
from an external API.
The fetched data is returned as an object with a props key. This object will be passed
to the Home component as props.

You can add error handling to the getServerSideProps function to manage any issues that
might arise during data fetching. Here's an example:

3/11
export async function getServerSideProps() {
try {
const res = await fetch('https://api.example.com/data');
if (!res.ok) {
throw new Error('Failed to fetch data');
}
const data = await res.json();
return {
props: {
data,
},
};
} catch (error) {
console.error(error);
return {
props: {
data: { message: 'Error fetching data' },
},
};
}
}

Step 4: Run the Application

Start your development server if it's not already running:

npm run dev

Open your browser and go to http://localhost:3000. You should see the message
fetched from the API displayed on the page.

How Next.js Enables Server-Side Rendering

Next.js provides a seamless way to enable SSR and Static Site Generation (SSG). It pre-
renders every page by default. Depending on the use case, you can choose between SSR
and SSG:

Server-Side Rendering (SSR): Pages are rendered on each request.

Static Site Generation (SSG): Pages are generated at build time.

Next.js determines which rendering method to use based on the functions you implement in
your page components (getStaticProps and getServerSideProps).

Next.js Page Components

Next.js uses the pages/ directory to define routes. Each file in this directory corresponds to a
route in your application.

pages/index.js → /

4/11
 pages/about.js → /about
pages/posts/[id].js → /posts/:id

Here's a basic example of a page component:

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

const Home = () => {

return (
<div>
<h1>Welcome to Next.js</h1>
<p>This is the home page.</p>
</div>
);
};

export default Home;

Data Fetching with getStaticProps and getServerSideProps

getStaticProps is used for static generation. It runs at build time and allows you to fetch
data and pass it to your page as props. Use this for data that doesn't change often.

Example:

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

const Home = ({ posts }) => {

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

// This function runs at build time

export async function getStaticProps() {
// Fetch data from an API
const res = await fetch('https://jsonplaceholder.typicode.com/posts');
const posts = await res.json();

return {
props: {
posts,
},
};
}

export default Home;

getServerSideProps is used for server-side rendering. It runs on every request and allows
you to fetch data at request time.

Example:

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

const Home = ({ data }) => {

return (
<div>
<h1>Server-Side Rendering with Next.js</h1>
<p>Data fetched from the server: {data.message}</p>
</div>
);
};

// This function runs on every request

export async function getServerSideProps() {
// Fetch data from an external API
const res = await fetch('https://api.example.com/data');
const data = await res.json();

return {
props: {
data,
},
};
}

export default Home;

Benefits of SSR for SEO with Next.js and How to Optimize

In this section, we will look at the main benefits of using SSR for SEO and give easy-to-
follow tips on how to make the most of these benefits with your Next.js application.

1. Improved Indexing by Search Engines

Client-side rendering (CSR) can cause issues with search engines struggling to index
content properly since it is rendered in the user's browser using JavaScript.

SSR, however, renders content on the server before sending it to the user's browser,
ensuring the HTML is complete and can be easily crawled and indexed by search engines.

Use SSR for important pages: Ensure that key pages, such as landing pages, blog posts,
and product pages, are rendered on the server to facilitate better indexing.

Example – Using SSR for a blog post page:

7/11
// pages/blog/[id].js
import React from 'react';
import { useRouter } from 'next/router';
import Head from 'next/head';

const BlogPost = ({ post }) => {

const router = useRouter();
if (router.isFallback) {
return <div>Loading...</div>;
}

return (
<div>
<Head>
<title>{post.title}</title>
<meta name="description" content={post.excerpt} />
</Head>
<h1>{post.title}</h1>
<p>{post.content}</p>
</div>
);
};

export async function getServerSideProps({ params }) {

const res = await fetch(`https://api.example.com/posts/${params.id}`);
const post = await res.json();

return {
props: {
post,
},
};
}

export default BlogPost

BlogPost Component: This component displays a blog post. It uses next/head to

manage meta tags, which are important for SEO.
getServerSideProps Function: This function fetches data for the blog post from an
API. It runs on the server for every request to this page, ensuring the content is ready
for search engines to index when they crawl the page.

2. Faster Load Times

Search engines like Google use page load speed as a ranking factor. SSR can improve initial
load time because the server sends a fully rendered page to the browser, enhancing
perceived performance and user experience.

Optimize server response time: Ensure your server is optimized for quick responses. Use
caching strategies to reduce server load.

8/11
Example – cache-control header for SSR:

export async function getServerSideProps({ res }) {

res.setHeader('Cache-Control', 'public, s-maxage=10, stale-while-revalidate=59');

const resData = await fetch('https://api.example.com/data');

const data = await resData.json();

return {
props: {
data,
},
};
}

getServerSideProps Function: This function sets cache-control headers to cache the

response for 10 seconds and serve stale content while revalidating for 59 seconds.
This improves server response time and page load speed, contributing to better SEO.

3. Improved Social Media Sharing

When sharing links on social media, platforms like Facebook and Twitter scrape the URL
content to generate previews. SSR ensures that necessary metadata is available in the initial
HTML, resulting in better previews and increased click-through rates.

Manage meta tags with next/head: Use the next/head component to add meta tags for
social media and SEO.

Example – Adding meta tags to a page:

import Head from 'next/head';

const Page = ({ data }) => (

<div>
<Head>
<title>{data.title}</title>
<meta name="description" content={data.description} />
<meta property="og:title" content={data.title} />
<meta property="og:description" content={data.description} />
<meta property="og:image" content={data.image} />
<meta name="twitter:card" content="summary_large_image" />
</Head>
<h1>{data.title}</h1>
<p>{data.content}</p>
</div>
);

9/11
 Page Component: This component uses next/head to add SEO meta tags, including
Open Graph tags for social media previews. This ensures that when the page is
shared, social media platforms can generate rich previews with the provided metadata.

4. Enhanced User Experience

A faster, more responsive website enhances the overall user experience, leading to longer
visit durations and lower bounce rates. Both factors positively influence your SEO rankings.

Pre-render pages with static generation (SSG) for less dynamic content: Use SSG for
pages that don’t change often to reduce server load and improve performance.

Example – Using SSG for a static page:

export async function getStaticProps() {

const res = await fetch('https://api.example.com/static-data');
const data = await res.json();

return {
props: {
data,
},
revalidate: 10, // Revalidate at most once every 10 seconds
};
}

const StaticPage = ({ data }) => (

<div>
<h1>{data.title}</h1>
<p>{data.content}</p>
</div>
);

export default StaticPage;

StaticPage Component: This component displays static content fetched from an API.
getStaticProps Function: This function fetches data at build time and revalidates it
every 10 seconds, ensuring the content is always fresh while reducing server load.

Conclusion
Using server-side rendering and Next.js together is like giving your website an extra boost for
search engines. With pre-built content for search engines and a smooth experience for
visitors, your site is set up to be seen by more people naturally.

This works great for any kind of website, from online stores to blogs. Next.js with SSR makes
it easy to build a website that search engines love and users enjoy.

10/11
That's all for this article! If you'd like to continue the conversation or have questions,
suggestions, or feedback, feel free to reach out to connect with me on LinkedIn. And if you
enjoyed this content, consider buying me a coffee to support the creation of more developer-
friendly contents.

Joan Ayebola
Hi, I am Joan, a frontend developer and technical writer who's deeply passionate
about open-source technologies.

If you read this far, thank the author to show them you care.

Learn to code for free. freeCodeCamp's open source curriculum has helped more than
40,000 people get jobs as developers. Get started

11/11