NextJSと静的ホスティングサービス

Transcript

1. Agenda CSR, SSR, SG(SSG), ISR Next.js 静的ホスティングサービス CodeSandbox
2. CSR, SSR, SG(SSG), ISR フロントエンドのView アーキテクチャ https://zenn.dev/bitarts/articles/37260ddb28ae5d
3. 実際の例 Clipkit のAPI を使ってNext.js のISR を実装しました。 https://github.com/miyamae/clipkit-nextjs
4. Next.js React をベースにSSR/SSG/ISR 機能とファイルベースルーティング機 能を追加したフレームワーク。画面遷移をともなうアプリに最低限必 要な機能がシンプルに入っている感じ。 フロントエンドだけでなくサーバーサイドも一部カバーしている。 （API ルート、SSR 機能） Next.js をベースにしたフルスタックフレームワークもいくつか登場し てきている。
5. (Next.js) ファイルベースルーティング React Router の場合 コンポーネント階層で表現。 <BrowserRouter> <h1>Hello React Router</h1> <Route path="/"> <Home /> <Route path="/subpage"> <SubPage /> </Route> </Route> </BrowserRouter>
6. Next.js のルーティング 静的Web サイトみたいにコンポーネントファイルを配置したディレク トリ構造で表現。 コンポーネントの置き場所に悩まなくていいので楽。 pages/ index.tsx articles/ index.tsx [id]/ <-- 動的なルート index.tsx
7. (Next.js) SSR/SSG/ISR コンポーネントでデータを取得する処理を実装するメソッドを替える だけ。 SSR getServerSideProps を実装するとSSR （リクエスト時取得） export async function getServerSideProps(context) { const article = { ... }; return { props: { article } }; }
8. SSG/ISR getStaticProps を実装するとSSG （ビルド時取得） export async function getStaticProps(context) { const article = { ... }; return { props: { article } }; } getStaticProps でrevalidate を指定するとISR 。（例） return { props: { article }, revalidate: 10 };
9. (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' })); };
10. 静的ホスティングサービス フロントエンドアプリのデプロイ先。 (Q) index.html 置ければどんなサーバでもいい？ (A) 少し問題がある。-> リロード問題 SPA に対応したホスティングサービスを利用するのが楽。 Netlify Vercel Cloudflare Pages
11. Netlify https://www.netlify.com/ 3 つの中では最古参。 管理者1 人なら無料でいくつでもサイト作れる。 無料枠の転送量制限は100GB/ 月まで。 有料プランは管理者1 人ごとに$19/ 月〜 フォーム設置できる機能がある。 無料版は日本リージョンがないので遅い。
12. Vercel https://vercel.com/ Next.js の開発元が運営している。 Next.js で使うとSSR やISR が可能。（唯一無二） 管理者1 人なら無料でいくつでもサイト作れる。（商用不可） 無料枠の転送量制限は100GB/ 月まで。 有料プランは管理者1 人ごとに$20/ 月〜 料金や制限はほぼNetlify と同じだが、唯一SSR/ISR できる。
13. Cloudflare Pages https://pages.cloudflare.com/ 無料版で転送量制限なし。サイト数も制限なし（！！！） これの登場で静的ホスティングは完全無料の時代がきました。
14. S3 + CloudFront 工夫すれば可能。 CloudFront で404 のカスタムエラーページで/index.html を指定して、 レスポンスコードを200 に設定すればok 。 デプロイはGitHub Actions などで自力で構築する必要がある。 AWS にまとめたいならあり。 SSR/ISR したい場合は静的ホスティングはあきらめて、ECS などを使 うしかない。
15. 余談 Jamstack これらのサービスにはSPA じゃなく普通のWeb サイトをホスティング してもよい。ヘッドレスCMS ＋SSG でページを生成して静的ホスティ ングサービスにデプロイする構成をJamstack という。 エッジコンピューティング 基本的には静的HTML だけだが、CDN エッジ上で簡単なプログラムを 動かすエッジコンピューティングをサポートしており、ちょっとした バックエンド処理は可能。
16. CodeSandbox https://codesandbox.io/ JavaScript のサンプルコード実行場所としておなじみ。 実はSSR などサーバーサイドも動く。Next.js の実行環境も一瞬で用意 できる。 GitHub と連動できる。Vercel/Netlify へデプロイもできる。 GitHub と繋げておくと、リモートMTG 中などに手軽に使えて便利か も。