Nextjs
主要功能
| 特性 | 描述 |
|---|---|
| Routing | 在服务端组件顶层拥有基于路由的文件系统， 支持布局，嵌套路由，加载态，错误捕获等 |
| Rendering | 分别对 CSR 和 SSR 组件进行 CSR 和 SSR 渲染。 对动态（流式）和静态渲染对优化 |
| Data Fetching | 简化服务端组件对数据获取，扩展 fetch 用于请求记忆化，数据缓存与更新 |
| Styling | 支持 css modules,tailwind, css-in-js |
| Optimizations | 图片字体和脚本优化提升体验 |
| Typescript | 支持 typescript，并且有更好的类型检测和高效编译，支持 ts 插件 |
服务端组件
App Router vs Page Router
App Router 支持 React 最新功能，如服务端组件和流
Page Router 是 Nextjs 原先的路由，支持构建 SSR 应用并支持旧 Nextjs app
项目结构
渲染
客户端组件
客户端组件允许您编写可在请求时在客户端上呈现的交互式 UI。
在 Next.js 中，客户端渲染是可选的，这意味着您必须明确决定 React 应在客户端上渲染哪些组件。
客户端渲染的好处
交 互性：客户端组件可以使用 state、effect 和事件侦听器，这意味着它们可以向用户提供即时反馈并更新 UI。 浏览器 API：客户端组件可以访问浏览器 API，例如地理位置或本地存储，允许您为特定用例构建 UI。
"use client"用于声明服务器和客户端组件模块之间的边界。
这意味着通过"use client"，导入到其中的所有其他模块（包括子组件）都被视为客户端捆绑包的一部分。
// 存疑：layout 层记录状态，必须要标注 use client layout 层以及 layout 引用的外层组件（服务端组件），不用标注 use client
服务端组件中再引用了使用 state/effect 等的客户端组件，则具体到该客户端组件， 才标注 use client
定义多个 use client 入口点：
您可以在 React 组件树中定义多个“使用客户端”入口点。这允许您将应用程序拆分为多个客户端包（或分支）。
但是，"use client"不需要在需要在客户端呈现的每个组件中进行定义。定义边界后，导入其中的所有子组件和模块都被视为客户端捆绑包的一部分。
客户端组件的渲染过程：
1.服务端返回初始 HTML 用于立即显示快速非交互式的路由 2.RSC 同时调和客户端和服务端组件树，并更新 DOM。 3.JavaScript 水合客户端组件并使其 UI 具有交互性。
客户端组件后续不需要服务器返回 html