Next.js in depth: CSR, SSR, and static generation

Three strategies, different costs

CSR obtains data in the browser. SSR generates HTML per request. SSG generates HTML during the build. One application can combine them.

• CSR: private dashboards and highly dynamic state.
• SSR: public data that changes per request.
• SSG: documentation, portfolios, and articles known at build time.

The Pages Router

Each file under pages defines a route. _app wraps pages and keeps shared UI. _document customizes the server HTML document and does not handle interaction. Dynamic routes use brackets.

// pages/blog/[slug].tsx
export const getStaticPaths = async () => ({
  paths: posts.map(({ slug }) => ({ params: { slug } })),
  fallback: false,
});

export const getStaticProps = async ({ params }) => ({
  props: { post: findPost(params.slug) },
});

Choose with evidence

If content exists at build time, SSG delivers fast, cacheable HTML. If it depends on a session, solve it in the client or server according to sensitivity. Do not use SSR by reflex.