Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

70万通りのURLを持つWebサービスを Next.jsにリプレイスして高速化した話

AijiUejima
October 28, 2021

70万通りのURLを持つWebサービスを Next.jsにリプレイスして高速化した話

ジャムジャム!!Jamstack_2に登壇した際の発表資料です。
https://jamjamjamstack.connpass.com/event/226467/

ご質問あれば、Twitter: aiji42_dev までどうぞ。

AijiUejima

October 28, 2021
Tweet

More Decks by AijiUejima

Other Decks in Technology

Transcript

  1. 1 © 2021 Ateam Inc. 1 Uejima Aiji リードエンジニア@株式会社エイチームライフスタイル Twitter:

    aiji42_dev 8年のキャリアの中で、フロントエンジニアよりも バックエンドエンジニアとしてのキャリアのほうが長い (3:7くらい) でも最近はフロントエンドがメイン
  2. 6 © 2021 Ateam Inc. 6 トップ 記事 霊園詳細 1K

    Pages 700K Pages 30K Pages エントリー 霊園リスト&検索
  3. 7 © 2021 Ateam Inc. 7 トップ 記事 霊園リスト&検索 霊園詳細

    1K Pages 700K Pages 30K Pages エントリー エリア(市区町村・駅)x霊園特徴(樹木葬, 納骨堂...etc.)
  4. 45 © 2021 Ateam Inc. 45 getStaticPaths: SG/ISRのデプロイ時のビルドターゲット(パス)を決定する関数 返り値に fallback:

    true(or "blocking") を指定すると、 ビルドターゲットにないパスでリクエストを受けた際にビルドを行う。(遅延ビルド)
  5. 47 © 2021 Ateam Inc. 47 フルデプロイビルドパターン 全ページをデプロイ時にビルド • 全ページ一定のアクセス量があるページ群に有効

    • BFFと通信してコンテンツを生成する場合、最大でも4桁程度のページ数が現実的 フルデプロイビルドパターン [slag].tsx PV 多 PV 少
  6. 48 © 2021 Ateam Inc. 48 フルリクエストビルドパターン デプロイ時のビルドを全スキップし、リクエスト時にビルド • デプロイは高速

    <> 初アクセスはコンテンツを生成する分、多少TTFBが遅くなる • URLパターンがかけ合わせ等で指数関数的に増加するページ群に有効 フルリクエストビルドパターン product/[id]/sub.tsx PV 多 PV 少
  7. 49 © 2021 Ateam Inc. 49 ハイブリッドビルドパターン 一部のページをデプロイ時、それ以外をリクエスト時にビルド • アクセス数に偏りがあるページ群で強い効果を発揮

    (例: 主要都市と地方) • デプロイ時間と相談しながらビルド対象数を選択する デプロイビルド リクエストビルド search/[prefecture]/[city]/[condition].tsx PV 多 PV 少
  8. 52 © 2021 Ateam Inc. 52 記事 霊園リスト&検索 霊園詳細 フルデプロイビルド

    ハイブリッドビルド(単一条件) + フルリクエストビルド(掛合わせ条件) ハイブリッドビルド(メインページ) + フルリクエストビルド(サブページ)
  9. 54 © 2021 Ateam Inc. 54 記事 霊園リスト&検索 霊園詳細 フルデプロイビルド

    ハイブリッドビルド(単一条件) + フルリクエストビルド(掛合わせ条件) ハイブリッドビルド(メインページ) + フルリクエストビルド(サブページ) 45分
  10. 66 © 2021 Ateam Inc. 66 www.lifedot.jp /db/*/ /pref-*/city-*/*/ /pref-*/st-*/*/

    /pref-*/cond-*/*/ /ohaka/[a-z]+/ product.vercel.lifedot.jp article.vercel.lifedot.jp search.vercel.lifedot.jp CDN (CloudFront) + エッジコンピューティング (LambdaEdge) で統合
  11. 70 © 2021 Ateam Inc. 70 記事 霊園リスト&検索 霊園詳細 15分

    15分 15分 それぞれ並行してビルドされるので 15分に短縮
  12. 79 © 2021 Ateam Inc. 79 Storybook, Cypress, Jest, ESLint

    などが標準配備される テストを書く文化を浸透させやすい https://nx.dev
  13. 80 © 2021 Ateam Inc. 80 package.json と node_modules がリポジトリに1つなので

    依存パッケージのアップデートなどバージョン管理が楽 ※よく比較にあがる lerna などはルートと各appごとに発生する (ただし志向や用途が違うので単純比較していいものではない)
  14. 81 © 2021 Ateam Inc. 81 vs code や IntelliJ用の公式プラグインがあり

    クリックでビルド&サーブしたりテスト実行できる 複雑なコマンド学習をメンバーに強要しなくて良い
  15. 82 © 2021 Ateam Inc. 82 appsとlibsが基本構造 共通モジュールはlibsに配備 自動的にプロジェクト名でエイリアスされる 無意識的にnpmモジュールライクな参照が可能

    import { Header } "@lifedot/components" import { useStockList } "@lifedot/hooks" libs apps article search product components relay(graphql) hooks, router, layouts, ...etc. @lifedot/components
  16. 83 © 2021 Ateam Inc. 83 apps article search product

    product.vercel.lifedot.jp search.vercel.lifedot.jp article.vercel.lifedot.jp Vercel の "Ignored Build Step" と組み合わせることで 変更が生じたappsのみデプロイできる ❌ ❌ update
  17. 87 © 2021 Ateam Inc. 87 1. 3パターンのデプロイ方法と遅延ビルドの活用 • フルデプロイビルド

    • フルリクエストビルド • ハイブリッドビルド 2. サービスの縦割りと CDN+エッジコンピューティングによる統合 3. Nxによるリポジトリのモノレポ化