Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Webアプリケーションのアーキテクチャパターンから読み解くNext.js
Search
pvcresin
November 06, 2020
Programming
0
390
Webアプリケーションのアーキテクチャパターンから読み解くNext.js
Eight Engineer Meetup #1
pvcresin
November 06, 2020
Tweet
Share
More Decks by pvcresin
See All by pvcresin
text-box-trim について 1 分で
pvcresin
0
110
Web IDEの進化とそれを支える技術
pvcresin
0
78
ステップアップOSSコントリビュート
pvcresin
0
460
Eight WebフロントエンドのDX向上に関する取り組み
pvcresin
0
170
TS 未経験者が 社内向け JS ライブラリを TS に置き換えている話
pvcresin
0
380
React はじめの一歩
pvcresin
1
250
適当に教える最近のフロントエンド開発第一歩
pvcresin
0
150
Other Decks in Programming
See All in Programming
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
790
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
200
Goで作る、開発・CI環境
sin392
0
240
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
7.8k
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
930
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
1
100
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
560
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
780
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2.2k
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
190
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.4k
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Making Projects Easy
brettharned
116
6.3k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Adopting Sorbet at Scale
ufuk
77
9.5k
GraphQLとの向き合い方2022年版
quramy
49
14k
RailsConf 2023
tenderlove
30
1.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Producing Creativity
orderedlist
PRO
346
40k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Transcript
Webアプリケーションの アーキテクチャパターンから読み解くNext.js @pvcresin 2020-11-06 Eight Engineer Meetup #1
鳥山 らいか / Raika Toriyama Sansan 株式会社 > Eight 事業部
> Eight Career 部 > エンジニア (新卒 2 年目) • @pvcresin • 好きなこと:散歩・お笑い・断捨離 • 好きな言語:TypeScript, Kotlin, (Rust)
• Web アプリケーションアーキテクチャのパターンを簡単に 振り返りつつ、Next.js の良さについて考える • Next.js の大まかな思想を理解する 今日の話
• Classic SSR • SPA • BFF • SSR •
SSG • ISR • おまけ Contents
• サーバサイドフレームワーク + テンプレートエンジン • リクエストに応じて HTML を生成して返す デメリット •
毎回画面更新 Classic SSR (Server Side Rendering) SSR Server Client Request Request
• CSR (Client Side Rendering) + Ajax • サーバから返される空の HTML
をもとに、 JS でルーティング・UI 構築・通信を行う • 初期表示以降、必要なデータだけを API から取得するため 画面遷移が高速 • React などの View 用コンポーネントライブラリの台頭 SPA (Single Page Application) Client 初回 Ajax Empty CSR JSON API Server
デメリット • アプリケーションが複雑になるにつれて JS のコードも肥大化 • 完璧なコンテンツが 表示されるまでの時間が長い • スペックが劣るデバイスでは
操作性を損なう可能性 がある • (SEO ?) SPA (Single Page Application) API Server Client 初回 Ajax CSR JSON Empty
• フロントエンドのためのバックエンド(サーバ) • バックエンドの 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
• SPA においてクライアントで行っていた UI 構築ロジックを BFF側 (Node.js) でも利用 • 初回アクセス時にサーバから完璧なコンテンツが
表示された HTML が返される • View 用ライブラリ ≒ テンプレートエンジン SSR (Server Side Rendering) SSR BFF Client 初回
• 多くの場合、「初期表示を SSR + その後は SPA」 • 初期表示までの時間短縮・ページ遷移の高速化 • Next.js
初期の思想 デメリット • リクエストを受けてから HTML を生成するので マシンリソースを消費 する SSR BFF Client SSR (Server Side Rendering) CSR 初回 Ajax JSON Next.js
• ビルド時に全ての HTML ファイルを生成 • ファイルを CDN から返すためレスポンスが高速 • 更新頻度の低い、ブログ・ドキュメント等に向く
• Next.js も途中から対応 デメリット • 全ての HTML ファイルを再生成・デプロイし直す必要 = 時間がかかる SSG (Static Site Generation) CDN Client Server Deploy SSG
• 従来は SSG か SSR のプロジェクトのどちらか一方を選択する必要があった • ページごとに SSG /
SSR を選べるように (Next.js v9.3~) • SSR (同期的) ➡ SSG (非同期的) に SSG + SSR Hybrid
• Next.js v9.5~ • 初回アクセス ◦ 初めて HTML を生成 •
再度アクセス ◦ キャッシュされた HTML を返しつつ、 裏で再生成(Stale-While−Revalidate) • 全ての HTML を生成する必要がないため、ビルド時間が短縮 ISR (Incremental Static Regeneration) CDN Client Server SSG 初回 2回目
おまけ
• 初回リクエスト時に 画像(+ の表示)を最適化してくれるコンポーネント (Next.js v10~) ◦ 元画像より小さいサイズの画像を生成して返却 ◦ 最適な画像フォーマットに自動変換
(WebP 等) • 必要なときに必要な分だけ処理 • (CDN の役割な気も...) next / image
• Next.js はデメリットを少しずつ乗り越えながら進化している • 昨今のフロントエンドのカバー範囲の増加は UX 向上を追求した結果 • パフォーマンス向上のためにはリクエストをサーバまで到達させない まとめ