🐕
Reactベースのフレームワークをまとめてみる
事前知識
Reactとは
- JavaScript(TypeScript)を用いたUIライブラリ
- コンポーネント志向
- UIをコンポーネント（部品）として分割する概念
- コンポーネントは再利用できる
- 宣言的
- 仮想DOM
- 仮想DOMのプロセス
- Reactは最初に仮想DOMと呼ばれるものを作成する
- UIが更新されると新しい仮想DOMと前の仮想DOMを比較する（
差分検出） - Reactは
差分検出で発見した必要最小限の変更のみを実際のDOMに適用する
- 仮想DOMのプロセス
- SPA
- 1つのHTMLを動的に切り替える
Reactベースのフレームワークまとめ
Reactのフレームワークを、ルーティング、データフェッチ、レンダリングの観点で表にしてみた
| ルーティング | データフェッチ | レンダリング | |
|---|---|---|---|
| Next.js | ファイルベース | メソッドベース | SSR、SSG、CSR、ISR |
| Remix | ファイルベース | ルートベース | SSR、SSG、CSR、ISR |
| Gatsby | ファイルベース | ルートベースorAPI | SSG、CSR、PWA |
| Blitz.js | ファイルベース | メソッドベース | SSR、SSG、CSR、ISR |
| Razzle | ‐ | ‐ | SSR、SSG、CSR |
| RedwoodJS | ファイルベース | Cellコンポーネントベース | SSR、CSR |
| UmiJS | 設定ベースorファイルベース | dva | CSR |
レンダリングについて
| 種類 | 概要 | 特徴 |
|---|---|---|
| SSR | 各リクエストごとにサーバー側でページを生成 | ページの初期読み込みが速く、SEOに優れている |
| SSG | ビルド時にページを事前生成 | 非常に高速で、頻繁に変更されないコンテンツに最適 |
| CSR | クライアント側でデータを取得し、ページをレンダリング | ユーザーのインタラクションが多いページや動的コンテンツに適している |
| ISR | SSG＋SSRの利点 | 頻繁に更新されるコンテンツでも静的サイトのパフォーマンスメリットを享受できる |
ルーティングについて
- ファイルベースルーティング
- 特定のディレクトリ内のファイルやフォルダ構造に基づいて自動的にルート（URLパス）を生成する方法
- 設定ベースルーティング
- アプリケーションのルート（URLパス）を専用の設定ファイルやコード内で明示的に定義する方法
各フレームワークの特徴
Next.js
柔軟性と拡張性のあるフレームワーク
- Image Optimization
- webページの画像を効率的に読み込む機能
Remix
エッジコンピューティング＆高速SSRに特化したフレームワーク
- ネストされたルートをサポートしたルーティング
- 高速SSRレンダリング
- ページロード時にデータをプリエンプティブにフェッチし、コンポーネントごとにデータをロード
Gatsby
SSG（静的サイト生成）に特化したフレームワーク
- データフェッチング
- 下記を組み合わせてデータ取得
- ビルド時にGraphQLから
- クライアント側でAPIから
- 下記を組み合わせてデータ取得
Blitz.js
Next.jsをベースにしたフルスタックフレームワーク
- データフェッチング
- Next.jsのデータフェッチメソッド＋Blitz.js独自の
クエリとミューテーションという概念を使用-
クエリ:データの読み取り専用の関数 -
ミューテーション:データの作成、更新、削除を行う関数
-
- Next.jsのデータフェッチメソッド＋Blitz.js独自の
Razzle
柔軟性が特徴のフレームワーク
ルーティング、データフェッチングにもフレームワークの縛りがない
RedwoodJS
フロントエンドとバックエンドを統合したフレームワーク
- cellコンポーネントとは
- query,loading,empty,failure,successの要素で構成される
- queryがデータを取得するためのGraphQLクエリ
UmiJS
企業向けのフレームワーク
- ルーティング
- 設定ファイルで設定ベースのルーティングが可能
- 設定ファイルがなければファイルベースルーティングとなる
- dvaとは
- Reduxをベースにした状態管理
- データフェッチの管理
- ミドルウェア
- モジュール化
Discussion