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

by 一ノ瀬裕斗

Embed

Start on current slide

Slide 1

Slide 1 text

Slide 2

Slide 2 text

目次 2 1. 自己紹介 2. 研修の話 3. CSRとSSRのおさらいと使い分けの例 4. まとめ

Slide 3

Slide 3 text

自己紹介 3 名前：一ノ瀬裕斗所属： LCのフロントエンドエンジニア Next.jsへのリプレイス趣味：お酒・シーシャ最近：社会人満喫してます🥹

Slide 4

Slide 4 text

4 実は… まだ社会人として1ヶ月しか働いてない…🥹

Slide 5

Slide 5 text

5 4月〜7月末の3ヶ月間の技術研修 FE・BE・Android・iOS・インフラ・クラウド・AIなど幅広く学んだ 8月まで研修でした！！

Slide 6

Slide 6 text

6 Yatter演習でFE・BE・モバイルの開発！！ SNSアプリ「Yatter」を作りながらモダンな技術スタックを身につけた！ ↓自分が開発したYatter

Slide 7

Slide 7 text

7 クラウドの研修を受けたり、社員食堂でランチ😋 Google・AWSのオフィスに見学！！

Slide 8

Slide 8 text

8 スクラム研修のレゴブロックのグループワーク最後にプロダクト発案をしてスクラムでチーム開発スクラム研修やチーム開発！！

Slide 9

Slide 9 text

9 長くてたくさんの学びと思い出になった研修そこで学んだことを紹介！！

Slide 10

Slide 10 text

10 リクエストによってレンダー方法（CSR・SSR）を変えなきゃいけない時ってある・・・！？

Slide 11

Slide 11 text

11 扱うプロダクトによってはあるかも・・・？

Slide 12

Slide 12 text

12 CSR ● ブラウザにJSが読み込まれてからJSで画面を描画 ○ 例：React・SPA ○ クライアント側で処理レンダー方法とは？（おさらい） SSR ● サーバー側で生成したHTMLをユーザーに返す ○ 例：Next.jsのgetServerSideProps（Page Router）、RSC（App Router） ○ サーバー側で処理

Slide 13

Slide 13 text

13 CSR ● サーバー側の処理をクライアント側でするから表示速度（TTFB）は速い ○ 一旦空のページを表示してから、クライアント側で REST APIからデータを取得するメリット SSR ● コンテンツのデータなどをサーバー側で取得して最初から表示できる ○ FCP/LCPは上がる ○ サーバー側でREST APIやDBにアクセスしてデータを取得

Slide 14

Slide 14 text

14 CSR ● データやコンテンツの取得にワンテンポ遅れる ○ 例：useEffectでデータフェッチとか、やりすぎると FCP/LCPとか下がる ○ クローラーだとどんなコンテンツがあるか分からないデメリットもある SSR ● サーバー側でのデータ取得に時間がかかるとページの読み込みが遅くなる ○ TTFB下がる ○ サーバーの負荷がかかるのでコスト増 ○ コンテンツによってSSR/CSR組み合わせてデータを取得するのが良い

Slide 15

Slide 15 text

15 研修で取り組んだ例を2つ紹介！！😎

Slide 16

Slide 16 text

16 ● CSRだとクローラーには内容が伝わらない ○ SSRにすれば…？ ○ クローラー・ユーザーからの全部のリクエストを SSRにするのはパフォーマンスやコスト的に良くない ○ →普通のユーザーなら CSR・クローラーならSSRにすれば良いのでは？クローラー判定

Slide 17

Slide 17 text

17 RSC上で UAからクローラーか判定

Slide 18

Slide 18 text

18 普通のユーザーからアクセスした時投稿内容がクライアント側で取得される

Slide 19

Slide 19 text

19 クローラー（偽装）からアクセスした時投稿内容がサーバー側で取得される

Slide 20

Slide 20 text

20 2018年3月、DMM.comの成人向け事業(現 FANZA)は株式会社デジタルコマース社に継承されました。ただし、システムの開発や運用、一部の営業業務はデジタルコマース社からDMM.comに委託されており、プラットフォームはDMM.comが継続して提供することで合意しております。必読！！⚠

Slide 21

Slide 21 text

21 2018年3月、DMM.comの成人向け事業(現 FANZA)は株式会社デジタルコマース社に継承されました。ただし、システムの開発や運用、一部の営業業務はデジタルコマース社からDMM.comに委託されており、プラットフォームはDMM.comが継続して提供することで合意しております。必読！！⚠

Slide 22

Slide 22 text

22 弊社には年齢確認が必要なコンテンツがあるので試しに研修で年齢確認機能を作ってみました😆 年齢確認のページ

Slide 23

Slide 23 text

23 ● クローラー ○ 普通のユーザーなら年齢確認・クローラーならページ表示年齢確認 ● Cookie（年確済みの状態保存） ○ サーバー側でCookieがあるならページ表示、ないなら年齢確認

Slide 24

Slide 24 text

24 RSC上でUAからクローラーか判定 Cookieを見て年齢確認済みか判定

Slide 25

Slide 25 text

UAがクローラーの時は表示しないように条件分岐 ←ユーザーアクセス時年齢確認画面を表示クローラーアクセス時→ 初期画面を表示

Slide 26

Slide 26 text

● ユーザー数が多く、コスト・パフォーマンス・SEOなど様々な要素を考慮しなければならない ○ そのためにCSRとSSRを使い分けている ○ 例：RSC上でUAを判定してCSR/SSR切り替え 26 まとめ ● ページで表示するコンテンツの特性に合わせてレンダー方法を使い分ける ○ ブログページならSEO踏まえてSSR ○ SNS系ならRSCで使い分け

Slide 27

Slide 27 text

ご清聴ありがとうございました