Next.js 服务端组件

Next.js ↗ is a framework for building web applications.

你可以使用React组件构建用户界面，Next.js提供了额外的结构、特性、优化。

### 客户端组件和服务端组件的区别

客户端组件就是我们日常开发中使用的React组件(类组件和函数式组件)，它是由客户端(浏览器)渲染的

服务端组件是一种新型组件，在React18之后新加入的，这种类型的组件会在服务端完成渲染再发送到客户端。

在React中，传统的服务端渲染仅生成页面的初始HTML快照，仍然需要下载所有的JS代码，才能使网页具有交互性。

而服务端组件是在服务端渲染完通过流的方式以某种协议传输给客户端，客户端无需重新渲染整个页面，只会渲染树中组件所在的节点。

### 服务端组件能否替代服务端渲染、GraphQL

实际上服务端组件和服务端渲染是互补的，服务端渲染解决的首屏加载的问题，而服务端组件解决的是服务端渲染不能很好支持的状态丢失，共享数据等问题。而服务端组件也可以很好的和GraphQL结合，在获取数据时使用GraphQL获取数据也是没有问题的。

服务端组件不能有任何交互行为（例如：不能使用 useState()，useEffect()）。但是你可以通过在服务端组件内部引入客户端组件（客户端组件是允许存在交互行为的）的方式来解决这个问题.

在客户端组件中，不支持将服务端组件直接导入到客户端组件，但是可以通过客户端组件的children属性来传递服务端组件。

服务端组件嵌套客户端组件时，属性只能传递可被JSON序列化的值，函数，日期都是不能直接传递给客户端组件的。

服务端组件中使用的一些环境变量，在客户端组件中是访问不到的。

server-only 这个包可以检测仅服务端使用的代码导入到客户端组件时会在构建时候报错，相应的还有个**client-only**

客户端组件中可以使用上下文(next的根组件一般为服务端组件，需要使用客户端组件包装一层来提供类似全局上下文的效果)

服务端组件渲染使用上下文的客户端组件(一些第三方库可能并没有加**'use client’** ，需要我们手动包一层)

在服务器组件之间共享数据(例如共享数据库连接)

在服务器组件之间共享获取请求(fetch经过优化，有缓存机制)

当你混合使用客户端和服务器组件时，应当将 UI 视为组件树。从根布局开始（它是一个服务器组件），你可以通过添加 "use client" 指令在客户端渲染某些子树。

虽然在这些客户端子树中仍然可以嵌套服务器组件或调用服务器操作，但仍有一些事情需要注意：

如果需要在客户端访问服务器上的数据或资源，客户端需要向服务器发出新的请求。
当向服务器发出新请求时，首先渲染所有服务器组件，在客户端上，React 会使用 RSC Payload 将服务器组件和客户端组件调和成一棵树。
由于客户端组件是在服务器组件之后呈现的，因此不能将服务器组件导入到客户端组件中。正确的方式应该是：将服务器组件作为属性传递给客户端组件（如：children），这种方式允许你在客户端组件中使用来自服务器组件的数据或内容，而不必再次请求服务器。