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.