コンテンツにスキップ

レンダリングパターン＠フロントエンドアーキテクチャ

はじめに

本サイトにつきまして、以下をご認識のほど宜しくお願いいたします。


01. レンダリングパターン

歴史

  1. SST
  2. Ajax
  3. CSR
  4. SSR
  5. SSG
  6. ISR


共通する仕組み

▼ ビルド

フロントエンドに関するファイルは、ブラウザで実行しやすい状態に変換される (コンパイルではなく) 。

  • bundleによって、ファイル間で分割された実装をマージする
  • transpileによって、新しい実装規格をブラウザが対応可能な古い規格に変換する
  • minifyによって、インデントやコメントを取り除く


02. SST：Server Side Templating

サーバーサイドのアプリケーションがテンプレートエンジンを使用してHTMLを生成する。

このHTMLをブラウザにレンダリングする。

サーバーサイドのフレームワークを使用して単純なアプリケーションを作る場合、まだまだ現役の技術である。


03. Ajaxによるアプリケーション

1つのWebページの中で、サーバーとデータを非同期通信し、ブラウザ側で部分的に静的ファイル (例：htmlファイル、cssファイル、画像、動画、メールなど) を作成する。

Ajaxの仕組みで作成したアプリはSPAである (CSRとはSPA内部の仕組みが異なる) 。

Ajaxの仕組みで作成したアプリはSPAである。

クライアント側でレンダリングを実行するため、SSRと比較してCSR：Client Server side Renderingともいう。

ブラウザレンダリングのステップ 実行者
Loading ブラウザ
Scripting ブラウザ
Rendering ブラウザ
Paiting ブラウザ

非同期通信は、Ajaxの手法を使用して実現される。

また、静的ファイルの部分的な作成は、MVVMアーキテクチャによって実現する。

CSRでは、ページ全体の静的ファイルをリクエストするのは最初のみで、それ以降はページ全体をリクエストすることはない。

２回目以降は、ページ部分的にリクエストを行い、サーバー側からJSONを受け取っていく。

SPアプリにおけるデータ通信の仕組み


04. CSR：Client Side Rendering

CSRとは

ブラウザ側で静的ファイル (例：htmlファイル、cssファイル、画像、動画、メールなど) を作成する。

CSRの仕組みで作成したアプリはSPAである (AjaxとはSPA内部の仕組みが異なる) 。

最初に取得するhtmlファイルはほぼ空で、ブラウザ上でjavascriptファイルを実行し、htmlファイルを全てを作成する。

その後、クライアントの操作で部分的にデータをリクエストし、htmlファイルを部分的に変更する。

大きなjavascriptファイルを最初に読み込むため、初回の読み込み時間が長くなる。

csr


ブラウザとバックエンド間の通信

CSRでは、ブラウザ上のJavaScriptがバックエンドからデータを取得し、データの出力された静的ファイル (例：htmlファイル、cssファイル、画像、動画、メールなど) をブラウザ上でレンダリングする。

そのためSSRやSSGとは異なり、ブラウザ上でバックエンドアプリケーションと通信する。

csr


CSRの実装方法

▼ 状態管理

CSRでは、ブラウザ上の操作による現在のデータに応じて、同じページ内でレンダリングするHTMLが動的に変わり続ける。

これは、同じページでは特定のHTMLしかレンダリングできない他の方法 (SSR、SSG、ISRなど) とは異なる。

CSRは、DOMの現在の状態をDOMから参照するのではなく、相当する状態を状態オブジェクトとして管理する。

そして、状態オブジェクトをその都度変更した上で、実際のDOMにこれを動的に適用し続ける。

import {useEffect, useState} from "react";


// APIからデータを取ってくる
const getTodoList = async () => {

    return ["遊ぶ", "買い物", "宿題"];
};

// カスタムフック
const useTodoList = () => {

    const [fooState setFooState] = useState("");

    useEffect(
        // 実行したい無名な非同期関数
        () => {
            const todoList = await getTodoList()
            setFooState(todoList);
    }, []);

    return state;
};

function App() {

    const state = useTodoList();

    // データがまだ取得できていないならローディング、取得できているならHTMLをレンダリングする関数
    return (
        <ul>
          {state ? state.map(e => <li>{e}</li>) : "Loding"}
        </ul>
    );
}


CSRによるSPAと従来MPAの比較

▼ 処理速度

MPAと比較して、データを非同期的に通信できるため、1つのWebページの中で必要なデータのみを通信すればよく、レンダリングが速い。

従来WebアプリとSPAの処理速度の違い

▼ SEO

CSRは、Googleのクローラーがページを認識しにくく、Webページがインデックスされない可能性がある。


適するアプリ

  • SEOが重要なアプリ
  • リアルタイム性の優先度が低いアプリ


05. SSR：Server Side Rendering

広義のSSRとは

SSRでは、フロントエンドアプリケーションへのリクエスト時にバックエンドからデータを取得し、データの出力された静的ファイル (例：htmlファイル、cssファイル、画像、動画、メールなど) をフロントエンドアプリケーション上でレンダリングする。

また、ブラウザ上で静的ファイルのハイドレーションを実施する。

フレームワークのテンプレートエンジンやCGIを使用して、サーバー側で静的ファイルを作成すること、も含まれる。

ブラウザレンダリングのステップ 実行者
Loading サーバー
Scripting サーバー
Rendering サーバー
Paiting ブラウザ


狭義のSSRとは

広義のSSRにCSRを取り入れた方法のこと。

SSRでは、フロントエンドアプリケーションへのリクエスト時にバックエンドからデータを取得し、データの出力された静的ファイル (例：htmlファイル、cssファイル、画像、動画、メールなど) をフロントエンドアプリケーション上でレンダリングする。

また、ブラウザ上で静的ファイルのハイドレーションを実施する。

広義のSSRと異なる点は、ブラウザ側にレンダリングされた後、アイソモーフィックJavaScriptという仕組みでCSRとして動作する。

ssr


ブラウザとバックエンド間の通信

SSRでは、フロントエンドアプリケーションへのリクエスト時にバックエンドからデータを取得し、データの出力された静的ファイル (例：htmlファイル、cssファイル、画像、動画、メールなど) をフロントエンドアプリケーション上でレンダリングする。

また、ブラウザ上で静的ファイルのハイドレーションを実施する。

そのためCSRとは異なり、フロントエンドアプリケーション上での静的ファイルのレンダリング時またはブラウザ操作時 (例：クリック操作によるデータ送信など) に、バックエンドアプリケーションと通信する。

ssr


適するアプリ

  • SEOが重要なアプリ
  • リアルタイム性の優先度が低いアプリ


06. SSG：Static Site Generation

SSGとは

事前にビルドを行って静的ファイル (例：htmlファイル、cssファイル、画像、動画、メールなど) を作成しておく。

そして、これをレンダリングし、静的サイトとして稼働させる。

動的な要素 (例：ランダム表示) を含む静的ファイルについては、該当の部分でAjaxを使用できるようにしておく。

ssg


ブラウザとバックエンド間の通信

SSGでは、フロントエンドアプリケーションのビルド時にバックエンドからデータを取得し、データの出力された静的ファイル (例：htmlファイル、cssファイル、画像、動画、メールなど) をフロントエンドアプリケーション上でレンダリングする。

そのためCSRとは異なり、フロントエンドアプリケーション上での静的ファイルのレンダリング時またはブラウザ操作時 (例：クリック操作によるデータ送信など) に、バックエンドアプリケーションと通信する。

ssg


適するアプリ

記入中...


07. ISR：Incremental Static Regeneration

ISRとは

SSGの発展型。

SSGとは異なり、事前にビルドせず、静的ファイル (例：htmlファイル、cssファイル、画像、動画、メールなど) を作成しない。

その代わり、クライアントからリクエストがあって初めて、そのWebページのみビルドが実行され、レンダリングされる。

クライアントから一回でもリクエストがあったWebページでは、初回時にビルドされた静的ファイルがその都度レンダリングされる。

ssg


ブラウザとバックエンド間の通信

ssg