了解 React 服务器组件：实用指南-js教程-PHP中文网

了解 React 服务器组件：实用指南

Barbara Streisand

发布： 2024-10-17 18:46:02

原创

243 人浏览过

Understanding React Server Components: A Practical Guide

React 服务器组件 (RSC) 正在彻底改变我们在 React 应用程序中处理服务器端渲染的方式。本指南将引导您了解它们的含义、优点以及如何在您的项目中实施它们。

什么是 React 服务器组件？

React 服务器组件是一种专门在服务器上运行的新型组件。它们在服务器上渲染并将输出发送到客户端，将服务器端渲染的优点与客户端 React 交互性结合起来。

主要特点：

服务器端执行
直接访问服务器资源
客户端捆绑包大小没有增加
无法拥有状态或使用仅限浏览器的 API

React 服务器组件的优点

改进的性能：更快的初始加载和更小的客户端包。
增强的 SEO：服务器渲染的内容更容易索引。
简化数据获取：直接访问服务器端数据源。
提高安全性：敏感操作保留在服务器上。

设置 React 服务器组件

截至 2024 年，React 服务器组件最适合与 Next.js 等框架一起使用。这是一个快速设置：

创建一个新的 Next.js 项目：

   npx create-next-app@latest my-rsc-app
   cd my-rsc-app

登录后复制

出现提示时选择使用 App Router。
在 app/ServerComponent.tsx 中创建服务器组件：

   async function getData() {
     const res = await fetch('https://api.example.com/data')
     return res.json()
   }

   export default async function ServerComponent() {
     const data = await getData()
     return <div>{data.message}</div>
   }

登录后复制

在 app/page.tsx 中使用它：

   import ServerComponent from './ServerComponent'

   export default function Home() {
     return (
       <main>
         <h1>Welcome to React Server Components</h1>
         <ServerComponent />
       </main>
     )
   }

登录后复制

运行您的应用程序：

   npm run dev

登录后复制

实现 React 服务器组件

让我们创建一个更复杂的示例 - 从 CMS 获取数据的博客文章列表：

// app/BlogList.tsx
import { getBlogPosts } from '../lib/cms'

export default async function BlogList() {
  const posts = await getBlogPosts()

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </li>
      ))}
    </ul>
  )
}

// app/page.tsx
import BlogList from './BlogList'

export default function Home() {
  return (
    <main>
      <h1>Our Blog</h1>
      <BlogList />
    </main>
  )
}

登录后复制

在此示例中，BlogList 直接从服务器上的 CMS 获取数据，提高了性能并简化了客户端代码。

高级模式

1. 混合服务器和客户端组件

// ClientComponent.tsx
'use client'

import { useState } from 'react'

export default function LikeButton() {
  const [likes, setLikes] = useState(0)
  return <button onClick={() => setLikes(likes + 1)}>Likes: {likes}</button>
}

// ServerComponent.tsx
import LikeButton from './ClientComponent'

export default function BlogPost({ content }) {
  return (
    <article>
      <p>{content}</p>
      <LikeButton />
    </article>
  )
}

登录后复制

2. 流媒体改善用户体验

import { Suspense } from 'react'
import BlogList from './BlogList'

export default function Home() {
  return (
    <main>
      <h1>Our Blog</h1>
      <Suspense fallback={<p>Loading posts...</p>}>
        <BlogList />
      </Suspense>
    </main>
  )
}

登录后复制

3. 错误处理

'use client'

export default function ErrorBoundary({ error, reset }) {
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={reset}>Try again</button>
    </div>
  )
}

// In your page file
import ErrorBoundary from './ErrorBoundary'

export default function Page() {
  return (
    <ErrorBoundary>
      <BlogList />
    </ErrorBoundary>
  )
}

登录后复制