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
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
410
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
300
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
230
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
260
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
21
8.7k
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
20k
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
970
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
14k
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2.3k
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
450
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
320
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.5k
Practical Orchestrator
shlominoach
189
11k
Documentation Writing (for coders)
carmenintech
72
4.9k
A designer walks into a library…
pauljervisheath
207
24k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building Adaptive Systems
keathley
43
2.7k
GraphQLとの向き合い方2022年版
quramy
49
14k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Done Done
chrislema
184
16k
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 向上を追求した結果 • パフォーマンス向上のためにはリクエストをサーバまで到達させない まとめ