研修で学んだリクエスト毎に ページのレンダー方法を変える小技

フロントエンド研修で学んだCSRとSSRをリクエストごとに切り替えて、パフォーマンスやコスト、SEOを良くする技術の説明

Transcript

1. © DMM CONFIDENTIAL 研修で学んだリクエスト毎に ページのレンダー方法を変える小技 SEOがちょこっと良くなる LC開発部 一ノ瀬 裕斗 2025/09/18
2. 目次 2 1. 自己紹介 2. 研修の話 3. CSRとSSRのおさらいと使い分けの例 4. まとめ
3. 自己紹介 3 名前： 一ノ瀬 裕斗 所属： LCのフロントエンドエンジニア Next.jsへのリプレイス 趣味： お酒・シーシャ 最近： 社会人満喫してます🥹
4. 4 実は… まだ社会人として1ヶ月しか働いてない…🥹
5. 5 4月〜7月末の3ヶ月間の技術研修 FE・BE・Android・iOS・インフラ・クラウド・AIなど幅広く学んだ 8月まで研修でした！！
6. 6 Yatter演習でFE・BE・モバイルの開発！！ SNSアプリ「Yatter」を作りながらモダンな技術スタックを身につけた！ ↓自分が開発したYatter
7. 7 クラウドの研修を受けたり、社員食堂でランチ😋 Google・AWSのオフィスに見学！！
8. 8 スクラム研修のレゴブロックのグループワーク 最後にプロダクト発案をしてスクラムでチーム開発 スクラム研修やチーム開発！！
9. 9 長くてたくさんの学びと思い出になった研修 そこで学んだことを紹介！！
10. 10 リクエストによってレンダー方法（CSR・SSR） を変えなきゃいけない時ってある・・・！？
11. 11 扱うプロダクトによってはあるかも・・・？
12. 12 CSR • ブラウザにJSが読み込まれてからJSで画面を描画 ◦ 例：React・SPA ◦ クライアント側で処理 レンダー方法とは？（おさらい） SSR • サーバー側で生成したHTMLをユーザーに返す ◦ 例：Next.jsのgetServerSideProps（Page Router）、RSC（App Router） ◦ サーバー側で処理
13. 13 CSR • サーバー側の処理をクライアント側でするから表示速度（TTFB）は速い ◦ 一旦空のページを表示してから、クライアント側で REST APIからデータを取得する メリット SSR • コンテンツのデータなどをサーバー側で取得して最初から表示できる ◦ FCP/LCPは上がる ◦ サーバー側でREST APIやDBにアクセスしてデータを取得
14. 14 CSR • データやコンテンツの取得にワンテンポ遅れる ◦ 例：useEffectでデータフェッチとか、やりすぎると FCP/LCPとか下がる ◦ クローラーだとどんなコンテンツがあるか分からない デメリットもある SSR • サーバー側でのデータ取得に時間がかかるとページの読み込みが遅くなる ◦ TTFB下がる ◦ サーバーの負荷がかかるのでコスト増 ◦ コンテンツによってSSR/CSR組み合わせてデータを取得するのが良い
15. 15 研修で取り組んだ例を2つ紹介！！😎
16. 16 • CSRだとクローラーには内容が伝わらない ◦ SSRにすれば…？ ◦ クローラー・ユーザーからの全部のリクエストを SSRにするのはパフォーマンスやコスト的に良くない ◦ →普通のユーザーなら CSR・クローラーならSSRにすれば良いのでは？ クローラー判定
17. 17 RSC上で UAからクローラーか判定
18. 18 普通のユーザーからアクセスした時 投稿内容がクライアント側で取得される
19. 19 クローラー（偽装）からアクセスした時 投稿内容がサーバー側で取得される
20. 20 2018年3月、DMM.comの成人向け事業(現 FANZA)は株式会社デジタルコマース社に継 承されました。 ただし、システムの開発や運用、一部の営業業務はデジタルコマース社からDMM.comに 委託されており、プラットフォームはDMM.comが継続して提供することで合意しておりま す。 必読！！⚠
21. 21 2018年3月、DMM.comの成人向け事業(現 FANZA)は株式会社デジタルコマース社に継 承されました。 ただし、システムの開発や運用、一部の営業業務はデジタルコマース社からDMM.comに 委託されており、プラットフォームはDMM.comが継続して提供することで合意しておりま す。 必読！！⚠
22. 22 弊社には年齢確認が必要なコンテンツがあるので 試しに研修で年齢確認機能を作ってみました😆 年齢確認のページ
23. 23 • クローラー ◦ 普通のユーザーなら年齢確認・クローラーならページ表示 年齢確認 • Cookie（年確済みの状態保存） ◦ サーバー側でCookieがあるならページ表示、ないなら年齢確認
24. 24 RSC上でUAからクローラーか判定 Cookieを見て年齢確認済みか判定
25. UAがクローラーの時は表示しないように条件分岐 ←ユーザーアクセス時 年齢確認画面を表示 クローラーアクセス時→ 初期画面を表示
26. • ユーザー数が多く、コスト・パフォーマンス・SEOなど様々な要素を考慮しなければな らない ◦ そのためにCSRとSSRを使い分けている ◦ 例：RSC上でUAを判定してCSR/SSR切り替え 26 まとめ • ページで表示するコンテンツの特性に合わせてレンダー方法を使い分ける ◦ ブログページならSEO踏まえてSSR ◦ SNS系ならRSCで使い分け
27. ご清聴ありがとうございました