How would you choose between SSR, CSR, and static rendering for a Next.js page?

SSR vs CSR vs static rendering in Next.js

Explains server rendering, client rendering, static rendering, freshness, SEO, personalization, and performance trade-offs.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

I would use static rendering for public pages that do not need per-request data and can be cached aggressively. I would use server rendering when the initial HTML depends on request-time data, auth, personalization, or freshness. I would use client-side rendering for parts of a page that are highly interactive, browser-only, or not needed for first meaningful paint. Many real pages mix these approaches.

Full answer below

Practice focus

Rendering modes, freshness, SEO, personalization, performance, caching, auth, and user experience trade-offs.

Answer first

Answer path

Core answer first, then checkpoints toward a stronger answer.

Start
Core answer
Start here. This is the direct spoken answer to practice first.
Why this question matters
Rendering mode choices affect performance, SEO, caching, infrastructure cost, and how fresh the user sees data. This is a core Next.js foundation question.
I would use static rendering for public pages that do not need per-request data and can be cached aggressively. I would use server rendering when the initial HTML depends on request-time data, auth, personalization, or freshness. I would use client-side rendering for parts of a page that are highly interactive, browser-only, or not needed for first meaningful paint. Many real pages mix these approaches.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
I would choose based on the user need, not framework fashion. A marketing page benefits from static speed and SEO. An account dashboard may need server-rendered authenticated data. A live search widget can render client-side after the initial page loads. Freshness matters: static pages need revalidation or rebuilds, server-rendered pages need cache rules, and client-rendered data needs loading and error states.

Review signals

Use these to catch weak phrasing, shallow reasoning, and risky claims.

Common mistakesCandidateCommon mistakesMistakes that weaken the answer or signal shallow understanding.Open details

Details

Using one rendering mode for every page.
Static-rendering user-specific data by accident.
Ignoring loading and error states for client-rendered sections.
Optimizing for SEO on pages that are never indexed.

How would you choose between SSR, CSR, and static rendering for a Next.js page?

Practice focus

Answer path

Why this question matters

Review signals

Follow-up prompts

Continue the section

Tech stacks

Skill areas

Suggest an improvement