Personalized server-rendered pages
A dashboard must show data personalized to the signed-in user on every request.
Next.js 16+ · Type Alias
GetServerSideProps
Deprecated Pages Router function for fetching data and rendering a page on every request. In the App Router, use server-side data fetching with fetch and async React Server Components instead.
How it works
This Pages Router function runs on the server for every request, fetches request-time data, and returns serializable props used to render the page. In the App Router, its role is replaced by server-side data fetching with fetch and async React Server Components.
Syntax
export async function getServerSideProps(context: GetServerSidePropsContext): Promise<GetServerSidePropsResult<Props>>Parameters
| Name | Type | Description |
|---|---|---|
context | GetServerSidePropsContext | Request context containing the documented request, response, route, query, locale, and preview-related values. |
Returns
An object with a documented return property such as props; props must be a serializable key-value object whose values are passed to the page component. The function may also return notFound or redirect.
Key points
- Its result is transferred as JSON to support rendering and client transitions.
- The returned data contributes to the server-rendered initial response.
- Server-only imports can remain out of browser bundles.
- The function receives a context object containing request-related values.
Common mistakes
- Export it only from a Pages Router page; it cannot be placed in a non-page module.
- Values returned through props must be serializable because Next.js sends them as JSON.
- Do not expect this function to execute in the browser.
Example: Request-time page data
export default function Page({ data }: { data: string }) {
return <p>{data}</p>
}
export async function getServerSideProps() {
const res = await fetch("https://example.com/data")
const data = await res.text()
return { props: { data } }
}A Pages Router page exports the function and receives its returned serializable props.
When to use it
Request-dependent rendering
A page needs authorization headers or geolocation that exist only in the current request.
Fresh request-time data
Frequently changing data should be rendered on the server rather than generated at build time.
Interview questions
QWhat does getServerSideProps do?
It is a Pages Router function that runs on the server at request time. Its returned props are used to render the page's initial HTML.
Follow-up: How does client navigation work? Next.js sends an API request to the server, which runs the function and returns its JSON result.
QWhen should you use it?
Use it when the page depends on personalized data or information available only for the current request, such as authorization headers or geolocation.
Follow-up: When would it be a poor choice? For data that can be generated at build time, request-time rendering adds unnecessary server work and latency.
QWhat are its runtime and security characteristics?
The function can use server-only modules, including database access, because top-level imports used by it are not bundled for the client. It must return serializable props or another documented return shape.
Follow-up: What replaces it in the App Router? Use the App Router's server-side data-fetching APIs with fetch and async React Server Components.
Related
getStaticPropsgetStaticPathsfetchServer ComponentsApp RouterPages Router