getServerSideProps is a built-in function in Next.js that enables Server-Side Rendering (SSR). It allows you to fetch data on each request, which means that the data is retrieved at runtime on the server before the page is rendered. This is particularly useful for applications that require fresh data on every request or for pages that need to be rendered with user-specific data, such as user profiles or dashboards.

Key Features of getServerSideProps

1. Server-Side Rendering: The data is fetched on the server for every request, ensuring that the page is always served with the most current data.

2. Context Parameter: The function receives a context parameter that contains various properties, such as query parameters, request headers, and other useful information related to the request.

3. Props Passing: The data fetched using getServerSideProps is returned as props to the page component, allowing you to render content based on that data.

Basic Usage

Here’s how to use getServerSideProps in a Next.js page component:

// pages/user/[id].js
export default function UserProfile({ user }) {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
}

// Fetch user data at request time
export async function getServerSideProps(context) {
  const { id } = context.params; // Get the dynamic route parameter (user ID)

  // Fetch user data from an API or database
  const res = await fetch(`https://api.example.com/users/${id}`);
  const user = await res.json();

  // If the user is not found, return a 404 status code
  if (!user) {
    return {
      notFound: true, // This will render the 404 page
    };
  }

  return {
    props: { user }, // Pass user data to the page component as props
  };
}

Explanation of the Code

1. Dynamic Route: The file pages/user/[id].js defines a dynamic route for user profiles, where id is a variable parameter.

2. Page Component: The UserProfile component receives the user data as a prop and renders the user’s name and email.

3. getServerSideProps Function:

   • This function is declared as async, allowing you to use await for data fetching.
   • Inside the function, the context parameter provides access to the request details:
     • context.params: Contains route parameters (e.g., the user ID).
   • The function fetches the user data from an external API using the provided ID.
   • If the user is not found, you can return an object with the notFound key set to true, which will render a custom 404 page.
   • The function returns an object with the props key containing the fetched user data.

Benefits of getServerSideProps

• Real-Time Data: Since the data is fetched on every request, it ensures that users always see the most up-to-date information.

• User-Specific Content: Ideal for pages that require user-specific data, such as profile pages or dashboards, where the content can vary based on the user.

• SEO Friendly: SSR helps in SEO because the complete HTML of the page is generated on the server and can be indexed by search engines.

Use Cases for getServerSideProps

• User Profiles: Fetch and display user profiles based on dynamic parameters (like user IDs) that require up-to-date information.

• Dynamic Content: Render pages that depend on data that changes frequently, such as news articles, events, or product listings.

• Authentication and Authorization: Handle user authentication by checking session data and rendering protected routes accordingly.

Performance Considerations

• Server Load: Since data is fetched on every request, it may increase server load compared to static generation. This can be a concern for pages with high traffic.

• Response Time: The time taken to fetch data will impact the response time. Use caching strategies where applicable to improve performance.

Summary

getServerSideProps is a powerful function in Next.js for implementing server-side rendering, allowing you to fetch data on each request. By using this function, you can create dynamic pages that are always served with the latest data, enhancing user experience and ensuring that your application meets the needs of real-time applications. Whether you’re building user profiles, dashboards, or dynamic content pages, getServerSideProps provides a robust solution for rendering pages in Next.js.