Nextjs How to use getServerSideProps

In simple terms, getServerSideProps enables a page to render server-side. getServerSideProps renders your client-side page server-side and returns a hydrated SEO-friendly HTML document to the browser. Meaning getServerSideProps pre-renders the page on each request using the data it retrieves from the server.

getServerSideProps works asynchronously and can be added to any page written in React js.

This tutorial shows how to convert an individual Reactjs page to a server-side rendered Next js page. Note that you do not have to convert the entire page, only the portion of a page you want server-side rendered. You can use Reactjs and Nextjs on the same page. However, the project should follow the Nextjs folder structure and architecture. Only the content rendered by Nextjs will be hydrated.

Below is a simple application page that we have converted to server-side render with the getServerSideProps method. The page uses both Reactjs and Nextjs features to render content. You can download the entire example at the end of this tutorial.

import { useEffect, useState } from 'react'

export default function Home({ users }) {
   const[reactData, setReactData] = useState([]);
   useEffect(() => {
      fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
      .then(data => {
      setReactData(data);
      }).catch((e) => {console.log(e)});
   }, []);

   return (
      <>
         <table>
            <tr>
               <th colSpan='3' className='topnav'>Rendered By React JS | Client side rendered</th>
            </tr>
            {reactData.map((user, index) => (
               <tr>
                  <td>{user.name}</td>
                  <td>{user.username}</td>
                  <td>{user.email}</td>
               </tr>
            ))}
         </table>

         <br/>
      
         <table>
            <tr>
               <th colSpan='3' className='topnav'>Rendered By Next JS | Server side rendered</th>
            </tr>
            {users.map((user, index) => (
               <tr>
                  <td>{user.name}</td>
                  <td>{user.username}</td>
                  <td>{user.email}</td>
               </tr>
            ))}
         </table>
      </>
   )
}
export async function getServerSideProps({params,req,res,query,preview,previewData,resolvedUrl,locale,locales,defaultLocale}) {
  console.log('Logging : '+res);
  const data = await fetch('https://jsonplaceholder.typicode.com/users');
  const users = await data.json();
  return { props: { users } }
}

Reactjs Client-side rendered HTML content

Note that the first table is populated with Reactjs using the useEffect() hook. Therefore, the rendered content resulting from the useEffect() method returns the body of the first table as client-side rendered HTML. To verify this, view your HTML page source, and you will notice the first table body is empty.

<table>
   <tr><th colSpan="3" class="topnav">Rendered By React JS | Client side rendered</th></tr>
</table>

Next js Server-side rendered HTML content

The second table is rendered with the properties returned by Nextjs's getServerSideProps() function. Therefore, the second table is rendered on the server side, and you can confirm this by viewing the HTML source. Unlike the client-side rendered Reactjs table, the table body is fully available in the HTML source.

<table>
   <tr><th colSpan="3" class="topnav">Rendered By Next JS | Server side rendered</th></tr>
   <tr><td>Leanne Graham</td><td>Bret</td><td>Sincere@april.biz</td></tr>
   <tr><td>Ervin Howell</td><td>Antonette</td><td>Shanna@melissa.tv</td></tr>
   <tr><td>Clementine Bauch</td><td>Samantha</td><td>Nathan@yesenia.net</td></tr>
   <tr><td>Patricia Lebsack</td><td>Karianne</td><td>Julianne.OConner@kory.org</td></tr>
   <tr><td>Chelsey Dietrich</td><td>Kamren</td><td>Lucio_Hettinger@annie.ca</td></tr>
   <tr><td>Mrs. Dennis Schulist</td><td>Leopoldo_Corkery</td><td>Karley_Dach@jasper.info</td></tr>
   <tr><td>Kurtis Weissnat</td><td>Elwyn.Skiles</td><td>Telly.Hoeger@billy.biz</td></tr>
   <tr><td>Nicholas Runolfsdottir V</td><td>Maxime_Nienow</td><td>Sherwood@rosamond.me</td></tr>
   <tr><td>Glenna Reichert</td><td>Delphine</td><td>Chaim_McDermott@dana.io</td></tr>
   <tr><td>Clementina DuBuque</td><td>Moriah.Stanton</td><td>Rey.Padberg@karina.biz</td></tr>
</table>

What getServerSideProps() accepts?

Now, let's look at some details about the getServerSideProps() method and its attributes.

export async function getServerSideProps(context) {
   return { props: {},}
}

Method parameters

The getServerSideProps() has several parameters to accept arguments.

• params: If the page is a dynamic route, params contain route parameters or path variables.
• req: The HTTP request object
• res: The HTTP response object
• query: An object representing the query string. For example, text=search in the URL can be retrieved with path.text
• preview: True or false depending on if the page is in preview mode or not.
• previewData: Data set by setPreviewData
• resolvedUrl: The normalized request URL with original query values
• locale: If enabled, contains the active locale
• locales: If enabled, contains all supported locales
• defaultLocale: If enabled, contains the configured default locale

What getServerSideProps() returns?

• props: An optional serializable object passed to the page component. return { props: { users } }
• notFound: Returns a 404 status and page. return { notFound: true,}
• redirect: An redirect to allow redirecting to internal or external resources. It should match the pattern { destination: string, permanent: boolean }. return { redirect: { destination: '/post', permanent: false, },}

Below is an example of getServerSideProps() method with different parameters and return objects.

export async function getServerSideProps({params,req,res,query,preview,previewData,resolvedUrl,locale,locales,defaultLocale}) {
   if (query.text) {
      return { redirect: { destination: '/post', permanent: false, },}
   }
   const data = await fetch('https://jsonplaceholder.typicode.com/users');
   const users = await data.json();
   if (!data) {
      return {notFound: true,}
   }  
   return { props: { users } }
}