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
NextJSと静的ホスティングサービス
Search
Tatsuya Miyamae
September 07, 2022
Programming
0
300
NextJSと静的ホスティングサービス
Tatsuya Miyamae
September 07, 2022
Tweet
Share
More Decks by Tatsuya Miyamae
See All by Tatsuya Miyamae
パスキー(Passkeys)入門
miyamae
0
2
ViewComponent による コンポーネント指向 UI 開発
miyamae
0
170
プログラマのためのChatGPT
miyamae
1
160
TypeScript基礎
miyamae
0
450
Cloudflare
miyamae
0
79
ブラウザでうごく! ES6+ モダンJavaScript
miyamae
0
1.3k
Other Decks in Programming
See All in Programming
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
110
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
500
旅行プランAIエージェント開発の裏側
ippo012
2
910
Ruby Parser progress report 2025
yui_knk
1
440
為你自己學 Python - 冷知識篇
eddie
1
350
RDoc meets YARD
okuramasafumi
4
170
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
240
OSS開発者という働き方
andpad
5
1.7k
AI時代のUIはどこへ行く?
yusukebe
18
8.9k
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
310
概念モデル→論理モデルで気をつけていること
sunnyone
2
210
Featured
See All Featured
Side Projects
sachag
455
43k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Making Projects Easy
brettharned
117
6.4k
What's in a price? How to price your products and services
michaelherold
246
12k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
A designer walks into a library…
pauljervisheath
207
24k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Transcript
Agenda CSR, SSR, SG(SSG), ISR Next.js 静的ホスティングサービス CodeSandbox
CSR, SSR, SG(SSG), ISR フロントエンドのView アーキテクチャ https://zenn.dev/bitarts/articles/37260ddb28ae5d
実際の例 Clipkit のAPI を使ってNext.js のISR を実装しました。 https://github.com/miyamae/clipkit-nextjs
Next.js React をベースにSSR/SSG/ISR 機能とファイルベースルーティング機 能を追加したフレームワーク。画面遷移をともなうアプリに最低限必 要な機能がシンプルに入っている感じ。 フロントエンドだけでなくサーバーサイドも一部カバーしている。 (API ルート、SSR 機能)
Next.js をベースにしたフルスタックフレームワークもいくつか登場し てきている。
(Next.js) ファイルベースルーティング React Router の場合 コンポーネント階層で表現。 <BrowserRouter> <h1>Hello React Router</h1>
<Route path="/"> <Home /> <Route path="/subpage"> <SubPage /> </Route> </Route> </BrowserRouter>
Next.js のルーティング 静的Web サイトみたいにコンポーネントファイルを配置したディレク トリ構造で表現。 コンポーネントの置き場所に悩まなくていいので楽。 pages/ index.tsx articles/ index.tsx
[id]/ <-- 動的なルート index.tsx
(Next.js) SSR/SSG/ISR コンポーネントでデータを取得する処理を実装するメソッドを替える だけ。 SSR getServerSideProps を実装するとSSR (リクエスト時取得) export async
function getServerSideProps(context) { const article = { ... }; return { props: { article } }; }
SSG/ISR getStaticProps を実装するとSSG (ビルド時取得) export async function getStaticProps(context) { const
article = { ... }; return { props: { article } }; } getStaticProps でrevalidate を指定するとISR 。(例) return { props: { article }, revalidate: 10 };
(Next.js) API ルート サーバーサイドのAPI を実装できる。(SSR と組み合わせればNext.js だけでサーバーサイドアプリが作れてしまう) pages/api/user.js export default
(req, res) => { res.statusCode = 200; res.setHeader('Content-Type', 'application/json'); res.end(JSON.stringify({ name: 'John Doe' })); };
静的ホスティングサービス フロントエンドアプリのデプロイ先。 (Q) index.html 置ければどんなサーバでもいい? (A) 少し問題がある。-> リロード問題 SPA に対応したホスティングサービスを利用するのが楽。
Netlify Vercel Cloudflare Pages
Netlify https://www.netlify.com/ 3 つの中では最古参。 管理者1 人なら無料でいくつでもサイト作れる。 無料枠の転送量制限は100GB/ 月まで。 有料プランは管理者1 人ごとに$19/
月〜 フォーム設置できる機能がある。 無料版は日本リージョンがないので遅い。
Vercel https://vercel.com/ Next.js の開発元が運営している。 Next.js で使うとSSR やISR が可能。(唯一無二) 管理者1 人なら無料でいくつでもサイト作れる。(商用不可)
無料枠の転送量制限は100GB/ 月まで。 有料プランは管理者1 人ごとに$20/ 月〜 料金や制限はほぼNetlify と同じだが、唯一SSR/ISR できる。
Cloudflare Pages https://pages.cloudflare.com/ 無料版で転送量制限なし。サイト数も制限なし(!!!) これの登場で静的ホスティングは完全無料の時代がきました。
S3 + CloudFront 工夫すれば可能。 CloudFront で404 のカスタムエラーページで/index.html を指定して、 レスポンスコードを200 に設定すればok
。 デプロイはGitHub Actions などで自力で構築する必要がある。 AWS にまとめたいならあり。 SSR/ISR したい場合は静的ホスティングはあきらめて、ECS などを使 うしかない。
余談 Jamstack これらのサービスにはSPA じゃなく普通のWeb サイトをホスティング してもよい。ヘッドレスCMS +SSG でページを生成して静的ホスティ ングサービスにデプロイする構成をJamstack という。
エッジコンピューティング 基本的には静的HTML だけだが、CDN エッジ上で簡単なプログラムを 動かすエッジコンピューティングをサポートしており、ちょっとした バックエンド処理は可能。
CodeSandbox https://codesandbox.io/ JavaScript のサンプルコード実行場所としておなじみ。 実はSSR などサーバーサイドも動く。Next.js の実行環境も一瞬で用意 できる。 GitHub と連動できる。Vercel/Netlify
へデプロイもできる。 GitHub と繋げておくと、リモートMTG 中などに手軽に使えて便利か も。