Server-side Rendering (SSR)

Also referred to as "SSR" or "Dynamic Rendering".

If a page usesServer-side Rendering, the page HTML is generated oneach request.

To use Server-side Rendering for a page, you need toexport anasync function calledgetServerSideProps. This function will be called by the server on every request.

For example, suppose that your page needs to pre-render frequently updated data (fetched from an external API). You can writegetServerSideProps which fetches this data and passes it toPage like below:

exportdefaultfunctionPage({ data }) {// Render data...}// This gets called on every requestexportasyncfunctiongetServerSideProps() {// Fetch data from external APIconstres=awaitfetch(`https://.../data`)constdata=awaitres.json()// Pass data to the page via propsreturn { props: { data } }}

As you can see,getServerSideProps is similar togetStaticProps, but the difference is thatgetServerSideProps is run on every request instead of on build time.

To learn more about howgetServerSideProps works, check out ourData Fetching documentation.