純SPAでNext.jsに対抗する〜ページによってmetaタグを切り替える編〜

by kiyoshiro

Embed

Start on current slide

Slide 1

Slide 1 text

純SPAでNext.jsに対抗する〜ページによってmetaタグを切り替える編〜清川航⼀

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

© DMM.com (色々あるけど、今回取り上げるのは)   「ページによってmetaタグを切り替える」  metaタグの例：  • Next.jsではページごとにHTMLを生成するのが簡単  /users → users.html  /posts → posts.html    • 純SPAだと、基本的にページによらずひとつのindex.htmlを使う  /users → index.html  /posts → index.html    純SPAだとムズいこと 

Slide 8

Slide 8 text

© DMM.com 純SPAの課題に直面する例  󰞵Webアプリケーションのフロントエンドを開発することになりました  󰢏とくにSEOや初回表示速度が重要なわけでもないので、純SPAでつくることに  ✅開発も終盤にさしかかってそろそろリリースできるかと思った矢先、  「SNSで共有されたときのために、  ページによってmetaタグ変えたい」  という要件がでてきました。。。  ※󰢃最初からNext.jsを採用しておけというツッコミはNG  

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

© DMM.com 「ページによってmetaタグを変えたい」の解像度を上げる  • 動的か静的かの2種類に分類できる            • 静的のほうがインフラ構成などが楽  動的  静的  パターン数が多すぎて事前生成ができないのでリクエスト時に実行する     例：/posts/1, /posts/2, …/posts/9999   でmetaタグを変える   パターン数が少なく事前生成できる     例：/aboutだけmetaタグを変える  

Slide 13

Slide 13 text

© DMM.com 4種類の方法一覧    動的(リクエスト時に実行)   静的(ビルド時に実行)   方法  dynamic rendering  head-only SSR  head-only SG  static prerendering  概要  ？  ？  ？  ？  インフラ  構築難度  ？  ？  ？  ？  保守難度  ？  ？  ？  ？  その他          ※dynamic-rendering以外の名称は自分が適当に考えました

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

© DMM.com 方法１：dynamic rendering  😩BAD  • 最初にインフラ構築するのが大変  bot判定・ユーザーとbotでキャッシュの分離・ヘッドレスブラウザの実行etc…   • Google曰く、インフラが複雑になるので「回避策」  • 回避策としてのダイナミックレンダリング | Google 検索セントラル  • Next.jsとかのSSRと比べてレスポンスが遅くなりがち      • Google Botへのレスポンスが遅くなると SEOに悪影響が(CoreWebVitals)  • CloudFrontなどCDNのstale-while-revalidate機能を使うと軽減できそう     ※キャッシュヒットしなかったとき

Slide 20

Slide 20 text

Slide 21

Slide 21 text

© DMM.com 4種類の方法一覧    動的(リクエスト時に実行)   静的(ビルド時に実行)   方法  dynamic rendering  head-only SSR  head-only SG  static prerendering  概要  botからアクセスされたときだけヘッドレスブラウザでレンダリングしたHTMLを返却  ？  ？  ？  インフラ  構築難度  ✕難  ？  ？  ？  保守難度  ◎必要なし  ？  ？  ？  その他  😄ページコンテンツもレンダリング  😩不安定で遅い       

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

© DMM.com 4種類の方法一覧    動的(リクエスト時に実行)   静的(ビルド時に実行)   方法  dynamic rendering  head-only SSR  head-only SG  static prerendering  概要  botからアクセスされたときだけヘッドレスブラウザでレンダリングしたHTMLを返却  エッジ関数でmeta タグを注入した HTMLを返却  ？  ？  インフラ  構築難度  ✕難  △微難  ？  ？  保守難度  ◎必要なし  ✕大変  ？  ？  その他  😄ページコンテンツもレンダリング  😩不安定で遅い       

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

© DMM.com 4種類の方法一覧    動的(リクエスト時に実行)   静的(ビルド時に実行)   方法  dynamic rendering  head-only SSR  head-only SG  static prerendering  概要  botからアクセスされたときだけヘッドレスブラウザでレンダリングしたHTMLを返却  エッジ関数でmeta タグを注入した HTMLを返却  ビルド時にmetaタグを注入したHTMLをつくる   ？  インフラ  構築難度  ✕難  △微難  ◯簡単  ？  保守難度  ◎必要なし  ✕大変  △普通    ?  その他  😄ページコンテンツもレンダリング  😩不安定で遅い       

Slide 34

Slide 34 text

© DMM.com 4種類の方法一覧    動的(リクエスト時に実行)   静的(ビルド時に実行)   方法  dynamic rendering  head-only SSR  head-only SG  static prerendering  概要  botからアクセスされたときだけヘッドレスブラウザでレンダリングしたHTMLを返却  エッジ関数でmeta タグを注入した HTMLを返却  ビルド時にmetaタグを注入したHTMLをつくる   ？  インフラ  構築難度  ✕難  △微難  ◯簡単  ？  保守難度  ◎必要なし  ✕大変  △普通    ?  その他  😄ページコンテンツもレンダリング  😩不安定で遅い       

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

© DMM.com 方法４：static prerendering  😄GOOD  • head-only SGと同様、インフラ構成は楽  • Botからのアクセス時に/aboutへのリクエストを/about.htmlにルーティングするだけ  • SEO：ページコンテンツもレンダリングできる  😩BAD  • 保守性：アプリコードとは別で、ヘッドレスブラウザを実行するスクリプトを保守する必要あり  • ビルド時間：ヘッドレスブラウザを動かす分、時間がかかる   

Slide 39

Slide 39 text

© DMM.com 4種類の方法一覧    動的(リクエスト時に実行)   静的(ビルド時に実行)   方法  dynamic rendering  head-only SSR  head-only SG  static prerendering  概要  botからアクセスされたときだけヘッドレスブラウザでレンダリングしたHTMLを返却  エッジ関数でmeta タグを注入した HTMLを返却  ビルド時にmetaタグを注入したHTMLをつくる   ビルド時にヘッドレスブラウザでHTMLを生成する  インフラ  構築難度  ✕難  △微難  ◯簡単  ◯簡単  保守難度  ◎必要なし  ✕大変  △普通  △普通  その他  😄ページコンテンツもレンダリング  😩不安定で遅い      😄ページコンテンツもレンダリング   

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text