Understanding Next.js Pre‑Rendering: SSR, SSG, ISR & Hybrid Modes

The React Framework for Production

Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre‑fetching, and more. No config needed.

Next.js offers all the features required for production, including build‑time pre‑rendering, server‑side rendering, route pre‑fetching, smart bundling, and zero‑configuration, making it one of the most popular React frameworks.

Three Pre‑Rendering Modes

Traditional single‑page applications (CSR) load a blank HTML page and render everything on the client, causing long white‑screen times and poor SEO.

Long white‑screen time before the JavaScript bundle loads.

SEO unfriendly because crawlers see no content.

Next.js solves these issues with three pre‑rendering modes that generate HTML on the server before CSR starts.

SSR (Server‑Side Rendering)

SSR renders the page on the server for each request, returning HTML with content to improve initial load time and SEO. Use renderToString(Component) in React and Next.js provides getServerSideProps to fetch data per request.

export default function FirstPost(props) {
  const { title } = props;
  return (
    <Layout>
      <h1>{title}</h1>
    </Layout>
  );
}

export async function getServerSideProps(context) {
  console.log('context', context.req);
  const title = await getTitle(context.req);
  return { props: { title } };
}

While SSR eliminates white‑screen and SEO problems, it requires a server for every request, increasing development and operational costs, and can be wasteful for static pages.

SSG (Static Site Generation)

SSG pre‑renders pages at build time, producing static HTML files that can be served without a server, reducing cost and resources. Use export const getStaticProps = async () => { … } to fetch data at build time.

// pages/posts/first-post.js
function Post({ postData }) {
  return <div>{postData.title}</div>;
}

export async function getStaticProps() {
  const postData = await getPostData();
  return { props: { postData } };
}

For dynamic routes, implement getStaticPaths to specify which pages to generate:

// pages/posts/[id].js
export async function getStaticPaths() {
  const paths = [
    { params: { id: 'ssg-ssr' } },
    { params: { id: 'pre-rendering' } }
  ];
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const postData = await getPostData(params.id);
  return { props: { postData } };
}

SSG works well for mostly static content such as blogs or documentation, but struggles with frequently changing data or a massive number of pages.

ISR (Incremental Static Regeneration)

ISR combines SSG and SSR by allowing pages to be regenerated in the background after the initial build. Add a revalidate field to getStaticProps to specify the regeneration interval.

export async function getStaticProps({ params }) {
  const postData = await getPostData(params.id);
  return {
    props: { postData },
    revalidate: 10 // regenerate at most every 10 seconds
  };
}

ISR also supports fallback options: fallback: 'blocking' – the request waits for the page to be generated, then caches it (behaves like SSR). fallback: true – returns a fallback UI while the page is generated, then swaps in the full page.

Hybrid Rendering Modes

SSR + CSR

Initial load uses SSR for fast first paint and SEO; subsequent navigation uses CSR with getServerSideProps to fetch data without full page reloads.

SSG + CSR

Static parts (e.g., layout, navigation) are rendered at build time via SSG, while dynamic content is fetched client‑side using useEffect and rendered with CSR.

SSG + SSR (Underlying ISR)

Static content is served from pre‑generated HTML, while pages not generated at build time fall back to SSR, then get cached for future requests.

Overall, no single rendering strategy fits all scenarios; developers must weigh trade‑offs such as performance, SEO, server cost, and data freshness to choose the appropriate mode or combination.