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

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

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

Transcript

1. © DMM Reactメインのチームに Next.jsを導入した道のり ペンギン丸 (井内 将俊)
2. © DMM 自己紹介 井内将俊(いうち　まさとし) X：@pengin_engineer (ペンギン丸) 合同会社DMM.com　( 23新卒 ) バーチャルライブ配信サービス → フロントエンド 開発 2
3. © DMM 発表の主題 3 - 新規開発プロダクトの技術選定事例の紹介 - ReactメインでNext.js導入事例のないチーム - Reactで大きな課題は感じていない - 話す分野 - ReactとNext.js - Next.jsのAppRouterとPagesRouter - (Reactの状態管理ライブラリ)
4. © DMM プロダクト構成のざっくり紹介 4 モノレポ React フロント PHP フロント 配信者 視聴者
5. © DMM プロダクト構成のざっくり紹介 5 モノレポ React フロント PHP フロント 配信者 視聴者
6. © DMM プロダクト構成のざっくり紹介 6 モノレポ React フロント PHP フロント 配信者 視聴者 サブ機能 新規リポジトリ NEW
7. © DMM 前提となるシチュエーション 7 - チーム全体でフロントエンドはReact - 5年ほど前のリプレースでReactが導入されそのまま - 視聴者が使うわけではなく、配信者が使う - SEOは不要、パフォーマンスの優先度もそれほど高くない - 長期的に安定稼働させていきたい - 新規サブ機能も他と同に素のReact実装を想定
8. © DMM React前提からNext.jsを採用するメリット 8 - 新しい技術に興味のあるエンジニア採用に強くなる - 新卒研修でも使用しているNext.jsを採用しイメージ向上 - 内蔵された最適化機能 - ルーティング、プリフェッチ、画像最適化などが デフォルトでされており、設定が楽 - パフォーマンス向上が見込めるSSRが活用できる
9. © DMM React前提からNext.jsを採用する課題 9 - 開発メンバーの学習コスト - SSRを実現するためのNode.jsサーバーの運用・保守 - インフラ構成が大きく変わる
10. © DMM React前提からNext.jsを採用する課題 10 - 開発メンバーの学習コスト - SSRを実現するためのNode.jsサーバーの運用・保守 - インフラ構成が大きく変わる メリットがコストを 上回ることを説得する必要がある🤔
11. © DMM SSRを行うメリット 11 - SEOの改善、共有時の動的OGP - パフォーマンス改善 - 初期ページのロード時間の短縮 - 事前データ取得
12. © DMM SSRを行うメリット 12 - SEOの改善、共有時の動的OGP - パフォーマンス改善 - 初期ページのロード時間の短縮 - 事前データ取得 現状では 特段必要ない
13. © DMM SSRを行うメリット 13 - SEOの改善、共有時の動的OGP - パフォーマンス改善 - 初期ページのロード時間の短縮 - 事前データ取得 恩恵よりもコストの方が大きくなることがある 現状では 特段必要ない
14. © DMM 動的レンダリングを行わないNext.js 14 - 現状Reactで問題なく稼働している - SSRによる恩恵よりも、Node.jsサーバー導入コストが勝る
15. © DMM 動的レンダリングを行わないNext.js 15 - 現状Reactで問題なく稼働している - SSRによる恩恵よりも、Node.jsサーバー導入コストが勝る 静的レンダリングのみのNext.jsであれば 導入できるのでは？🤔
16. © DMM 動的レンダリングを行わないNext.js 16 - next.config.jsにoutput:”export”と指定すれば、設定可能 - SSG - ルーティング等の最適化設定 SSRができなくても以下の恩恵は得られる
17. © DMM Next.js導入のメリット・デメリット 17 メリット - エンジニア採用に強くなる - SSRが活用できる - 自動最適化 デメリット - 開発メンバーの学習コスト - SSR実現用のNode.js サーバーの運用・保守
18. © DMM メリット - エンジニア採用に強くなる - SSRが活用できる - SSGのみ - 自動最適化 Next.js導入のメリット・デメリット 18 デメリット - 開発メンバーの学習コスト - SSR実現用のNode.js サーバーの運用・保守
19. © DMM Next.js導入のメリット・デメリット 19 メリット - エンジニア採用に強くなる - SSRが活用できる - SSGのみ - 自動最適化 デメリット - 開発メンバーの学習コスト - SSR実現用のNode.js サーバーの運用・保守
20. © DMM Next.js導入のメリット・デメリット 20 メリット - エンジニア採用に強くなる - SSRが活用できる - SSGのみ - 自動最適化 デメリット - 開発メンバーの学習コスト - SSR実現用のNode.js サーバーの運用・保守 導入してもしなくても 大差はない....
21. © DMM Next.jsを採用するメリット 21 引用：React公式ドキュメント
22. © DMM Next.jsを採用するメリット 22 引用：React公式ドキュメント
23. © DMM Next.js導入のメリット・デメリット 23 メリット - エンジニア採用に強くなる - SSRが活用できる - SSGのみ - 自動最適化 デメリット - 開発メンバーの学習コスト - SSR実現用のNode.js サーバーの運用・保守
24. © DMM Next.js導入のメリット・デメリット 24 メリット - エンジニア採用に強くなる - SSRが活用できる - SSGのみ - 自動最適化 - React公式が推奨 デメリット - 開発メンバーの学習コスト - SSR実現用のNode.js サーバーの運用・保守
25. © DMM Next.js導入のメリット・デメリット 25 メリット - エンジニア採用に強くなる - SSRが活用できる - SSGのみ - 自動最適化 - React公式が推奨 デメリット - 開発メンバーの学習コスト - SSR実現用のNode.js サーバーの運用・保守 →Next.js導入が決定！
26. © DMM Pages Router or App Router 26 - 静的レンダリングのみであれば、大きな違いは無い - 従来のPages Routerに詳しいメンバーがいるわけではない - 今後App Routerが主流になり、新規機能追加も見込める - 新機能の恩恵を受けたくなった時、AppRouterベースの方 が導入しやすい
27. © DMM Pages Router or App Router 27 - 静的レンダリングのみであれば、大きな違いは無い - 従来のPages Routerに詳しいメンバーがいるわけではない - 今後App Routerが主流になり、新規機能追加も見込める - 新機能の恩恵を受けたくなった時、AppRouterベースの方 が導入しやすい → App Routerベースで開発
28. © DMM まとめ 28 - Reactを前提としていたプロダクトにNode.jsサーバーを用いた 動的レンダリングを行うNext.js採用はハードルが高い - 一方、静的レンダリングのみのNext.jsであれば大きな障壁なく 導入することが可能 - React公式でもフレームワークの活用を推奨 - 新規開発での素のReact採用は減少すると思われる
29. © DMM おまけ：状態管理ライブラリはどうしよう...?
30. © DMM 状態管理ライブラリの技術選定 30 - チームでは長くReduxが使われている - 最近は Recoil, Jotai, Zustand 等が勢いがあると聞く
31. © DMM 状態管理ライブラリの技術選定 31 - チームでは長くReduxが使われている - 最近は Recoil, Jotai, Zustand 等が勢いがあると聞く - → なんと無く 脱Reduxしたい気がする...?
32. © DMM 状態管理ライブラリの技術選定 32 - チームでは長くReduxが使われている - 最近は Recoil, Jotai, Zustand 等が勢いがあると聞く → なんと無く 脱Reduxしたい気がする...? 乗り換え先の選択肢も多く Reduxのデメリットも言語化できない... →
33. © DMM 状態管理ライブラリの技術選定 33 - Jotai - Recoil - Redux - Zustand
34. © DMM 状態管理ライブラリの技術選定 34 - Jotai - Recoil - Redux - Zustand これまで使っていたReduxを引き続き使う
35. © DMM おわりに 35 - 乗り換える技術選定では、学習コストに見合うメリット の提示が必要 - 技術選定のタイミングになってから検証していては時間が足 りない - 常日頃からのキャッチアップが必要 - 先輩や同期に頼り、知見を聞かせてもらうことも大切
36. © DMM ご静聴ありがとうございました！