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)
Best use case
nextjs-rendering is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
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)
Teams using nextjs-rendering should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/nextjs-rendering/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How nextjs-rendering Compares
| Feature / Agent | nextjs-rendering | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
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)
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Rendering Strategies (App Router) ## **Priority: P0 (CRITICAL)** Choose rendering strategy based on data freshness and scaling needs. See [Strategy Matrix](references/strategy-matrix.md). ## Implementation Guidelines - **SSG (Static Site Generation)**: Default for App Router. Use **`generateStaticParams`** to pre-render routes at build time. Triggered by **`fetch`** with **`cache: 'force-cache'`**. - **SSR (Server-Side Rendering)**: Triggered by **`cookies()`**, **`headers()`**, or **`fetch`** with **`cache: 'no-store'`**. Use for personalized or high-freshness data. - **ISR (Incremental Static Regeneration)**: Update static content after build. Use **`revalidate`** (time-based) or **`revalidatePath`** / **`revalidateTag`** (on-demand). - **Streaming**: Use **`Suspense`** to wrap slow async components and prevent them from blocking the initial page load. Use **`loading.tsx`** for route-level skeletons. - **PPR (Partial Prerendering)**: Combine static shell with dynamic regions in a single HTTP request. Enable **`ppr: true`** in `next.config.js`. - **Strategies**: Choose rendering based on **SEO** (SSG/ISR) vs **Interactivity** (Client) vs **Personalization** (SSR). Utilize **`dynamicParams`** to control fallback behavior for uncached routes. - **Hydration**: Avoid **Hydration Errors** by not using browser-only values (`window.innerWidth`, `Date.now()`) in the initial render. Use the **`mounted` useEffect pattern**. - **Edge Runtime**: Use **`runtime: 'edge'`** for low-latency globally distributed execution where full Node.js APIs are not required. ## Anti-Patterns - **No root awaits in `page.tsx`**: Wrap slow components in `<Suspense>` to stream. - **No SSR for static content**: Use SSG or ISR; reserve SSR for truly dynamic data. - **No `typeof window` in initial render**: Use `useEffect` to avoid hydration errors. ## References - [Strategy Selection Matrix](references/strategy-matrix.md) - [Implementation Details](references/implementation-details.md) - [Scaling Patterns](references/scaling-patterns.md)
Related Skills
react-nextjs-development
React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.
nextjs-supabase-auth
Expert integration of Supabase Auth with Next.js App Router Use when: supabase auth next, authentication next.js, login supabase, auth middleware, protected route.
nextjs-best-practices
Next.js App Router principles. Server Components, data fetching, routing patterns.
nextjs-app-router-patterns
Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.
mathjax-rendering
Render mathematical formulas in Obsidian using LaTeX/MathJax syntax. Use when writing equations, matrices, integrals, summations, or any mathematical notation in Obsidian notes.
nextjs-15-specialist
Use when working with Next.js 15 features, App Router, Server Components, Server Actions, or data fetching patterns. Ensures correct usage of Server vs Client Components and modern Next.js patterns.
nextjs-15-patterns
Next.js 15 App Router patterns and best practices.
frontend-nextjs-app-router
Use when working with Next.js App Router tasks - creating pages in /app/, setting up dynamic routes ([id]/page.tsx), implementing nested layouts/templates (layout.tsx), optimizing Server/Client components, or building ERP role-based pages (admin/teacher/student dashboards). Auto-use for all /app/ directory operations, dynamic routing, and App Router-specific features.
building-nextjs-apps
Build Next.js 16 applications with correct patterns and distinctive design. Use when creating pages, layouts, dynamic routes, upgrading from Next.js 15, or implementing proxy.ts. Covers breaking changes (async params/searchParams, Turbopack, cacheComponents) and frontend aesthetics. NOT when building non-React or backend-only applications.
nextjs-devtools
Next.js development tooling via MCP. Inspect routes, components, build info, and debug Next.js apps. Use when working on Next.js applications, debugging routing, or inspecting app structure. NOT for general React or non-Next.js projects.
nextjs-turbopack
Next.js 16+ 和 Turbopack — 增量打包、文件系统缓存、开发速度，以及何时使用 Turbopack 与 webpack。
3ds Max Rendering
Configure production renders with V-Ray and Corona. Optimize quality vs. render time for architectural visualization, product shots, and animation.