NextJs Codebase Analysis (1) - render callstacks

Terminology App Router → New routing system using /app (Next.js 13+) Pages Router → Legacy routing using /pages SSR → Server-Side Rendering SSG → Static Site Generation ISR → Incremental Static Regeneration CSR → Client-Side Rendering RSC → React Server Components SPA → Single Page Application Beginning of everything: renderImpl Source code path: packages/next/src/server/render.tsx https://github.com/vercel/next.js handleRequest ↓ handleRequestImpl ↓ handleCatchallRenderRequest ↓ render ↓ // response html according to client end's request. async renderImpl ( req , res , pathname , query = {}, parsedUrl , internalRender = false ) { return this . pipe (( ctx ) => this . renderToResponse ( ctx ), { req , // request instance res , // response instance pathname , // request page path from client end, '/page/a', '/page/c', etc query // params in request url, '?start=2&side=10'. }); } ↓ renderToResponse ↓ renderToResponseImpl ↓ renderToResponseImpl ↓ const result = await this . renderPageComp