Mastering Next.js Rendering: SSR, SSG, ISR and Hybrid Strategies

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.

Three Pre‑rendering Modes

Traditional single‑page applications (SPA) rely on client‑side rendering (CSR), which can cause long white‑screen times and poor SEO because the initial HTML is empty. Next.js solves these problems 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 fully populated HTML to improve first‑paint speed and SEO. In React you can call

renderToString(Component)

. Next.js provides the asynchronous

getServerSideProps

function to fetch data for SSR:

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

While SSR eliminates white‑screen and SEO issues, it requires a server for every request, increasing operational cost.

SSG (Static Site Generation)

SSG pre‑renders pages at build time, producing static HTML files that can be served without a server, greatly reducing cost. Pages that depend on static data can export

getStaticProps

to fetch data during the build:

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

export async function getStaticProps() {
  const title = await getTitle();
  return { props: { title } };
}</code>

For dynamic routes, Next.js uses

getStaticPaths

to specify which pages to generate:

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

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

ISR (Incremental Static Regeneration)

ISR combines the benefits of SSG with on‑demand regeneration. By adding a

revalidate

field to

getStaticProps

, Next.js will rebuild the page in the background at most every specified number of seconds:

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

ISR also supports

fallback: 'blocking'

so that a request for a path not generated at build time will wait for the page to be generated, then cache it for subsequent requests.

Hybrid Rendering Modes

SSR + CSR

First load uses SSR for fast, SEO‑friendly rendering; subsequent navigation uses CSR with

getServerSideProps

to fetch data without a full page reload.

SSG + CSR

Static parts (e.g., navigation) are rendered at build time via SSG, while dynamic content is fetched client‑side using hooks like

useEffect

.

SSG + SSR (Underlying ISR)

Static content is served from SSG, while pages not pre‑generated are rendered on demand with SSR and then cached, effectively the same mechanism as ISR.

Conclusion

The article introduced Next.js’s three pre‑rendering modes—SSR, SSG, ISR—explaining their pros, cons, and suitable scenarios, and then described three hybrid rendering strategies that combine these modes to balance performance, SEO, and server cost. Choosing the right approach requires careful evaluation of the specific project requirements.