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

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

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

Transcript

1. © DMM
   Reactメインのチームに
   Next.jsを導入した道のり
   ペンギン丸 (井内 将俊)
   

   View Slide

2. © DMM
   自己紹介
   井内将俊(いうち　まさとし)
   X：@pengin_engineer (ペンギン丸)
   合同会社DMM.com　( 23新卒 )
   バーチャルライブ配信サービス →
   フロントエンド 開発
   2
   

   View Slide

3. © DMM
   発表の主題
   3
   - 新規開発プロダクトの技術選定事例の紹介
   - ReactメインでNext.js導入事例のないチーム
   - Reactで大きな課題は感じていない
   - 話す分野
   - ReactとNext.js
   - Next.jsのAppRouterとPagesRouter
   - (Reactの状態管理ライブラリ)
   

   View Slide

4. © DMM
   プロダクト構成のざっくり紹介
   4
   モノレポ
   React
   フロント
   PHP
   フロント
   配信者 視聴者
   

   View Slide

5. © DMM
   プロダクト構成のざっくり紹介
   5
   モノレポ
   React
   フロント
   PHP
   フロント
   配信者 視聴者
   

   View Slide

6. © DMM
   プロダクト構成のざっくり紹介
   6
   モノレポ
   React
   フロント
   PHP
   フロント
   配信者 視聴者
   サブ機能
   新規リポジトリ
   NEW
   

   View Slide

7. © DMM
   前提となるシチュエーション
   7
   - チーム全体でフロントエンドはReact
   - 5年ほど前のリプレースでReactが導入されそのまま
   - 視聴者が使うわけではなく、配信者が使う
   - SEOは不要、パフォーマンスの優先度もそれほど高くない
   - 長期的に安定稼働させていきたい
   - 新規サブ機能も他と同に素のReact実装を想定
   

   View Slide

8. © DMM
   React前提からNext.jsを採用するメリット
   8
   - 新しい技術に興味のあるエンジニア採用に強くなる
   - 新卒研修でも使用しているNext.jsを採用しイメージ向上
   - 内蔵された最適化機能
   - ルーティング、プリフェッチ、画像最適化などが
   デフォルトでされており、設定が楽
   - パフォーマンス向上が見込めるSSRが活用できる
   

   View Slide

9. © DMM
   React前提からNext.jsを採用する課題
   9
   - 開発メンバーの学習コスト
   - SSRを実現するためのNode.jsサーバーの運用・保守
   - インフラ構成が大きく変わる
   

   View Slide

10. © DMM
    React前提からNext.jsを採用する課題
    10
    - 開発メンバーの学習コスト
    - SSRを実現するためのNode.jsサーバーの運用・保守
    - インフラ構成が大きく変わる
    メリットがコストを
    上回ることを説得する必要がある🤔
    

    View Slide

11. © DMM
    SSRを行うメリット
    11
    - SEOの改善、共有時の動的OGP
    - パフォーマンス改善
    - 初期ページのロード時間の短縮
    - 事前データ取得
    

    View Slide

12. © DMM
    SSRを行うメリット
    12
    - SEOの改善、共有時の動的OGP
    - パフォーマンス改善
    - 初期ページのロード時間の短縮
    - 事前データ取得
    現状では
    特段必要ない
    

    View Slide

13. © DMM
    SSRを行うメリット
    13
    - SEOの改善、共有時の動的OGP
    - パフォーマンス改善
    - 初期ページのロード時間の短縮
    - 事前データ取得
    恩恵よりもコストの方が大きくなることがある
    現状では
    特段必要ない
    

    View Slide

14. © DMM
    動的レンダリングを行わないNext.js
    14
    - 現状Reactで問題なく稼働している
    - SSRによる恩恵よりも、Node.jsサーバー導入コストが勝る
    

    View Slide

15. © DMM
    動的レンダリングを行わないNext.js
    15
    - 現状Reactで問題なく稼働している
    - SSRによる恩恵よりも、Node.jsサーバー導入コストが勝る
    静的レンダリングのみのNext.jsであれば
    導入できるのでは？🤔
    

    View Slide

16. © DMM
    動的レンダリングを行わないNext.js
    16
    - next.config.jsにoutput:”export”と指定すれば、設定可能
    - SSG
    - ルーティング等の最適化設定
    SSRができなくても以下の恩恵は得られる
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. © DMM
    Next.jsを採用するメリット
    21
    引用：React公式ドキュメント
    

    View Slide

22. © DMM
    Next.jsを採用するメリット
    22
    引用：React公式ドキュメント
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

28. © DMM
    まとめ
    28
    - Reactを前提としていたプロダクトにNode.jsサーバーを用いた
    動的レンダリングを行うNext.js採用はハードルが高い
    - 一方、静的レンダリングのみのNext.jsであれば大きな障壁なく
    導入することが可能
    - React公式でもフレームワークの活用を推奨
    - 新規開発での素のReact採用は減少すると思われる
    

    View Slide

29. © DMM
    おまけ：状態管理ライブラリはどうしよう...?
    

    View Slide

30. © DMM
    状態管理ライブラリの技術選定
    30
    - チームでは長くReduxが使われている
    - 最近は Recoil, Jotai, Zustand 等が勢いがあると聞く
    

    View Slide

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

    View Slide

32. © DMM
    状態管理ライブラリの技術選定
    32
    - チームでは長くReduxが使われている
    - 最近は Recoil, Jotai, Zustand 等が勢いがあると聞く
    → なんと無く 脱Reduxしたい気がする...?
    乗り換え先の選択肢も多く
    Reduxのデメリットも言語化できない...
    →
    

    View Slide

33. © DMM
    状態管理ライブラリの技術選定
    33
    - Jotai
    - Recoil
    - Redux
    - Zustand
    

    View Slide

34. © DMM
    状態管理ライブラリの技術選定
    34
    - Jotai
    - Recoil
    - Redux
    - Zustand
    これまで使っていたReduxを引き続き使う
    

    View Slide

35. © DMM
    おわりに
    35
    - 乗り換える技術選定では、学習コストに見合うメリット
    の提示が必要
    - 技術選定のタイミングになってから検証していては時間が足
    りない
    - 常日頃からのキャッチアップが必要
    - 先輩や同期に頼り、知見を聞かせてもらうことも大切
    

    View Slide

36. © DMM
    ご静聴ありがとうございました！
    

    View Slide