Server Componentsとは？
Server Components（React Server Components、RSC） は、Reactコンポーネントをサーバー側でレンダリングする新仕様。クライアントに送るJavaScript量を大幅に削減し、初回表示を高速化します。
特徴
- サーバーで完結: DBクエリやfs操作を直接記述可能
- JSバンドルに含まれない: クライアントJSサイズ削減
- データ取得が直感的:
async functionで直書き
Client Componentsとの使い分け
tsx
// Server Component（デフォルト）
export default async function BlogList() {
const posts = await fetchPosts(); // DBアクセスOK
return <ul>{posts.map(...)}</ul>;
}
// Client Component（"use client"指定）
"use client";
export default function Counter() {
const [count, setCount] = useState(0); // stateOK
}
SEO/LLMO効果
HTMLが完全にサーバー生成されるため、検索エンジンとAIクローラーが完全なコンテンツを取得できます。