Next.js中的 Server Components

前言

先看看什么是 RSC

这是 React 官方的一个实验性的特性， 用来在服务端渲染组件， 从而提升性能。

RSC 和 SSR 模式的区别

Server Components let you run some of your components purely on the server. SSR, on the other hand, lets you generate HTML before any JavaScript loads.

虽然两者都是在服务端做渲染， 然后到客户端 hybird 模式， 但是 react server compoent 和 ssr 的最大区别就是粒度， 组件级别和页面级别。

RSC 返回的是特定的数据， 由 React 解析并插入到指定的 DOM.

SSR 是模拟浏览器渲染了一次页面， 返回的是 HTML, 所以是用来做首次加载的优化。

什么时候选择 RSC

让组件的渲染在服务端执行， 好处还是特别多的：

  • 组件一般可以是 async function 定义，只运行在服务端
  • 无须构建分割代码， 客户端加载的性能得到提升
  • 可以直接调用服务端相关的 API， 方便请求数据，可直接访问服务端的 db， 无须通过 api
  • 有效的保护了数据的安全性， token 等敏感信息不会暴露在客户端

如何使用 RSC

实现原理是什么

官方的使用示例： reactjs/server-components-demo: Demo app of React Server Components.

React Server Component 的工作原理 - 掘金

如何确保组件运行在 server

npm install server-only.

give other developers a build-time error if they ever accidentally import one of these modules into a Client Component.

如何避免缓存

dynamic = "force-dynamic" or revalidate = 0

不走 static rendered, 不生成 HTML

技术总结

  • RSC 是 React 的 Vision, 所以未来已来，从 next.js app route 中开始使用吧。
  • 普通组件， 如果只是做静态渲染的，不需要指定 use server 或 use client, 它可以在服务端或者客户端执行。
  • 如果指定 use server, 表示组件只能在服务端运行。 use client 的组件， 是可以在服务端，客户端都运行一遍的。
  • use server 主要是申明 server action