服务端组件和客户端组件详解

服务端组件和客户端组件

服务端组件

服务端组件就是在服务端渲染的组件，在next.js v13中，只要是在app目录内的页面，全部默认为服务端组件

服务端组件的优势

● 数据获取：服务端组件具备完整的服务端能力，可以直接与数据库或者其它数据源进行交互，消除了需要从客户端到服务器的额外请求，从而加速了数据获取
● 安全性：因为渲染是在服务器上进行了，所以可以在服务器上使用敏感的API密钥或者令牌，并且不需要担心被暴露给客户端用户
● 缓存：服务端渲染结果可以被缓存。对于经常被访问的页面，可以存储已经渲染的HTML
● 流式传输
注意：服务端组件是在服务端运行的，所以没有调用浏览器API的能力，比如要使用window.XXX，useState，useEffect等，需要在文件开头使用’use client‘声明

服务端组件渲染策略

三种策略：静态渲染，动态渲染，流式渲染

静态渲染（默认）

路由会在构建时进行渲染，或者在数据重新验证后在后台运行
结果会被缓存
这种方式适合静态博客或产品介绍页面

动态渲染

在渲染过程中，如果nextJS发现有动态函数或未缓存的数据请求，会自动切换为动态渲染整个路由
动态函数依赖于只能在请求时知道的信息，如用户的 cookie、当前请求头或 URL 的搜索参数。

流式渲染

通过流式处理，路由会在请求时在服务器上渲染。当工作准备就绪时，会将其分成几块并以流式传输到客户端。这样用户就能在页面完全呈现之前看到页面预览
流式渲染适合应用于优先级较低的用户界面，或依赖于较慢数据获取速度的用户界面。例如，产品页面上的评论。

客户端组件

在app文件夹中，默认是服务端组件，如果要使用客户端组件，只需要在文章开头添加”use client“指令
使用use client等于是声明了一个服务器和客户端组件模块之间的边界，也就是说，如果一个文件顶部有这个指令，那么导入该文件的所有其它模块（包括子组件）都将被视为客户端捆绑的一部分

什么时候使用服务端和客户端组件