React Server コンポーネントを理解する: 実践ガイド

React Server Components (RSC) は、React アプリケーションでのサーバー側レンダリングへのアプローチ方法に革命をもたらしています。このガイドでは、それらの概要、利点、プロジェクトに実装する方法について説明します。

React サーバー コンポーネントとは何ですか?

React サーバー コンポーネントは、サーバー上で排他的に実行される新しいタイプのコンポーネントです。これらはサーバー上でレンダリングしてその出力をクライアントに送信し、サーバー側レンダリングの利点とクライアント側の React 対話性を組み合わせます。

主な機能:

• サーバー側の実行
• サーバーリソースへの直接アクセス
• クライアント側のバンドル サイズは増加しません
• 状態を保持したり、ブラウザ専用 API を使用したりすることはできません

React サーバー コンポーネントの利点

1. パフォーマンスの向上: 初期ロードが高速になり、クライアント バンドルが小さくなります。
2. 強化された SEO: サーバーでレンダリングされたコンテンツのインデックス作成がより簡単になります。
3. 簡略化されたデータ取得: サーバー側のデータ ソースへの直接アクセス。
4. セキュリティの向上: 機密性の高い操作はサーバー上に残ります。

React サーバー コンポーネントのセットアップ

2024 年の時点では、React Server コンポーネントは Next.js などのフレームワークと併用するのが最適です。簡単なセットアップは次のとおりです:

1. 新しい Next.js プロジェクトを作成します。

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

1. プロンプトが表示されたら、App Router を使用することを選択します。

2. 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>
   }

1. app/page.tsx で使用します。

   import ServerComponent from './ServerComponent'

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

1. アプリケーションを実行します。

   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. ストリーミングによる UX の向上

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>
  )
}

結論

React Server Components は、パフォーマンスが高く、SEO に優しく、安全な Web アプリケーションを構築するための強力なアプローチを提供します。これらは React 開発のエキサイティングな方向性を表しており、クライアント側 React の対話性を維持しながらサーバー側でのデータのフェッチとレンダリングを可能にします。

サーバー コンポーネントを検討するときは、サーバー コンポーネントがクライアント側の React に代わるものではなく、補完的なテクノロジであることを忘れないでください。アプリケーション アーキテクチャで意味のある場所で使用してください。

プロジェクトでサーバー コンポーネントを試してみることをお勧めします。このエキサイティングな分野でのさらなる開発にご期待ください。

以上がReact Server コンポーネントを理解する: 実践ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。