03 / Article — 技術記事の組版
記事ページの組版サンプル
React Server Components 入門
React Server Components（RSC）は、サーバーサイドでレンダリングされるコンポーネントです。クライアントに JavaScript バンドルを送信せずに、サーバー上でデータの取得とレンダリングを行います。
基本的な使い方
Server Component はデフォルトの動作です。'use client' ディレクティブを付けない限り、すべてのコンポーネントは Server Component として扱われます。
// Server Component（デフォルト）
async function ArticleList() {
const articles = await fetchArticles();
return (
<ul>
{articles.map(article => (
<li key={article.id}>
<h3>{article.title}</h3>
<p>{article.summary}</p>
</li>
))}
</ul>
);
}
Client Component との組み合わせ
インタラクティブな要素が必要な場合は、'use client' を宣言して Client Component にします。状態管理（useState）やイベントハンドラ（onClick）を使うコンポーネントが該当します。
'use client';
import { useState } from 'react';
export default function LikeButton({ articleId }: { articleId: string }) {
const [liked, setLiked] = useState(false);
const [count, setCount] = useState(0);
const handleLike = async () => {
setLiked(!liked);
setCount(prev => liked ? prev - 1 : prev + 1);
await fetch(`/api/articles/${articleId}/like`, {
method: 'POST',
});
};
return (
<button onClick={handleLike}>
{liked ? '♥' : '♡'} {count}
</button>
);
}
パフォーマンスの利点
Server Components を活用することで、以下の利点が得られます：
- クライアントに送信する JavaScript バンドルサイズの削減
- サーバーサイドでのデータ取得によるウォーターフォールの回避
- 重い依存関係（マークダウンパーサー等）をサーバーに閉じ込められる