Rendering，渲染。指的就是把我们写的应用代码转换成用户界面。现在的 React 应用有两种渲染环境，一种是 Client，还有一种是 Server，也就是客户端与服务端。

一般的前端应用都是在前端完成的渲染，这里说的前端指的就是用户的浏览器。React 推出了服务端组件，这种组件可以在服务器上完成的渲染，然后把结果直接交给用户的浏览器使用。

服务端组件可以减少发送给客户端的 JavaScript 代码，可以提升应用的性能。

Next.js

Next.js 框架使用了 React 提供的服务端组件的功能，默认在 app 目录里的组件都会被认为是 Server Component，也就是服务端组件。

下面可以简单测试一下，打开首页页面，在这个组件里面，在控制台上输出一行文字，比如 “宁皓网”。

在浏览器，访问一下应用的首页，打开浏览器的控制台，你会发现并没有输出 “宁皓网” 这行文字。再打开运行项目开发服务的终端观察一下，在这里输出了“宁皓网”这行文字。

这是因为这个 Page 组件是个服务端组件，它是在服务端完成的渲染，客户端显示的是服务端渲染过的结果。在应用里能用服务端组件的时候尽量使用服务端组件。

测试

服务端组件可以使用服务器资源，下面我们可以简单测试一下，在这个 public 目录里面新建一个 markdown 文件，名字是 README.md，在文件里添加一行文字“ 我在宁皓网学习 Next.js。”。

回到首页，在文件顶部导入一个 node 模块，名字是 fs，导入的是 node:fs/promises。下面再导入一个 path，来自 node:path。

用 async 标记一下这个组件，然后在组件里面，声明一个 filePath，用一下 path.join，提供一个 public，还有 README.md。

在下面声明一个 fileContent，等于 await，用一下 fs 模块提供的 readFile 读取服务器上的一个文件，文件的地址就是上面准备好的 filePath。

在组件的视图里面，删除掉这组 div 里面包装的文字，这里可以绑定输出 fileContent.toString()，输出读取的文件的结果。

观察

观察一下首页这个页面的显示，现在页面上显示的这行文字会来自服务器上的一个 markdown 文件里的内容。