React/Next.js勉強メモ

フロントエンド開発の変遷

• JavaScriptが開発されたのは1995年
  • 同時期に開発されたJScriptとは非互換な部分が多かったため、ECMAによる標準化策定が始まった。
    • 有効な活用方法があまりない・過度なアニメーションなどがブラウザに負荷をかけてしまう...などの理由からセキュリティ上問題もあるという認識が広まり、ブラウザの「JavaScript無効設定」を推奨するような声も強まった。
• 常識を覆した「Google Maps」
  • 非同期でHTTP通信するAjaxの登場
  • JavaScript再注目
• jQueryの登場
  • Webアプリケーションの発展＋ユーザーの使用端末の多様化に伴いフロントエンド開発の際に対応しなければいけない項目が増えていく。
  • ブラウザ間の違いをある程度吸収してコードを書くことができるjQueryが台頭する
• jQueryの衰退
  • 一生を風靡したjQueryもWebアプリケーションが大きく複雑になるにつれて、対応が追いつかなくなる（jQueryを使うとDOMの操作が複雑になるなど）
  • そもそもブラウザ間の差が小さくなり、jQueryを使う必要性が薄れる
• SPAの登場
  • SPAでは初回アクセス時にHTML全体を読み込んで、それ以降は動的にページを生成していく
  • サーバーサイドも、ビューの生成まで行う従来の形式からAPI化が進む
  • JavaScriptの読み込みとレンダリングが発生するため、場合によっては初期表示が重くなるという課題も
• SSR/SSGの需要増加
  • レンダリングをサーバーサイドで行うことで表示が高速化
  • 事前にファイルを静的ファイルとして生成することで処理を高速化

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

SSG - Static Site Generation（静的サイト生成）

ビルド時にAPIなどからデータを取得して、ページを描画して静的ファイルとして生成する方法。
初期描画時には静的ファイルを渡し、それ以降はReactと同様に都度APIなどからデータを取得して描画する。

メリット・・・クライアントに静的ファイルを渡すだけなので初期描画が高速。
デメリット・・・初期描画に使用するデータはビルド時に取得したものであるため、古いデータが表示される可能性あり。

CSR - Client Side Rendering

ビルド時にデータの取得は行わず、初期表示の際に非同期でデータを取得して描画する方法。
ReactなどのSPAで使われている手法。

メリット・・・データの取得はビルド時ではなくて、初期描画時に行うため最新のデータを表示することができる。
HTMLやCSSの生成はブラウザ側でJavaScriptを使って行われる。
デメリット・・・初期描画時に時間がかかる。

SSR - Server Side Rendering

サーバーサイドでHTMLやCSSの生成を行う方法。
アクセスごとにサーバーでデータを取得して描画するため、常に最新のデータを元にして初期描画を行うことができる。

メリット・・・常に最新のデータを表示することができる上に、ブラウザ側でJavaScriptを実行する必要がないため描画もCSRに比べると高速。
デメリット・・・サーバーで処理を行なっているため、他の手法よりも低レイテンシーに陥る可能性がある。

ISR - Incremental Static Regeneration（インクリメンタル静的再生成）

ビルド時に生成された静的ファイルを再生成できる方法。
事前に生成したページに有効期限を設定することができて、有効期限が切れていた場合は再生成して渡すことができる。