getServerSideProps

When exporting a function calledgetServerSideProps (Server-Side Rendering) from a page, Next.js will pre-render this page on each request using the data returned bygetServerSideProps. This is useful if you want to fetch data that changes often, and have the page update to show the most current data.

importtype { InferGetServerSidePropsType, GetServerSideProps }from'next'typeRepo= {  name:string  stargazers_count:number}exportconstgetServerSideProps= (async ()=> {// Fetch data from external APIconstres=awaitfetch('https://api.github.com/repos/vercel/next.js')constrepo:Repo=awaitres.json()// Pass data to the page via propsreturn { props: { repo } }})satisfiesGetServerSideProps<{ repo:Repo }>exportdefaultfunctionPage({  repo,}:InferGetServerSidePropsType<typeof getServerSideProps>) {return (    <main>      <p>{repo.stargazers_count}</p>    </main>  )}

You can import modules in top-level scope for use ingetServerSideProps. Imports used willnot be bundled for the client-side. This means you can writeserver-side code directly ingetServerSideProps, including fetching data from your database.

Context parameter

Thecontext parameter is an object containing the following keys:

getServerSideProps return values

ThegetServerSideProps function should return an object withany one of the following properties:

props

Theprops object is a key-value pair, where each value is received by the page component. It should be aserializable object so that any props passed, could be serialized withJSON.stringify.

exportasyncfunctiongetServerSideProps(context) {return {    props: { message:`Next.js is awesome` },// will be passed to the page component as props  }}

notFound

ThenotFound boolean allows the page to return a404 status and404 Page. WithnotFound: true, the page will return a404 even if there was a successfully generated page before. This is meant to support use cases like user-generated content getting removed by its author.

exportasyncfunctiongetServerSideProps(context) {constres=awaitfetch(`https://.../data`)constdata=awaitres.json()if (!data) {return {      notFound:true,    }  }return {    props: { data },// will be passed to the page component as props  }}

redirect

Theredirect object allows redirecting to internal and external resources. It should match the shape of{ destination: string, permanent: boolean }. In some rare cases, you might need to assign a custom status code for olderHTTP clients to properly redirect. In these cases, you can use thestatusCode property instead of thepermanent property, but not both.

exportasyncfunctiongetServerSideProps(context) {constres=awaitfetch(`https://.../data`)constdata=awaitres.json()if (!data) {return {      redirect: {        destination:'/',        permanent:false,      },    }  }return {    props: {},// will be passed to the page component as props  }}

Version History