Using `getServerSideProps` for SSR Next.js

What You’ll Learn 📚

• Understanding SSR and its benefits
• How getServerSideProps works in Next.js
• Step-by-step examples from simple to complex
• Common questions and troubleshooting tips

Introduction to Server-Side Rendering (SSR)

Server-Side Rendering (SSR) is a technique where the HTML of a page is generated on the server for each request. This can improve performance and SEO, as the content is ready to be indexed by search engines. In Next.js, SSR is achieved using getServerSideProps.

Key Terminology

• SSR (Server-Side Rendering): Rendering a page on the server for each request.
• getServerSideProps: A Next.js function that fetches data on each request to pre-render a page.
• Pre-rendering: Generating HTML in advance, either at build time or request time.

Simple Example: Fetching Data with `getServerSideProps`

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

function HomePage({ data }) {
  return (
    

      
Welcome to My Page
      
Data from server: {data}
    
  );
}

export async function getServerSideProps() {
  // Simulate fetching data
  const data = 'Hello from the server!';
  return {
    props: { data },
  };
}

export default HomePage;

Progressively Complex Examples

Example 1: Fetching Data from an API

// pages/api-data.js
import React from 'react';

function ApiDataPage({ data }) {
  return (
    

      
API Data
      
{JSON.stringify(data, null, 2)}

  );

}
export async function getServerSideProps() {

  const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');

  const data = await res.json();

  return {

    props: { data },

  };

}
export default ApiDataPage;

Here, getServerSideProps fetches data from an external API. The fetched data is passed as props to the page component. This is useful for dynamic data that changes frequently.


Expected Output:
API Data
{“userId”: 1, “id”: 1, “title”: “…”, “body”: “…”}

Example 2: Handling Errors

// pages/error-handling.js
import React from 'react';

function ErrorHandlingPage({ data, error }) {
  if (error) {
    return 
Error: {error}
;
  }
  return (
    

      
Data with Error Handling
      
{JSON.stringify(data, null, 2)}

  );

}
export async function getServerSideProps() {

  try {

    const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');

    if (!res.ok) {

      throw new Error('Failed to fetch data');

    }

    const data = await res.json();

    return {

      props: { data },

    };

  } catch (error) {

    return {

      props: { error: error.message },

    };

  }

}
export default ErrorHandlingPage;

This example demonstrates error handling in getServerSideProps. If the fetch request fails, the error is caught and passed to the page component, allowing you to display a friendly error message.


Expected Output:
Data with Error Handling
{“userId”: 1, “id”: 1, “title”: “…”, “body”: “…”}
Or, if an error occurs:
Error: Failed to fetch data

Example 3: Using Environment Variables

// pages/env-vars.js
import React from 'react';

function EnvVarsPage({ secret }) {
  return (
    

      
Environment Variables
      
Secret: {secret}
    
  );
}

export async function getServerSideProps() {
  const secret = process.env.SECRET_KEY || 'No secret found';
  return {
    props: { secret },
  };
}

export default EnvVarsPage;

Common Questions and Answers

1. What is the difference between SSR and static generation?

   SSR generates HTML on each request, while static generation pre-renders HTML at build time.

2. Can I use getServerSideProps with client-side navigation?

   Yes, but the data will only be fetched on the server side, not during client-side transitions.

3. How does getServerSideProps affect performance?

   It can slow down the initial load time since the page is rendered on each request, but it ensures the data is always up-to-date.

4. What happens if getServerSideProps throws an error?

   The page will display an error unless you handle it within the function.

5. Can I use getServerSideProps in API routes?

   No, getServerSideProps is only for page components, not API routes.

Troubleshooting Common Issues

Ensure that getServerSideProps is exported from a page component, not a regular component or API route.

If you encounter a “Cannot read property ‘props’ of undefined” error, check that you’re returning the correct structure from getServerSideProps.

Remember to set up environment variables in a .env.local file and restart your server to apply changes.

Practice Exercises

1. Create a page that fetches and displays a list of users from an API using getServerSideProps.
2. Implement error handling for a page that fetches data from an unreliable API.
3. Use environment variables to store and display a secret message on a page.

For more information, check out the Next.js documentation on getServerSideProps.