Webアプリケーションのアーキテクチャパターンから読み解くNext.js

Transcript

1. Webアプリケーションの アーキテクチャパターンから読み解くNext.js @pvcresin 2020-11-06 Eight Engineer Meetup #1

2. 鳥山 らいか / Raika Toriyama Sansan 株式会社 > Eight 事業部

   > Eight Career 部 > エンジニア (新卒 2 年目) • @pvcresin • 好きなこと：散歩・お笑い・断捨離 • 好きな言語：TypeScript, Kotlin, (Rust)

3. • Web アプリケーションアーキテクチャのパターンを簡単に 振り返りつつ、Next.js の良さについて考える • Next.js の大まかな思想を理解する 今日の話

4. • Classic SSR • SPA • BFF • SSR •

   SSG • ISR • おまけ Contents

5. • サーバサイドフレームワーク + テンプレートエンジン • リクエストに応じて HTML を生成して返す デメリット •

   毎回画面更新 Classic SSR (Server Side Rendering) SSR Server Client Request Request

6. • CSR (Client Side Rendering) + Ajax • サーバから返される空の HTML

   をもとに、 JS でルーティング・UI 構築・通信を行う • 初期表示以降、必要なデータだけを API から取得するため 画面遷移が高速 • React などの View 用コンポーネントライブラリの台頭 SPA (Single Page Application) Client 初回 Ajax Empty CSR JSON API Server

7. デメリット • アプリケーションが複雑になるにつれて JS のコードも肥大化 • 完璧なコンテンツが 表示されるまでの時間が長い • スペックが劣るデバイスでは

   操作性を損なう可能性 がある • (SEO ?) SPA (Single Page Application) API Server Client 初回 Ajax CSR JSON Empty

8. • フロントエンドのためのバックエンド（サーバ） • バックエンドの API サーバ化・マイクロサービス化の潮流 • UI 構築 /

   Data 操作 の関心の分離 • 役割 ◦ API Gateway ◦ Session 管理 ◦ SSR（後述） BFF (Backends For Frontends) BFF Client micro service API Server micro service micro service Front-end Back-end

9. • SPA においてクライアントで行っていた UI 構築ロジックを BFF側 (Node.js) でも利用 • 初回アクセス時にサーバから完璧なコンテンツが

   表示された HTML が返される • View 用ライブラリ ≒ テンプレートエンジン SSR (Server Side Rendering) SSR BFF Client 初回

10. • 多くの場合、「初期表示を SSR + その後は SPA」 • 初期表示までの時間短縮・ページ遷移の高速化 • Next.js

    初期の思想 デメリット • リクエストを受けてから HTML を生成するので マシンリソースを消費 する SSR BFF Client SSR (Server Side Rendering) CSR 初回 Ajax JSON Next.js

11. • ビルド時に全ての HTML ファイルを生成 • ファイルを CDN から返すためレスポンスが高速 • 更新頻度の低い、ブログ・ドキュメント等に向く

    • Next.js も途中から対応 デメリット • 全ての HTML ファイルを再生成・デプロイし直す必要 = 時間がかかる SSG (Static Site Generation) CDN Client Server Deploy SSG

12. • 従来は SSG か SSR のプロジェクトのどちらか一方を選択する必要があった • ページごとに SSG /

    SSR を選べるように (Next.js v9.3~) • SSR (同期的) ➡ SSG (非同期的) に SSG + SSR Hybrid

13. • Next.js v9.5~ • 初回アクセス ◦ 初めて HTML を生成 •

    再度アクセス ◦ キャッシュされた HTML を返しつつ、 裏で再生成（Stale-While−Revalidate） • 全ての HTML を生成する必要がないため、ビルド時間が短縮 ISR (Incremental Static Regeneration) CDN Client Server SSG 初回 2回目

14. おまけ

15. • 初回リクエスト時に 画像（+ の表示）を最適化してくれるコンポーネント (Next.js v10~) ◦ 元画像より小さいサイズの画像を生成して返却 ◦ 最適な画像フォーマットに自動変換

    (WebP 等) • 必要なときに必要な分だけ処理 • （CDN の役割な気も...） next / image

16. • Next.js はデメリットを少しずつ乗り越えながら進化している • 昨今のフロントエンドのカバー範囲の増加は UX 向上を追求した結果 • パフォーマンス向上のためにはリクエストをサーバまで到達させない まとめ