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
ViewComponent による コンポーネント指向 UI 開発
miyamae
0
170
プログラマのためのChatGPT
miyamae
1
160
TypeScript基礎
miyamae
0
430
Cloudflare
miyamae
0
79
ブラウザでうごく! ES6+ モダンJavaScript
miyamae
0
1.2k
Other Decks in Programming
See All in Programming
TypeScript LSP の今までとこれから
quramy
1
510
データベースコネクションプール(DBCP)の変遷と理解
fujikawa8
1
270
カクヨムAndroidアプリのリブート
numeroanddev
0
430
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
380
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
550
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
250
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
120
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
340
GoのWebAssembly活用パターン紹介
syumai
3
10k
GraphRAGの仕組みまるわかり
tosuri13
7
450
コード書くの好きな人向けAIコーディング活用tips #orestudy
77web
3
320
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
920
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Gamification - CAS2011
davidbonilla
81
5.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Bash Introduction
62gerente
614
210k
Unsuck your backbone
ammeep
671
58k
Thoughts on Productivity
jonyablonski
69
4.7k
Facilitating Awesome Meetings
lara
54
6.4k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
940
Code Reviewing Like a Champion
maltzj
524
40k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
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 中などに手軽に使えて便利か も。