Server-Side Rendering (SSR)

With server-side rendering, HTML pages are generated per HTTP request. Server-side rendering is used when a page exports an async function called getServerSideProps.

import { Database } from "../../lib/database";
 
// Next.js will call this function for every request
export async function getServerSideProps() {
  const db = new Database();
  const data = await db.getData();
 
  // passed to the page component as props
  return {
    props: { data },
  };
}
 
export default function Page(props) {
  // Render...
}

Use getServerSideProps when:

• The page must be rendered server-side using data that must be fetched for each request

If the page does not need to be rendered server-side, consider fetching data on the client side (opens in a new tab).

Errors during SSR rendering return HTTP 500 errors. See Customizing the 500 Page (opens in a new tab).

SSR pages can also be cached, but only if cache-control headers (opens in a new tab) are explicitly configured (opens in a new tab).