Next.jsのレンダリングについて

レンダリングとは、簡単に言うとウェブページをユーザーに表示するために、どのタイミングでHTMLを生成するかを決める仕組みです。

いくつかレンダリング方法を見てみよう。

SSR(Server Side Rendering)

ユーザーはその場で生成された最新のコンテンツを見ることができ、常に最新の情報を見ることができる。

ユーザーの嗜好やその他の動的なデータに基づいて、ユニークなコンテンツを提供することができる。

メリット

・ページが表示されるまでの処理が速い

・SEOに強い

・ユーザーの通信環境に左右されにくい

デメリット

・ページ遷移のたびにサーバーへの通信が発生する

・サーバー側の負担が大きい

・Node.jsを実行できるWebサーバーが必要になる

実装例）

import React from 'react';

export async function getServerSideProps() {
// データをサーバー側で取得

const res = await fetch('https://api.example.com/data');
const data = await res.json();

 return {
    props: {
       data,
    },
};
}

export default function SSRExample({ data }) {
	return (
  <div>
    <h1>Server Side Rendering (SSR)</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
  </div>
  	);	
}

適しているサービス

・ニュースサイト

・ブログやメディアサイト　など

SSG(Static Site Generation)

ビルド時にデータフェッチやpropsの値の決定を行い、HTMLを構築する。 以降のリクエストではその静的なHTMLが返される。

メリット

・表示が速く、サーバー負荷が少ない

・キャッシュを気にしなくてよい

・SEOに強い

デメリット

・ビルド以降、更新されても画面に反映されない

・更新頻度の高いサイトには向かない

実装例)

import React from 'react';

export async function getStaticProps() {
// ビルド時にデータを取得

const res = await fetch('https://api.example.com/data');
const data = await res.json();

return {
  props: {
      data,
   },
  };
 }
 
 export default function SSGExample({ data }) {
    return (
     <div>
         <h1>Static Site Generation (SSG)</h1>
         <pre>{JSON.stringify(data, null, 2)}</pre>
     </div>
     );
}

適しているサービス

・企業ンコーポレートサイト

・ポートフォリオサイト　など

CSR(Client Side Rendering)

ページがクライアントサイドでJSによって動的にレンダリングされる。

最初は空のHTMLが送られブラウザがJSを実行してコンテンツを生成する。

メリット

・サーバー側の負荷が軽い

・ページ遷移が高速

・API連携が容易

デメリット

・ページが表示されるまでの時間が長い

・サーバーから返却されるHTML自体は空のため、Webクローラーからページの内容が認識されずSEOで不利

実装例)

import React, { useEffect, useState } from 'react';

export default function CSRExample() {
  const [data, setData] = useState(null);
	
useEffect(() => {
// クライアント側でデータを取得
fetch('https://api.example.com/data')
  .then((res) => res.json())
  .then((data) => setData(data));
}, []);

return (
   <div>
       <h1>Client Side Rendering (CSR)</h1>
       <pre>{data ? JSON.stringify(data, null, 2) : 'Loading...'}
	</pre>
  </div>
	);
}

適しているサービス

・ダッシュボードや管理画面

・リアルタイムチャットアプリ　など

まとめ

・SSRは、SEOが重要で、動的コンテンツが求められるサービスに適している

・SSGは、静的で頻繁に更新されないコンテンツを持つサイトに適しており、表示速度と低サーバー負荷がメリット

・CSRは、リッチなインタラクティブ性とリアルタイムデータ処理が求められるアプリケーションに適している

・それぞれの特性を理解し、サービスの要件に合わせて適切なレンダリング方法を選択することが重要です。