释放 React 服务器组件的力量 |第 1 部分

？大家好！
React.js 是用于构建用户界面的最流行的 JavaScript 库之一。虽然 React 社区有详细记录，但仍有一些鲜为人知的主题和概念。
我们泡茶或咖啡吧，出发吧！
React Server Components (RSC) 是 React 团队推出的一项新的实验性功能，用于优化渲染性能。它们允许开发人员构建在服务器上呈现的应用程序的一部分，同时仍然维护 React 组件模型。
它在与客户端或 SSR 服务器不同的环境中运行，并且可以在 CI 服务器上构建时调用一次，或者可以使用 Web 服务器针对每个请求运行它们。
借助 React Server 组件的强大功能，我们可以直接在 React 组件中读取文件内容。
下面，有一个简单的例子，我们该怎么做。

import marked from 'marked'; // Not included in bundle
import sanitizeHtml from 'sanitize-html'; // Not included in bundle

async function Page({page}) {
  // NOTE: loads *during* render, when the app is built.
  const content = await file.readFile(`${page}.md`);

  return <div>{sanitizeHtml(marked(content))}</div>;
}

客户端只会看到文件的渲染输出。这意味着内容在第一页加载期间是可见的，并且捆绑包不包含渲染静态内容所需的昂贵的库（标记为 sanitize-html）。

带有服务器的服务器组件

使用服务器组件，我们可以与数据库通信，获取任何数据并在客户端中使用。我们也可以在 Next.js 应用程序中做到这一点，集成任何 ORM。
下面是一个使用服务器组件从数据库获取数据的简单示例。

import db from './database';

async function Note({id}) {
  // NOTE: loads *during* render.
  const note = await db.notes.get(id);
  return (
    <div>
      <author>



<p>In database file there can be implementation of data query from database.<br>
For example:<br>
</p>

<pre class="brush:php;toolbar:false">const db = {
  notes: {
    get: async (id) => {
      return dbClient.query('SELECT * FROM notes WHERE id = ?', [id]);
    }
  },
  authors: {
    get: async (id) => {
      return dbClient.query('SELECT * FROM authors WHERE id = ?', [id]);
    }
  }
};

然后，捆绑器将数据、渲染的服务器组件和动态客户端组件组合成一个捆绑包。当页面加载时，浏览器看不到原始的Note和Author组件；仅渲染的输出发送到客户端。 服务器组件可以通过从服务器重新获取它们来动态化，它们可以访问数据并再次渲染。

异步组件与服务器组件的强大功能

服务器组件引入了一种使用 async/await 编写组件的新方法。当您在异步组件中等待时，React 将暂停并等待承诺解决，然后再恢复渲染。这可以跨服务器/客户端边界工作，并支持 Suspense 的流式传输。
服务器组件示例：

// Server Component
import db from './database';

async function Page({id}) {
  // Will suspend the Server Component.
  const note = await db.notes.get(id);

  // NOTE: not awaited, will start here and await on the client. 
  const commentsPromise = db.comments.get(note.id);
  return (
    <div>
      {note}
      <suspense fallback="{<p">Loading Comments...}>
        <comments commentspromise="{commentsPromise}"></comments>
      </suspense>
    </div>
  );
}

// Client Component
"use client";
import {use} from 'react';

function Comments({commentsPromise}) {
  // NOTE: this will resume the promise from the server.
  // It will suspend until the data is available.
  const comments = use(commentsPromise);
  return comments.map(commment => <p>{comment}</p>);
}

评论的优先级较低，因此我们在服务器上启动 Promise，并使用 *use * API 在客户端等待它。这将在客户端挂起，而不会阻止笔记内容的渲染。

在接下来的部分中，我们将讨论服务器操作和指令（“使用客户端”、“使用服务器”）的功能，以及为什么“使用服务器”与“使用客户端”没有相同的角色？

再见！

虽然服务器组件仍处于实验阶段，但它们因其改进大规模应用程序的潜力而逐渐受到关注。它们消除了将不必要的 JavaScript 发送到客户端的需要，从而实现更快的加载时间和更流畅的用户体验。