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
370
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
87
Web IDEの進化とそれを支える技術
pvcresin
0
57
ステップアップOSSコントリビュート
pvcresin
0
450
Eight WebフロントエンドのDX向上に関する取り組み
pvcresin
0
140
TS 未経験者が 社内向け JS ライブラリを TS に置き換えている話
pvcresin
0
360
React はじめの一歩
pvcresin
1
240
適当に教える最近のフロントエンド開発第一歩
pvcresin
0
140
Other Decks in Programming
See All in Programming
SwiftUI Viewの責務分離
elmetal
PRO
2
280
Your Architecture as a Crime Scene:Forensic Analysis @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
110
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
760
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
300
ABEMA iOS 大規模プロジェクトにおける段階的な技術刷新 / ABEMA iOS Technology Upgrade
akkyie
1
260
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
190
Better Code Design in PHP
afilina
0
190
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
420
Jasprが凄い話
hyshu
0
190
はじめての Go * WASM * OCR
sgash708
1
120
機能が複雑化しても 頼りになる FactoryBotの話
tamikof
1
250
ソフトウェアエンジニアの成長
masuda220
PRO
12
2.2k
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Producing Creativity
orderedlist
PRO
344
40k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Navigating Team Friction
lara
183
15k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
Faster Mobile Websites
deanohume
306
31k
Rails Girls Zürich Keynote
gr2m
94
13k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
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 向上を追求した結果 • パフォーマンス向上のためにはリクエストをサーバまで到達させない まとめ