## 核心概念 ### 静态渲染与动态渲染了解 Next.js 恰好有两种渲染模式：**静态**和**动态**。 SSG 和 ISR 都是静态渲染，唯一的区别是所有路径是在构建时 (SSG) 生成还是增量按需生成 (ISR)。基本机制是相同的。静态页面在请求时不涉及计算。它们构建一次，上传到 CDN，并复制到全球边缘站点。动态页面根据请求在配置的区域中执行。这种区别解释了三种关键行为： * 静态内容速度更快，因为它不需要计算并且缓存在用户附近 * 如果某个区域出现故障，静态内容仍然可用；动态内容不 * 静态内容的流式传输被禁用，因为没有实时渲染进程可以进行流式传输 ### 预期渲染系统缓存组件（“使用缓存”）触发两阶段渲染过程： 1. **预热渲染（预期渲染）**：Next.js 搜索缓存实例并填充这些缓存 2. **即时检查渲染**：第二个渲染运行一个周期，然后中止第二个渲染是 Next.js 如何确定某些内容是否异步的。该微任务中解决的所有问题都被认为是“即时”的，因此是静态的。任何需要更长时间的事情都是动态的。 ### Next.js 如何检测动态渲染异步动态 API（例如 `cookies()`、`headers()`、`searchParams`）是 Next.js 确定路由是否动态的方式。如果任何异步操作无法在单个滴答内解决，则路由将变为动态。 `params` API 是一种特殊情况：当与 `generateStaticParams` 一起使用时，每个返回的项目都会调用一次路由。每个调用都会立即解析，尽管是异步的，但仍使路由静态。 // 静态：参数立即解析每个生成的路径导出异步函数generateStaticParams() { 返回 [{ slug: 'a' }, { slug: 'b' }] } 导出默认异步函数 Page({ params }: { params: { slug: string } }) { const { slug } = wait params // 即时解析返回

{slug}

} ## 模式与策略 ### 启用完全流媒体控制使用空的 Suspense 边界包裹 HTML 文档，以阻止服务器渲染没有框架的页面。如果没有 Suspense 边界之外的文档，则没有任何内容可以流式传输 - 在整个页面解析之前，客户端不会收到任何内容。 // 布局.tsx 从 'react' 导入 { Suspense } 导出默认函数 RootLayout({ Children }) { 返回（ <正文> <悬念回退={null}> {孩子} ） } 此模式确保 shell（html、body）立即流式传输，同时页面内容可以显示后备。 ### 正确使用缓存组件将“使用缓存”添加到页面或其主要组件会产生静态输出。此缓存输出： * 不会串流 * 不会有“漏洞”（悬念后备槽） * 即使包含异步操作，其行为也像静态页面 “使用缓存” 导出默认异步函数 Page() { const data = wait fetchData() // 缓存，无流式传输返回

{数据}

} 缓存组件可以在单个页面中结合静态和动态呈现，但缓存部分本身始终是静态工件。 ## 常见陷阱 ### 期待 ISR 生成期间出现悬念回落生成 ISR 路径时，不会显示暂挂边界回退。由于 ISR 生成静态内容，并且静态内容在请求时不涉及计算，因此在生成期间不会启用流式传输。页面等待所有内容解析后再保存静态输出。不要依赖 Suspense 回退来提高 ISR 路径的第一个访问者的感知性能 - 在生成完整页面之前他们将看不到任何内容。 ### 将 SSG 和 ISR 混淆为不同的渲染模式将SSG和ISR视为具有不同生成时序的相同渲染模式。两者都会产生具有相同运行时特征的静态工件。唯一的问题是路径是在构建时 (SSG) 还是在第一次请求时 (ISR) 生成。不要期望它们之间有不同的缓存、流或性能行为。 ### 对缓存组件流的误解不要期望“使用缓存”页面来传输内容或显示 Suspense 回退。即使内部有异步操作，整个缓存的输出也是一个静态工件。要启用流式传输，请保持页面本身不被缓存，并使用缓存组件来获取特定的数据获取子树。

Nextjs 渲染

包含技能