spinny:~/writing $ vim mastering-react-server-components.md
1~2React Server Components (RSC) は、Reactアプリケーションの構築方法を根本的に変えました。レンダリングロジックをサーバーに移動することで、クライアントに送信されるJavaScriptバンドルを大幅に削減でき、読み込み時間の短縮とユーザーエクスペリエンスの向上につながります。この記事では、2026年にRSCを活用するための高度なパターンとベストプラクティスを探ります。3~4## Server Componentsとは？5~6従来、Reactコンポーネントは完全にクライアント（CSR）でレンダリングされるか、サーバー上でHTMLとしてプリレンダリング（SSR）され、その後クライアントでハイドレーションされていました。**Server Components**を使用すると、コンポーネントを*排他的に*サーバー上でレンダリングできます。そのコードはブラウザに送信されません。7~8### メリット9~101. **バンドルサイズゼロ**: Server Componentsで使用される依存関係（マークダウンパーサーや重い日付ライブラリなど）はサーバー上に残ります。112. **直接バックエンドアクセス**: APIエンドポイントを公開することなく、コンポーネント内で直接データベースにクエリを実行できます。123. **自動コード分割**: サーバー側でインポートされたクライアントコンポーネントは自動的にコード分割されます。13~14## データフェッチパターン15~16RSCを使用すると、コンポーネントを `async` にして、データを直接待機できます。17~18```tsx19// app/users/page.tsx20import { 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### ストリーミングのためのSuspense39~40データフェッチは遅くなる可能性があるため、コンポーネントを `<Suspense>` でラップして、データの読み込み中にフォールバックUIを即座に表示します。41~42```tsx43import { 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最も混乱しやすい側面の1つは、サーバーコンポーネントとクライアントコンポーネントを組み合わせる方法です。62~63**経験則**: Server ComponentsはClient Componentsをインポートできます。Client ComponentsはServer Componentsを直接インポート*できません*。ただし、Server Componentを `children` としてClient Componentに渡すことはできます。64~65### "Children" パターン66~67```tsx68// ClientComponent.tsx69'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} {/* これはServer Componentにできます！ */}80 </div>81 );82}83```84~85```tsx86// ServerPage.tsx87import 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. **Server ComponentsでのContextの使用**: Contextはクライアント側の概念です。サーバー側でデータを共有する必要がある場合は、プロパティとして渡すか、専用のリクエストスコープキャッシュを使用します。1022. **イベントハンドラーの追加**: Server Componentに `onClick` や `onChange` を追加することはできません。そのロジックは、一般的なClient Componentリーフノードに属します。103~104## 結論105~106React Server Componentsは単なる機能ではありません。パラダイムシフトです。サーバーとクライアントの境界を理解することで、高度にインタラクティブで信じられないほど高速なアプリケーションを構築できます。107~
NORMAL · mastering-react-server-components.md [readonly]107 lines · :q to close