クライアント部分を小さく保つ

CoddyのReactジャーニー「Next.js の基本」セクションの一部 — レッスン 20/47。

ページにインタラクティブなボタンが1つ必要なとき、魅力的な近道があります。ページの先頭に 'use client' を追加して終わりにする方法です。これで動作はします。しかし、これは Next.js が提供してくれたすべてを台無しにする最も一般的な方法でもあります。

ルール2を思い出してください。ディレクティブはファイル全体をマークします。ページをマークすると、見出し、説明、料理のリスト、およびそれらがレンダリングするすべてのコンポーネントがクライアントコードになり、ブラウザにダウンロードされて再実行されます。1つのボタンがページ全体を境界線の向こう側（クライアント側）へ引き込みました。

これを修正する習慣は、小さく機械的なものです。

'use client' を末端のコンポーネント（leaves）に移動させます。

インタラクティブな部分を独自の小さなファイルに切り出し、そのファイルにマークを付けて、ページ自体はサーバー上に残します：

// app/page.jsx - まだサーバーコンポーネント
import LikeButton from '../components/LikeButton';

export default function Home() {
    return (
        <main>
            <h1>Coddy Eats</h1>
            <LikeButton />
        </main>
    );
}

注目すべき点が2つあります。まず、server component は client component をレンダリングできるということです。この方向は完全に正常です。次に、page の構造は変わっておらず、小さな1つのパーツが移動しただけである点です。

同じような慣習に陥らせる、もう1つのエラーがあります。サーバーコンポーネント内の button に直接 onClick を配置すると、ランタイムによって停止されます: Event handlers cannot be passed to Client Component props。ハンドラーは関数です。クライアントファイル内に存在しない限り、ブラウザへの移行に耐えることはできません。

チャレンジ

簡単

このページは、サーバーコンポーネント内のボタンに onClick を配置しているため、アプリがまったくレンダリングされません。

ページをクライアントコンポーネントとしてマークすることなく修復してください：

components/LikeButton.jsx 内に、いいねのカウントを state に保持し、id="like" を持つボタンをレンダリングするクライアントコンポーネント（1行目に 'use client'）を記述します。そのテキストは Likes: に続いてカウントが表示される必要があります。
app/page.jsx で、壊れているボタンを削除し、代わりに <LikeButton /> をレンダリングします。'../components/LikeButton' からインポートしてください。
見出しとキャッチコピー（tagline）はそのままにしておきます。ページはサーバーコンポーネントのままである必要があります。

自分で試してみよう

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}