【Next.js】Reactサーバーコンポーネントのメリットを実際に確認してみました

サーバーコンポーネントのメリットを実際に確認

Next.js AppフォルダでデフォルトになっているReactサーバーコンポーネント。

その特徴として、「セキュリティ性が高い」や「パフォーマンスに優れる」といたるところで書かれていますが、言葉の説明だけではよくわからないので、本記事では実際に確認をしてみましょう。

クライアントコンポーネントよりも「パフォーマンスに優れる」という点を見ていきます。

なお、Reactサーバーコンポーネントの仕組みやSSRとの違いなどは、下記記事を参考にしてください。

Reactサーバーコンポーネント（RSC）完全解説｜仕組み・メリット・デメリット・ストリーミングまで

4メガバイト、減りました

まずNext.jsをインストールしましょう。

npx create-next-app test

表示される各質問に、Appルーター以外はすべて「No」で答えます。

インストール完了後にVS Codeで開いたら、下記パッケージをインストールしてください。

コードのハイライトに使うパッケージはサイズの大きいものが多いので、例としてhighlight.jsを使います。

npm install highlight.js

/app/page.jsを開き、読み込みます。

// app/page.js

import * as highlightjs from "highlight.js";       // 追加
import Image from "next/image";
import styles from "./page.module.css";

export default function Home() {
    return (
            ...

Next.jsをnpm run devで起動して、ブラウザを開きましょう。

そして開発者ツールから「Network」タブを選択してください。

画面をリロードし、このページで読み込んでいるリソースのサイズを確認しましょう。

これは「Network」タブの一番下に表示されており、ここでは「7.7MB」となっています。

次は/app/page.jsに、下記コードを加えてください。

// app/page.js

"use client"          // 追加 
import * as highlightjs from "highlight.js"; 
import Image from "next/image";
import styles from "./page.module.css";

export default function Home() {
    return (
            ...