Next.js - getServerSideProps() Function

---

---

The getServerSideProps() Function

The Next.js getServerSideProps() function is used to fetch data dynamically at request time for pre-rendering a page. This method runs on server side and fetches data on every request. It is commonly used when data on the page changes frequently, or when the data depends on the request (e.g., authentication, query parameters, etc.).

Syntax

Following is syntax of getServerSideProps() function:

export async function getServerSideProps(context) {
  // Perform server-side logic, such as fetching data
  const data = await fetch('link/to/api').then(res => res.json());

  // Return the data as props
  return {
    props: {
      data, // This will be passed to the page component
    },
  };
}

Parameters

The method takes a 'context' object as its parameter. This object will provide helpful information to the function such as:

• params: An object containing the route parameters for the page.
• req: The HTTP request object.
• res: The HTTP response object.
• query: An object containing the query string parameters.

Return Value

The method returns an object with a 'props' key. The value of this key is an object containing the data that will be passed to the page component as props.

Key Points

• The function runs only on server side, which means it will not be included in Javascript bundle at build time.
• Each time user visits the page, the data is fetched from the server.
• It is recommended to use getServerSideProps when your server data is changing frequently or depends on the request such as query parameters, headers, cookies, etc.

Example 1

In this example, we are fetching a list of blog posts from an API using getServerSideProps method and displaying them on the page.

export async function getServerSideProps() {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts');
    const posts = await res.json();
  
    return {
      props: {
        posts,
      },
    };
  }
  
  export default function Blog({ posts }) {
    return (
      <div>
        <h1>Blog Posts</h1>
        <ul>
          {posts.map((post) => (
            <li key={post.id}>
                <h2>{post.title}</h2>
                <p>{post.body}</p>
            </li>
          ))}
        </ul>
      </div>
    );
  }

Output

Example 2

In this example, we are fetching a single blog post based on the id provided in the URL query parameter. We used the context.query object to get the id user entered in the URL, then fetched the post data from the API using that id.

export async function getServerSideProps(context) {
    const { id } = context.query;
    const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
    const post = await res.json();
  
    return {
      props: {
        post,
      },
    };
  }
  
  export default function Post({ post }) {
    return (
      <div>
        <h1>{post.title}</h1>
        <p>{post.body}</p>
      </div>
    );
}

Output