Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ReactメインのチームにNext.jsを導入した道のり
Search
井内 将俊
November 17, 2023
1
2.5k
ReactメインのチームにNext.jsを導入した道のり
2023年11月18日(土) に登壇したフロントエンドカンファレンスの登壇資料となります。
https://frontend-conf.okinawa.jp/
井内 将俊
November 17, 2023
Tweet
Share
More Decks by 井内 将俊
See All by 井内 将俊
Next.js 採用の説得材料を考える
iuchimasatoshi
0
110
新卒研修でNext.js AppRouterを導入した 学びと反省
iuchimasatoshi
3
1.9k
Featured
See All Featured
Writing Fast Ruby
sferik
627
61k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
A Tale of Four Properties
chriscoyier
156
23k
Six Lessons from altMBA
skipperchong
27
3.5k
What's new in Ruby 2.0
geeforr
343
31k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Fireside Chat
paigeccino
34
3k
Become a Pro
speakerdeck
PRO
25
5k
Transcript
© DMM Reactメインのチームに Next.jsを導入した道のり ペンギン丸 (井内 将俊)
© DMM 自己紹介 井内将俊(いうち まさとし) X:@pengin_engineer (ペンギン丸) 合同会社DMM.com ( 23新卒 ) バーチャルライブ配信サービス
→ フロントエンド 開発 2
© DMM 発表の主題 3 - 新規開発プロダクトの技術選定事例の紹介 - ReactメインでNext.js導入事例のないチーム - Reactで大きな課題は感じていない
- 話す分野 - ReactとNext.js - Next.jsのAppRouterとPagesRouter - (Reactの状態管理ライブラリ)
© DMM プロダクト構成のざっくり紹介 4 モノレポ React フロント PHP フロント 配信者
視聴者
© DMM プロダクト構成のざっくり紹介 5 モノレポ React フロント PHP フロント 配信者
視聴者
© DMM プロダクト構成のざっくり紹介 6 モノレポ React フロント PHP フロント 配信者
視聴者 サブ機能 新規リポジトリ NEW
© DMM 前提となるシチュエーション 7 - チーム全体でフロントエンドはReact - 5年ほど前のリプレースでReactが導入されそのまま - 視聴者が使うわけではなく、配信者が使う
- SEOは不要、パフォーマンスの優先度もそれほど高くない - 長期的に安定稼働させていきたい - 新規サブ機能も他と同に素のReact実装を想定
© DMM React前提からNext.jsを採用するメリット 8 - 新しい技術に興味のあるエンジニア採用に強くなる - 新卒研修でも使用しているNext.jsを採用しイメージ向上 - 内蔵された最適化機能
- ルーティング、プリフェッチ、画像最適化などが デフォルトでされており、設定が楽 - パフォーマンス向上が見込めるSSRが活用できる
© DMM React前提からNext.jsを採用する課題 9 - 開発メンバーの学習コスト - SSRを実現するためのNode.jsサーバーの運用・保守 - インフラ構成が大きく変わる
© DMM React前提からNext.jsを採用する課題 10 - 開発メンバーの学習コスト - SSRを実現するためのNode.jsサーバーの運用・保守 - インフラ構成が大きく変わる
メリットがコストを 上回ることを説得する必要がある🤔
© DMM SSRを行うメリット 11 - SEOの改善、共有時の動的OGP - パフォーマンス改善 - 初期ページのロード時間の短縮
- 事前データ取得
© DMM SSRを行うメリット 12 - SEOの改善、共有時の動的OGP - パフォーマンス改善 - 初期ページのロード時間の短縮
- 事前データ取得 現状では 特段必要ない
© DMM SSRを行うメリット 13 - SEOの改善、共有時の動的OGP - パフォーマンス改善 - 初期ページのロード時間の短縮
- 事前データ取得 恩恵よりもコストの方が大きくなることがある 現状では 特段必要ない
© DMM 動的レンダリングを行わないNext.js 14 - 現状Reactで問題なく稼働している - SSRによる恩恵よりも、Node.jsサーバー導入コストが勝る
© DMM 動的レンダリングを行わないNext.js 15 - 現状Reactで問題なく稼働している - SSRによる恩恵よりも、Node.jsサーバー導入コストが勝る 静的レンダリングのみのNext.jsであれば 導入できるのでは?🤔
© DMM 動的レンダリングを行わないNext.js 16 - next.config.jsにoutput:”export”と指定すれば、設定可能 - SSG - ルーティング等の最適化設定
SSRができなくても以下の恩恵は得られる
© DMM Next.js導入のメリット・デメリット 17 メリット - エンジニア採用に強くなる - SSRが活用できる -
自動最適化 デメリット - 開発メンバーの学習コスト - SSR実現用のNode.js サーバーの運用・保守
© DMM メリット - エンジニア採用に強くなる - SSRが活用できる - SSGのみ -
自動最適化 Next.js導入のメリット・デメリット 18 デメリット - 開発メンバーの学習コスト - SSR実現用のNode.js サーバーの運用・保守
© DMM Next.js導入のメリット・デメリット 19 メリット - エンジニア採用に強くなる - SSRが活用できる -
SSGのみ - 自動最適化 デメリット - 開発メンバーの学習コスト - SSR実現用のNode.js サーバーの運用・保守
© DMM Next.js導入のメリット・デメリット 20 メリット - エンジニア採用に強くなる - SSRが活用できる -
SSGのみ - 自動最適化 デメリット - 開発メンバーの学習コスト - SSR実現用のNode.js サーバーの運用・保守 導入してもしなくても 大差はない....
© DMM Next.jsを採用するメリット 21 引用:React公式ドキュメント
© DMM Next.jsを採用するメリット 22 引用:React公式ドキュメント
© DMM Next.js導入のメリット・デメリット 23 メリット - エンジニア採用に強くなる - SSRが活用できる -
SSGのみ - 自動最適化 デメリット - 開発メンバーの学習コスト - SSR実現用のNode.js サーバーの運用・保守
© DMM Next.js導入のメリット・デメリット 24 メリット - エンジニア採用に強くなる - SSRが活用できる -
SSGのみ - 自動最適化 - React公式が推奨 デメリット - 開発メンバーの学習コスト - SSR実現用のNode.js サーバーの運用・保守
© DMM Next.js導入のメリット・デメリット 25 メリット - エンジニア採用に強くなる - SSRが活用できる -
SSGのみ - 自動最適化 - React公式が推奨 デメリット - 開発メンバーの学習コスト - SSR実現用のNode.js サーバーの運用・保守 →Next.js導入が決定!
© DMM Pages Router or App Router 26 - 静的レンダリングのみであれば、大きな違いは無い
- 従来のPages Routerに詳しいメンバーがいるわけではない - 今後App Routerが主流になり、新規機能追加も見込める - 新機能の恩恵を受けたくなった時、AppRouterベースの方 が導入しやすい
© DMM Pages Router or App Router 27 - 静的レンダリングのみであれば、大きな違いは無い
- 従来のPages Routerに詳しいメンバーがいるわけではない - 今後App Routerが主流になり、新規機能追加も見込める - 新機能の恩恵を受けたくなった時、AppRouterベースの方 が導入しやすい → App Routerベースで開発
© DMM まとめ 28 - Reactを前提としていたプロダクトにNode.jsサーバーを用いた 動的レンダリングを行うNext.js採用はハードルが高い - 一方、静的レンダリングのみのNext.jsであれば大きな障壁なく 導入することが可能
- React公式でもフレームワークの活用を推奨 - 新規開発での素のReact採用は減少すると思われる
© DMM おまけ:状態管理ライブラリはどうしよう...?
© DMM 状態管理ライブラリの技術選定 30 - チームでは長くReduxが使われている - 最近は Recoil, Jotai,
Zustand 等が勢いがあると聞く
© DMM 状態管理ライブラリの技術選定 31 - チームでは長くReduxが使われている - 最近は Recoil, Jotai,
Zustand 等が勢いがあると聞く - → なんと無く 脱Reduxしたい気がする...?
© DMM 状態管理ライブラリの技術選定 32 - チームでは長くReduxが使われている - 最近は Recoil, Jotai,
Zustand 等が勢いがあると聞く → なんと無く 脱Reduxしたい気がする...? 乗り換え先の選択肢も多く Reduxのデメリットも言語化できない... →
© DMM 状態管理ライブラリの技術選定 33 - Jotai - Recoil - Redux
- Zustand
© DMM 状態管理ライブラリの技術選定 34 - Jotai - Recoil - Redux
- Zustand これまで使っていたReduxを引き続き使う
© DMM おわりに 35 - 乗り換える技術選定では、学習コストに見合うメリット の提示が必要 - 技術選定のタイミングになってから検証していては時間が足 りない
- 常日頃からのキャッチアップが必要 - 先輩や同期に頼り、知見を聞かせてもらうことも大切
© DMM ご静聴ありがとうございました!