コンテンツにスキップ

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

はじめに

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


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

歴史

  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 ファイル、画像、動画、メールなど) をサーバーレンダリングする。

また、静的ファイルのキャッシュを作成しておき、静的ファイルを再作成することで定期的にキャッシュを更新する。

isr


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

isr


08. UR：Universal Rendering

SSR と CSR を組み合わせた UI レンダリングパターンであり、SST（Server Side Templating）に似ている。


09. Streaming SSR

記入中...