Google News
logo
Next.js - Interview Questions
What is Server-Side Rendering in Next.js?
If you export a function called getServerSideProps (Server-Side Rendering) from a page, Next.js will pre-render this page on each request using the data returned by getServerSideProps.
export async function getServerSideProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

When does getServerSideProps run : getServerSideProps only runs on server-side and never runs on the browser. If a page uses getServerSideProps, then:

When you request this page directly, getServerSideProps runs at request time, and this page will be pre-rendered with the returned props

When you request this page on client-side page transitions through next/link or next/router, Next.js sends an API request to the server, which runs getServerSideProps

getServerSideProps returns JSON which will be used to render the page. All this work will be handled automatically by Next.js, so you don’t need to do anything extra as long as you have getServerSideProps defined.

You can use the next-code-elimination tool to verify what Next.js eliminates from the client-side bundle.

getServerSideProps can only be exported from a page. You can’t export it from non-page files.

Note that you must export getServerSideProps as a standalone function — it will not work if you add getServerSideProps as a property of the page component.

Advertisement