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

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

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

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

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

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

npx create-next-app text

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

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

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

npm install highlight.js

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

// app/page.js

import hljs 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 hljs from "highlight.js"
import Image from "next/image";
import styles from "./page.module.css";

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

これによってこのコンポーネントは、デフォルトのサーバーコンポーネントからクライアントコンポーネントになりました。

保存したらブラウザに戻り、「Network」タブを開いたままリロードしてください。

下部のリソースサイズを確認しましょう。

今度は「12.3MB」と4MB以上重くなっています。

サーバーコンポーネントではパッケージをサーバー側ですべて処理するのに対し、クライアンコンポーネントではブラウザ側で処理するためです。

これでサーバーコンポーネントの「JavaScriptバンドルサイズの削減」というメリットを実際に確認できました。

Next.jsについてもっとくわしく知りたい方は、下記教本を参考にしてください。

最新のNext.js Appルータを使ってフルスタックアプリを開発します。