菜单
Provides expert guidance on Next.js rendering behavior, including static vs dynamic rendering, streaming, Suspense boundaries, cache components, and the prospective render system. Use when working with Next.js SSG, ISR, streaming, server components, or debugging rendering modes.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
Provides expert guidance on the Kick streaming platform public API, including OAuth 2.1 with PKCE authentication, REST endpoints for channels, users, chat, moderation, livestreams, and kicks, webhook event subscriptions with Ed25519 signature verification, and real-time chat via WebSocket. Use when building Kick integrations, bots, stream tools, or any application that needs to interact with Kick channels, chat, events, or user data.
Provides expert guidance on Next.js caching behavior, including use cache directive, revalidation strategies, ISR patterns, and common pitfalls. Use when working with Next.js caching, revalidatePath, revalidateTag, use cache, connection(), unstable_cache, or debugging cache behavior in Next.js applications.
Provides expert guidance on Next.js App Router navigation, prefetching behavior, Link component configuration, and client-side state preservation. Use when working with Next.js navigation, Link prefetching, Suspense boundaries during navigation, App Router routing, or PageProps typing.
Expert guidance for whatsapp-web.js, a Puppeteer-based library providing high-level API to interact with WhatsApp Web. Use when building WhatsApp bots, automating WhatsApp messaging, integrating WhatsApp into applications, or working with WhatsApp Web automation, message handling, media sending, group management, or channel operations.
| name | nextjs-rendering |
| description | Provides expert guidance on Next.js rendering behavior, including static vs dynamic rendering, streaming, Suspense boundaries, cache components, and the prospective render system. Use when working with Next.js SSG, ISR, streaming, server components, or debugging rendering modes. |
Expert guidance on Next.js rendering modes, streaming behavior, and static vs dynamic page generation.
Next.js has two fundamental rendering types: static and dynamic.
Static rendering:
Dynamic rendering:
SSG (Static Site Generation) and ISR (Incremental Static Regeneration) are the same underlying mechanism — the only difference is whether all paths are generated upfront or incrementally on-demand.
Next.js determines whether a page is static or dynamic using async dynamic APIs. The framework performs a prospective render to detect what resolves synchronously vs asynchronously.
The microtask test:
Special case for params:
Routes using params can be static because each route is called once per item in generateStaticParams. Since the params are known at build time, they resolve instantly.
// Static: params from generateStaticParams resolve instantly
export async function generateStaticParams() {
return [{ id: '1' }, { id: '2' }];
}
export default async function Page({ params }: { params: { id: string } }) {
// params.id is instant - this page can be static
}
Streaming is only enabled for dynamic rendering. Static content does not stream because no compute is involved — the complete HTML is served from the CDN.
Document-level Suspense requirement: To enable streaming with a loading skeleton, wrap the HTML document with an empty Suspense boundary. Without a document wrapper outside the boundary, there is nothing to stream — the framework needs the outer shell to send while inner content loads.
// Enable streaming with document shell
<Suspense fallback={null}>
<html>
<body>
<Suspense fallback={<Skeleton />}>
<SlowComponent />
</Suspense>
</body>
</html>
</Suspense>
ISR and Suspense fallbacks: Suspense boundary fallbacks do not display when generating ISR paths. Since ISR generation happens at build time or on first request (static generation), there is no streaming — the complete page is generated before being served.
use cache)Cache components can combine static and dynamic rendering within the same page, but the page itself still has a render mode.
Applying use cache to a page component:
When use cache is added to a page or the main component of a page, the page produces static output that:
Cache components with dynamic pages:
Even with use cache on individual components, the page overall is still either static or dynamic. Cache components allow granular control — static cached sections within dynamic pages, or dynamic sections within static pages.
// Page-level cache: produces static output
'use cache';
export default async function Page() {
// Entire page is static, no streaming
}
// Component-level cache: can mix static/dynamic
export default async function Page() {
return (
<>
<StaticCachedSection /> {/* has 'use cache' */}
<DynamicSection /> {/* no cache directive */}
</>
);
}
When working with Next.js rendering:
use cache granularly to cache expensive components within dynamic pages