Next.js中的 Client Components

前言

什么时候用 Client Components

这种组件， 既可以在服务端做一次预渲染， 又可以在客户端运行。

  • 需要处理 event listener
  • 需要调用 useState, useReducer, useEffect
  • 调用客户端 API, 比如 window
  • 使用 React Class Component 的时候

如何区分

  • 如果该组件是在带有 ‘use client’ 指令的模块中定义的，或者该组件是在 ClientComponent 中导入和调用的，则该组件使用是一个 ClientComponent。

use client 不代表只在客户端运行

the “use client” only means that it also runs on the client. You can use useEffect to access the window object without any errors.

组件还是会被 static rendered, 那么就会走服务端做一次预渲染，走服务端渲染的时候，就无法确保获取 window 对象了。这也就是为什么很多组件， 需要适配支持 app route 模式了。

不支持 Client Components 中导入 Server Components

相反，每个 page 默认是 RSC 的，它是可以加载 Client Components 的。

什么时候渲染

一定会被做一次预渲染。

常见问题

Text content does not match server-rendered HTML

通过动态加载，避免组件 SSG, 对 client 组件， 可以强制 Optimizing: Lazy Loading | Next.js

  • suppressHydrationWarning 可以避免时间戳导致的报错