Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ReactメインのチームにNext.jsを導入した道のり

井内 将俊
November 17, 2023
2k

 ReactメインのチームにNext.jsを導入した道のり

2023年11月18日(土) に登壇したフロントエンドカンファレンスの登壇資料となります。

https://frontend-conf.okinawa.jp/

井内 将俊

November 17, 2023
Tweet

Transcript

  1. © DMM 前提となるシチュエーション 7 - チーム全体でフロントエンドはReact - 5年ほど前のリプレースでReactが導入されそのまま - 視聴者が使うわけではなく、配信者が使う

    - SEOは不要、パフォーマンスの優先度もそれほど高くない - 長期的に安定稼働させていきたい - 新規サブ機能も他と同に素のReact実装を想定
  2. © DMM React前提からNext.jsを採用するメリット 8 - 新しい技術に興味のあるエンジニア採用に強くなる - 新卒研修でも使用しているNext.jsを採用しイメージ向上 - 内蔵された最適化機能

    - ルーティング、プリフェッチ、画像最適化などが デフォルトでされており、設定が楽 - パフォーマンス向上が見込めるSSRが活用できる
  3. © DMM SSRを行うメリット 13 - SEOの改善、共有時の動的OGP - パフォーマンス改善 - 初期ページのロード時間の短縮

    - 事前データ取得 恩恵よりもコストの方が大きくなることがある 現状では 特段必要ない
  4. © DMM Next.js導入のメリット・デメリット 17 メリット - エンジニア採用に強くなる - SSRが活用できる -

    自動最適化 デメリット - 開発メンバーの学習コスト - SSR実現用のNode.js サーバーの運用・保守
  5. © DMM メリット - エンジニア採用に強くなる - SSRが活用できる - SSGのみ -

    自動最適化 Next.js導入のメリット・デメリット 18 デメリット - 開発メンバーの学習コスト - SSR実現用のNode.js サーバーの運用・保守
  6. © DMM Next.js導入のメリット・デメリット 19 メリット - エンジニア採用に強くなる - SSRが活用できる -

    SSGのみ - 自動最適化 デメリット - 開発メンバーの学習コスト - SSR実現用のNode.js サーバーの運用・保守
  7. © DMM Next.js導入のメリット・デメリット 20 メリット - エンジニア採用に強くなる - SSRが活用できる -

    SSGのみ - 自動最適化 デメリット - 開発メンバーの学習コスト - SSR実現用のNode.js サーバーの運用・保守 導入してもしなくても 大差はない....
  8. © DMM Next.js導入のメリット・デメリット 23 メリット - エンジニア採用に強くなる - SSRが活用できる -

    SSGのみ - 自動最適化 デメリット - 開発メンバーの学習コスト - SSR実現用のNode.js サーバーの運用・保守
  9. © DMM Next.js導入のメリット・デメリット 24 メリット - エンジニア採用に強くなる - SSRが活用できる -

    SSGのみ - 自動最適化 - React公式が推奨 デメリット - 開発メンバーの学習コスト - SSR実現用のNode.js サーバーの運用・保守
  10. © DMM Next.js導入のメリット・デメリット 25 メリット - エンジニア採用に強くなる - SSRが活用できる -

    SSGのみ - 自動最適化 - React公式が推奨 デメリット - 開発メンバーの学習コスト - SSR実現用のNode.js サーバーの運用・保守 →Next.js導入が決定!
  11. © DMM Pages Router or App Router 26 - 静的レンダリングのみであれば、大きな違いは無い

    - 従来のPages Routerに詳しいメンバーがいるわけではない - 今後App Routerが主流になり、新規機能追加も見込める - 新機能の恩恵を受けたくなった時、AppRouterベースの方 が導入しやすい
  12. © DMM Pages Router or App Router 27 - 静的レンダリングのみであれば、大きな違いは無い

    - 従来のPages Routerに詳しいメンバーがいるわけではない - 今後App Routerが主流になり、新規機能追加も見込める - 新機能の恩恵を受けたくなった時、AppRouterベースの方 が導入しやすい → App Routerベースで開発
  13. © DMM 状態管理ライブラリの技術選定 31 - チームでは長くReduxが使われている - 最近は Recoil, Jotai,

    Zustand 等が勢いがあると聞く - → なんと無く 脱Reduxしたい気がする...?
  14. © DMM 状態管理ライブラリの技術選定 32 - チームでは長くReduxが使われている - 最近は Recoil, Jotai,

    Zustand 等が勢いがあると聞く → なんと無く 脱Reduxしたい気がする...? 乗り換え先の選択肢も多く Reduxのデメリットも言語化できない... →
  15. © DMM 状態管理ライブラリの技術選定 34 - Jotai - Recoil - Redux

    - Zustand これまで使っていたReduxを引き続き使う