Introduction

getServerSideProps is a powerful function in Next.js that enables server-side rendering (SSR) by fetching data on each request. Unlike static generation, which happens at build time, getServerSideProps executes on the server during every page request, providing up-to-date data and dynamic content. This capability is essential for building SEO-friendly, fast, and data-driven React applications where real-time data is crucial.

In this comprehensive tutorial, you will learn how to effectively use getServerSideProps in your Next.js projects. We will cover its purpose, implementation steps, best practices, tools, and real-world examples to help you master server-side rendering with ease.

Step-by-Step Guide

1. Understanding the Role of getServerSideProps

getServerSideProps is a special asynchronous function exported from a Next.js page. When defined, Next.js calls this function on the server side during every request to that page. The function fetches any required data and passes it as props to the page component, ensuring that the page renders with the latest data on the server before sending it to the client.

2. Setting Up a Next.js Project

If you haven’t already, start by creating a new Next.js application:

npx create-next-app@latest my-ssr-app

Navigate into your project directory:

cd my-ssr-app

Open the project in your preferred code editor, such as VS Code.

3. Creating a Page with getServerSideProps

Within the pages directory, create a new file named ssr-example.js. This page will demonstrate how to fetch data on the server side.

Here is a basic example:

export async function getServerSideProps(context) {
// Fetch data from an external API or database
const res = await fetch('https://api.example.com/data')
const data = await res.json()
// Return the data as props
return { props: { data } }
}
export default function SsrExample({ data }) {
return (
<div>
<h1>Server Side Rendered Data</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
)
}

This code fetches data from an API every time the page is requested and passes it to the component as props.

4. Accessing Request Context

The context parameter passed to getServerSideProps provides useful information such as:

• params – dynamic route parameters
• req – the HTTP request object
• res – the HTTP response object
• query – query string parameters

You can use these to customize data fetching based on the request.

5. Handling Errors and Redirects

You can handle errors gracefully inside getServerSideProps by returning notFound or redirect objects:

export async function getServerSideProps(context) {
try {
const res = await fetch('https://api.example.com/data')
if (!res.ok) {
return { notFound: true } // Show 404 page
}
const data = await res.json()
return { props: { data } }
} catch (error) {
return {
redirect: {
destination: '/error',
permanent: false,
}
}
}
}

This example redirects users to an error page if the fetch fails.

6. Testing Your Page

Run your development server:

npm run dev

Navigate to http://localhost:3000/ssr-example to see server-side rendered data in action.

Best Practices

1. Use getServerSideProps Only When Necessary

Since getServerSideProps runs on every request, it can increase server load and response time. Use it only when data must be fresh and dynamic. For static or rarely changing data, prefer getStaticProps with incremental static regeneration.

2. Keep Data Fetching Lightweight

Optimize API calls and database queries to minimize latency. Avoid fetching large datasets unnecessarily. Implement pagination or filtering to reduce data transferred.

3. Cache Responses When Possible

Consider caching API responses at the server or CDN level to improve performance without sacrificing data freshness.

4. Sanitize and Validate Input

Always validate and sanitize query parameters or route params received via the context object to prevent injection attacks or incorrect data fetching.

5. Handle Errors Gracefully

Implement proper error handling inside getServerSideProps to display fallback UI, redirects, or 404 pages instead of crashing your app.

6. Avoid Client-Side State for SSR Data

Since data is fetched server-side, avoid duplicating state management on the client unless necessary for interactivity. This keeps the initial load fast and SEO-friendly.

Tools and Resources

1. Next.js Documentation

The official Next.js docs provide comprehensive information and examples for getServerSideProps usage:

Next.js getServerSideProps Documentation

2. API Testing Tools

Tools like Postman or Insomnia help test APIs that you consume inside getServerSideProps.

3. Code Editors

Use editors like Visual Studio Code with JavaScript and React extensions for better syntax highlighting, linting, and debugging.

4. Performance Monitoring

Implement tools such as Lighthouse and WebPageTest to monitor SSR page load times and optimize accordingly.

Real Examples

Example 1: Fetching User Data Based on URL Parameter

export async function getServerSideProps(context) {
const { id } = context.params
const res = await fetch(https://api.example.com/users/${id})
const user = await res.json()
if (!user) {
return { notFound: true }
}
return { props: { user } }
}
export default function UserProfile({ user }) {
return (
<div>
<h1>User Profile: {user.name}</h1>
<p>Email: {user.email}</p>
</div>
)
}

Example 2: Redirecting Unauthorized Users

export async function getServerSideProps(context) {
const { req } = context
const token = req.cookies.token
if (!token) {
return {
redirect: {
destination: '/login',
permanent: false,
}
}
}
// Fetch protected data
const res = await fetch('https://api.example.com/protected', {
headers: { Authorization: Bearer ${token} },
})
const data = await res.json()
return { props: { data } }
}
export default function ProtectedPage({ data }) {
return <div>Protected Data: {JSON.stringify(data)}</div>
}

Example 3: Using Query Parameters

export async function getServerSideProps(context) {
const { search } = context.query
const res = await fetch(https://api.example.com/search?q=${encodeURIComponent(search)})
const results = await res.json()
return { props: { results } }
}
export default function SearchResults({ results }) {
return (
<div>
<h1>Search Results</h1>
<ul>
{results.map(item => (
<li key={item.id}>{item.title}</li>
))}
</ul>
</div>
)
}

FAQs

What is the difference between getServerSideProps and getStaticProps?

getServerSideProps runs on every request, fetching data dynamically, while getStaticProps runs at build time to generate static pages. Use getServerSideProps for dynamic data and getStaticProps for static or semi-static content.

Can I use getServerSideProps with client-side navigation?

Yes. On initial page load, getServerSideProps runs on the server. During client-side navigation, Next.js fetches data by calling the function via its API routes, ensuring seamless data updates.

Does getServerSideProps affect SEO?

Yes, it improves SEO by providing fully rendered HTML content on the server, which search engines can crawl easily compared to client-side rendered pages.

Can I fetch data from a database inside getServerSideProps?

Absolutely. You can query a database, call APIs, or perform any asynchronous operations inside getServerSideProps, as it runs on the server.

Is getServerSideProps supported in API routes?

No. getServerSideProps is exclusive to page components and cannot be used inside API route files.

Conclusion

getServerSideProps is an essential feature in Next.js that enables dynamic server-side rendering by fetching data on every request. It enhances SEO, ensures fresh content, and supports dynamic use cases like authentication and personalized pages.

By following this tutorial’s step-by-step guide, best practices, and examples, you can confidently implement getServerSideProps in your Next.js projects to build performant and SEO-friendly applications. Remember to optimize data fetching, handle errors carefully, and use this technique only when necessary for the best user experience and scalability.