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

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

by 井内将俊

Speaker Deck

Tweet

Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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