How does getServerSideProps work internally? What is its execution context?

Question

Accepted Answer

Internally, getServerSideProps is a Next.js function designed for Server-Side Rendering (SSR) that runs exclusively on the server at request time. When a request hits a page with getServerSideProps, Next.js executes this function first, providing it with rich context about the request. The function can perform any server-side operations—database queries, API calls, authentication checks—and must return a serializable object. Next.js then uses the returned props to render the React component to HTML on the server, sending the fully-formed page to the client. This entire process happens synchronously per request, ensuring the page always reflects the latest data. // pages/products/[id].js import type { GetServerSideProps, InferGetServerSidePropsType } from 'next'; // This runs on the server for every request export const getServerSideProps: GetServerSideProps = async (context) => { // context provides request details const { params, req, query } = context; // Direct database access - safe because this is server-only const product = await db.product.findUnique({ where: { id: params?.id } }); if (!product) { return { notFound: true }; // Shows 404 page } // Must return serializable props return { props: { product: JSON.parse(JSON.stringify(product)), // Ensure serializable timestamp: Date.now() } }; }; export default function ProductPage({ product, timestamp }: InferGetServerSidePropsType) { return (

{product.name}

Last rendered: {new Date(timestamp).toLocaleString()}

); } **params:** Contains dynamic route parameters. For a page named [id].js, params will be { id: 'value' }. **req:** The HTTP IncomingMessage object with an additional cookies property for accessing cookies as key-value pairs. **res:** The HTTP response object, allowing you to set headers, cookies, or status codes directly. **query:** An object containing the query string parameters plus any dynamic route parameters. **draftMode:** Boolean indicating if draft mode is enabled (replaces deprecated preview/previewData). **resolvedUrl:** Normalized URL string without the _next/data prefix. **locale/locales/defaultLocale:** Available when i18n is configured. When a request arrives, Next.js checks if the page exports getServerSideProps. If yes, it enters SSR mode: First, it calls getServerSideProps with the context object populated from the request. The function executes in a Node.js environment with full server capabilities—direct database access, file system operations, or internal API calls are all safe here because this code never reaches the client. Next.js then awaits the returned promise, expecting an object with props, notFound, or redirect. If props are returned, Next.js serializes them with JSON.stringify and passes them to the page component for rendering on the server. The complete HTML is generated and sent to the client, with the props also embedded in a script tag for hydration. // Simplified internal flow (conceptual) // This is what Next.js does under the hood async function handleRequest(req, res, pageModule) { // 1. Check if page has getServerSideProps if (pageModule.getServerSideProps) { try { // 2. Build context object from request const context = { params: extractParams(req.url), req, res, query: parseQueryString(req.url), draftMode: checkDraftMode(req.cookies), resolvedUrl: normalizeUrl(req.url) }; // 3. Execute getServerSideProps const result = await pageModule.getServerSideProps(context); // 4. Handle special return types if (result.notFound) { return render404Page(res); } if (result.redirect) { return redirect(res, result.redirect.destination, result.redirect.permanent); } // 5. Serialize props and render page const serializedProps = JSON.stringify(result.props); const html = renderPageComponent(pageModule.default, result.props); // 6. Send response res.setHeader('Content-Type', 'text/html'); res.end(html); } catch (error) { // 7. Handle errors (show 500 page in production) render500Page(res, error); } } } **Server-only execution:** Code inside getServerSideProps never reaches the client bundle. You can safely use environment variables, database connections, and file system APIs. **Request-scoped:** Runs on every request, not cached. Each user gets fresh data tailored to their specific request context. **Node.js runtime:** Full Node.js API access (in default setup). This means you can use fs, read from disk, or connect to databases directly. **Not bundled for client:** All imports used only in getServerSideProps are automatically tree-shaken from client bundles. **Serializable requirement:** Props must be JSON-serializable because they're embedded in the HTML for clie

How does getServerSideProps work internally? What is its execution context?

getServerSideProps executes on the server for every request, with full access to the request/response objects and Node.js runtime, returning serializable props that are used to pre-render the page HTML before sending to the client

How does getServerSideProps work internally? What is its execution context?

getServerSideProps executes on the server for every request, with full access to the request/response objects and Node.js runtime, returning serializable props that are used to pre-render the page HTML before sending to the client

Scenario Questions

Follow-up Questions