> nextjs-rendering
SSG, SSR, ISR, Streaming, and Partial Prerendering (PPR). Use when choosing a rendering strategy (SSG, SSR, ISR, PPR, or Streaming) in Next.js. (triggers: **/page.tsx, **/layout.tsx, generateStaticParams, dynamic, dynamicParams, PPR, streaming)
curl "https://skillshub.wtf/HoangNguyen0403/agent-skills-standard/nextjs-rendering?format=md"Rendering Strategies (App Router)
Priority: P0 (CRITICAL)
Choose rendering strategy based on data freshness and scaling needs. See Strategy Matrix.
Guidelines
- SSG (Default): Build-time render. Use
generateStaticParams. - SSR: Per-request render. Triggered by
cookies(),headers(), orcache: 'no-store'. - Streaming: Wrap slow components in
<Suspense>to avoid blocking. - ISR: Post-build updates. Use
revalidate(time) orrevalidatePath(on-demand). - PPR: Static shell + dynamic holes. Experimental
pprconfig. - Runtime: Node.js (Full) or Edge (Lighter/Faster).
Scaling & Hydration
- Static Shell: Render layout as static, personalize via Suspense.
- Error Boundaries: Use
error.tsxwithreset()to catch runtime errors. - Hydration Safety: Avoid
typeof windoworDate.now()in initial render. UseuseEffect.
Anti-Patterns
- No Root Awaits: Avoid waterfalls in
page.tsx. Use Streaming. - Bailouts: Understand Suspense Bailout Rules.
References
> related_skills --same-repo
> typescript-tooling
Development tools, linting, and build config for TypeScript. Use when configuring ESLint, Prettier, Jest, Vitest, tsconfig, or any TS build tooling. (triggers: tsconfig.json, .eslintrc.*, jest.config.*, package.json, eslint, prettier, jest, vitest, build, compile, lint)
> typescript-security
Secure coding practices for TypeScript. Use when validating input, handling auth tokens, sanitizing data, or managing secrets and sensitive configuration. (triggers: **/*.ts, **/*.tsx, validate, sanitize, xss, injection, auth, password, secret, token)
> typescript-language
Modern TypeScript standards for type safety and maintainability. Use when working with types, interfaces, generics, enums, unions, or tsconfig settings. (triggers: **/*.ts, **/*.tsx, tsconfig.json, type, interface, generic, enum, union, intersection, readonly, const, namespace)
> typescript-best-practices
Idiomatic TypeScript patterns for clean, maintainable code. Use when writing or refactoring TypeScript classes, functions, modules, or async logic. (triggers: **/*.ts, **/*.tsx, class, function, module, import, export, async, promise)