2026年掌握React服务端组件

spinny:~/writing $ vim mastering-react-server-components.md

1~
2React服务端组件（RSC）从根本上改变了我们构建React应用程序的方式。通过将渲染逻辑移动到服务端，我们可以显著减少发送到客户端的JavaScript包，从而实现更快的加载时间和更好的用户体验。在这篇文章中，我们将探讨在2026年利用RSC的高级模式和最佳实践。
3~
4## 什么是服务端组件？
5~
6传统上，React组件完全在客户端渲染（CSR），或者在服务端预渲染为HTML（SSR），然后在客户端进行水合。**服务端组件**允许我们*专门*在服务端由于渲染组件。它们的代码通过不会发送到浏览器。
7~
8### 好处
9~
101.  **零包大小**：服务端组件中使用的依赖项（如markdown解析器或繁重的日期库）保留在服务端。
112.  **直接后端访问**：您可以直接在组件内部查询数据库，而无需暴露API端点。
123.  **自动代码分割**：服务端导入的客户端组件会自动进行代码分割。
13~
14## 数据获取模式
15~
16使用RSC，您可以将组件设为 `async` 并直接等待数据。
17~
18```tsx
19// app/users/page.tsx
20import { db } from '@/lib/db';
21~
22export default async function UsersPage() {
23  const users = await db.user.findMany();
24~
25  return (
26    <main>
27      <h1>用户</h1>
28      <ul>
29        {users.map((user) => (
30          <li key={user.id}>{user.name}</li>
31        ))}
32      </ul>
33    </main>
34  );
35}
36```
37~
38### 用于流式传输的 Suspense
39~
40由于数据获取可能很慢，请将您的组件包装在 `<Suspense>` 中，以便在加载数据时立即显示回退UI。
41~
42```tsx
43import { Suspense } from 'react';
44import UserList from './UserList';
45import LoadingSkeleton from './LoadingSkeleton';
46~
47export default function Page() {
48  return (
49    <section>
50      <h1>我的用户</h1>
51      <Suspense fallback={<LoadingSkeleton />}>
52        <UserList />
53      </Suspense>
54    </section>
55  );
56}
57```
58~
59## 混合服务端和客户端组件
60~
61最令人困惑的方面之一是如何结合服务端和客户端组件。
62~
63**经验法则**：服务端组件可以导入客户端组件。客户端组件*不能*直接导入服务端组件。但是，您可以将服务端组件作为 `children` 传递给客户端组件。
64~
65### "Children" 模式
66~
67```tsx
68// ClientComponent.tsx
69'use client';
70~
71import { useState } from 'react';
72~
73export default function ClientWrapper({ children }) {
74  const [count, setCount] = useState(0);
75~
76  return (
77    <div onClick={() => setCount((c) => c + 1)}>
78      计数：{count}
79      {children} {/*这可能是服务端组件！*/}
80    </div>
81  );
82}
83```
84~
85```tsx
86// ServerPage.tsx
87import ClientWrapper from './ClientWrapper';
88import ServerContent from './ServerContent';
89~
90export default function Page() {
91  return (
92    <ClientWrapper>
93      <ServerContent /> {/* 这完美运行 */}
94    </ClientWrapper>
95  );
96}
97```
98~
99## 常见陷阱
100~
1011.  **在服务端组件中使用Context**：Context是一个客户端概念。如果您需要在服务端共享数据，请将其作为props传递或使用专门的请求范围缓存。
1022.  **添加事件处理程序**：您不能向服务端组件添加 `onClick` 或 `onChange`。该逻辑属于通用的客户端组件叶节点。
103~
104## 结论
105~
106React服务端组件不仅仅是一个功能；它们是一个范式转变。通过理解服务端和客户端之间的边界，您可以构建既具有高度交互性又极其快速的应用程序。
107~

NORMAL · mastering-react-server-components.md [readonly]107 lines · :q to close

2React服务端组件（RSC）从根本上改变了我们构建React应用程序的方式。通过将渲染逻辑移动到服务端，我们可以显著减少发送到客户端的JavaScript包，从而实现更快的加载时间和更好的用户体验。在这篇文章中，我们将探讨在2026年利用RSC的高级模式和最佳实践。

4## 什么是服务端组件？

6传统上，React组件完全在客户端渲染（CSR），或者在服务端预渲染为HTML（SSR），然后在客户端进行水合。**服务端组件**允许我们*专门*在服务端由于渲染组件。它们的代码通过不会发送到浏览器。

8### 好处

101. **零包大小**：服务端组件中使用的依赖项（如markdown解析器或繁重的日期库）保留在服务端。

112. **直接后端访问**：您可以直接在组件内部查询数据库，而无需暴露API端点。

123. **自动代码分割**：服务端导入的客户端组件会自动进行代码分割。

13~

14## 数据获取模式

15~

16使用RSC，您可以将组件设为 `async` 并直接等待数据。

17~

18```tsx

19// app/users/page.tsx

20import { db } from '@/lib/db';

21~

22export default async function UsersPage() {

23 const users = await db.user.findMany();

24~

25 return (

26 <main>

27 <h1>用户</h1>

28 <ul>

29 {users.map((user) => (

30 <li key={user.id}>{user.name}</li>

31 ))}

32 </ul>

33 </main>

34 );

35}

36```

37~

38### 用于流式传输的 Suspense

39~

40由于数据获取可能很慢，请将您的组件包装在 `<Suspense>` 中，以便在加载数据时立即显示回退UI。

41~

42```tsx

43import { Suspense } from 'react';

44import UserList from './UserList';

45import LoadingSkeleton from './LoadingSkeleton';

46~

47export default function Page() {

48 return (

49 <section>

50 <h1>我的用户</h1>

51 <Suspense fallback={<LoadingSkeleton />}>

52 <UserList />

53 </Suspense>

54 </section>

55 );

56}

57```

58~

59## 混合服务端和客户端组件

60~

61最令人困惑的方面之一是如何结合服务端和客户端组件。

62~

63**经验法则**：服务端组件可以导入客户端组件。客户端组件*不能*直接导入服务端组件。但是，您可以将服务端组件作为 `children` 传递给客户端组件。

64~

65### "Children" 模式

66~

67```tsx

68// ClientComponent.tsx

69'use client';

70~

71import { useState } from 'react';

72~

73export default function ClientWrapper({ children }) {

74 const [count, setCount] = useState(0);

75~

76 return (

77 <div onClick={() => setCount((c) => c + 1)}>

78 计数：{count}

79 {children} {/*这可能是服务端组件！*/}

80 </div>

81 );

82}

83```

84~

85```tsx

86// ServerPage.tsx

87import ClientWrapper from './ClientWrapper';

88import ServerContent from './ServerContent';

89~

90export default function Page() {

91 return (

92 <ClientWrapper>

93 <ServerContent /> {/* 这完美运行 */}

94 </ClientWrapper>

95 );

96}

97```

98~

99## 常见陷阱

100~

1011. **在服务端组件中使用Context**：Context是一个客户端概念。如果您需要在服务端共享数据，请将其作为props传递或使用专门的请求范围缓存。

1022. **添加事件处理程序**：您不能向服务端组件添加 `onClick` 或 `onChange`。该逻辑属于通用的客户端组件叶节点。

103~

104## 结论

105~

106React服务端组件不仅仅是一个功能；它们是一个范式转变。通过理解服务端和客户端之间的边界，您可以构建既具有高度交互性又极其快速的应用程序。

107~