Next.js prerendering on server side with getServerSideProps

Next.js can render the data returned by getServerSideProps on each request if the function is called from a page.

Next.js recommends using this function only if you think your application need real time data rendering, and you can export it only from a page.

This function description and parameters are based on Next.js version 11.1.0.

Why and when using getServerSideProps

You should use getServerSideProps in case you need to fetch a fresh data on each HTTP request. It is worth mentioning that it will be slower than fetching data using getStaticProps because it is hard to have a cache on this case, you can also think of fetching data from client side if the data is specific to each client, for example the case when a client login and gets his own personal data, in Next.js there is an available solution called SWR (Stale While Revalidate) in that case.

getServerSideProps function parameters

For this function, the keyword context is available for use as an object parameter; one of the options available is the ability to use req and res which stands for HTTP request incoming to the server and outgoing responses sent by the server. You can destructure the context object and use only the parameters you need as shown below:

// we destructure context and get only res for example
export const getServerSideProps = ({ res }) => {

The list of available options are:

• params: is either undefined if the page is not dynamic, if dynamic it will contain the an object with key the page name and the value is the generated value for this page.
• req: The HTTP request object.
• res: The HTTP response object.
• query: contains the query if there is any.
• preview: either true or false in case the page is in preview mode.

• previewData: the data set by setPreviewData. If there is any than preview is true.
• resolvedUrl: removes any extra in the url set by Next.js.
• locale and locales and defaultLocale: are for locales to set if you've enabled Internationalized Routing.

getServerSideProps return value

The function should return a data object; otherwise it will throw an Error with: Your getServerSideProps function did not return an object. Did you forget to add a return.

Also the returned data object need to have specific keys, and they are summarized in the code comments below:

export async function getServerSideProps() {
 //if the return statement is not provided; it will throw an error as above
  return {
    //our data object inside the return statement
    //props:data key that can be accepted, contains data that the page will be receiving
    //Json.stringify should work on it
   props: {},


   //redirect or unstable_redirect but use redirect
   // redirect object keys are:
   //destination: where to redirect
   //permanent: true or false, in the http response header
   //statusCode: older http servers which they do not understand permanent, use either
   //permanent or statusCode but do not use both keys together
   //basePath: works only if the basePath has been set in the next.js conf file and
   //destination starts with "/" and redirect.basePath===true

   redirect: { destination:string,
    permanent:boolean,
     statusCode:[301, 302, 303, 307, 308],
      basePath: ['undefined', 'boolean'] },
   //notFound or unstable_notFound but use notFound
   //true or false, if true it will redirect to 404 page, return this key
   //when no ata found for example
   notFound:{}
 };

Let's take a close look to each of the keys of redirect object and why it is used.

props

Props is the object that will contain the results and then be received by the page component. It should be a valid JavaScript object that JSON.stringify can work on, check my article to learn more about JSON.stringify

### notFound

unstable_notFound is also possible but do not use it, it will throw an Error (unstable_notFound has been renamed to notFound, please update the field to continue), it is an optional Boolean value to redirect to the not found page.

redirect

You can also use unstable_redirect key but use redirect instead, it is an optional key to redirect to internal or external resources, this object accepts multiple keys, and the form is

const { destination:string,
permanent:boolean,
statusCode:[301, 302, 303, 307, 308],
basePath: ['undefined', 'boolean'] } = redirect

• destination: the destination to forward the client to and it is a string, for example if no data found redirect to /

• permanent: either true or false, to indicate that your resource has moved permanently or not and set up permanent value in the http response, you cannot provide permanent and statusCode at the same time, otherwise you will end up with an error like: permanent and statusCode can not both be provided.

• statusCode: for older http servers when permananent is not understood, instead you need to provide a statusCode from one of the following [301, 302, 303, 307, 308], if 308 is received, the response header will be set to Refresh:0;url=redirect.destination, if none of the statusCode from the list is received, you will get an error of: statusCode must undefined or one of [301, 302, 303, 307, 308]

• basePath: is an advanced option and lets you concatenate the redirect.destination with your basePath which is set in the Next.js conf file next.config.js, so if you have set redirect.basePath to true and the redirect.destinations starts with "/" and basePath has been set in next.config.js, the redirect will be basePath/redirect.destination.