？大家好！
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...</p>}>
<Comments commentsPromise={commentsPromise} />
</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 发送到客户端的需要，从而实现更快的加载时间和更流畅的用户体验。
以上是释放 React 服务器组件的力量 |第 1 部分的详细内容。更多信息请关注PHP中文网其他相关文章！
