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
SPA・SSGでSSRのようなOGP対応!
Search
Simo
January 24, 2023
Technology
2
1.5k
SPA・SSGでSSRのようなOGP対応!
Cloudflare WorkersでSPA・SSGでもSSRのようなOGP対応が出来るようになる!SPA・SSGがSEOに弱いというのは間違いです!
Simo
January 24, 2023
Tweet
Share
More Decks by Simo
See All by Simo
コロナ禍で経験したチーム開発と学びについて(excite × C3合同LT会)
simo123
0
77
コンテナ技術とVPSでのデプロイの基本的
simo123
0
180
Other Decks in Technology
See All in Technology
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
7.6k
B2C&B2B&社内向けサービスを抱える開発組織におけるサービス価値を最大化するイニシアチブ管理
belongadmin
1
5.6k
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
410
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
260
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
360
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
smiyawaki0820
1
490
Geminiとv0による高速プロトタイピング
shinya337
0
230
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
120
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.4k
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
950
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
1.7k
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
310
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Facilitating Awesome Meetings
lara
54
6.4k
Designing for Performance
lara
610
69k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Bash Introduction
62gerente
614
210k
Agile that works and the tools we love
rasmusluckow
329
21k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
Making the Leap to Tech Lead
cromwellryan
134
9.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Transcript
SPA・SSGでSSRのようなOGP対応! Serverless Frontend Meetup #1 2023.01.24
名前︓シモ 所属︓九州⼯業⼤学 B3 プログラミング歴︓もうすぐ2年半ぐらい 分野︓フロントエンド、バックエンド、インフラ、SEO、(デザイン) よく使う⾔語︓Python、JavaScript、TypeScript、Java、HTML、CSS、etc よく使う技術・フレームワーク︓ Nuxt(Vue)、FastAPI、Docker、Nginx、etc 自己紹介 アイコン
→
アルバイト︓株式会社オプティム インターン歴︓株式会社ヤフー、株式会社エキサイト 最近の⼿を出しているもの︓機械学習(絶賛勉強中)、React、Go、Flatter 最近やってること︓部内の作品投稿サイトの制作・運⽤・保守 自己紹介
ToyBox 様々なデジタル作品に対応した投稿ウェブアプリ 対応形式:画像、動画、3Dモデル、⾳源、圧縮ファイル 公開範囲:全体、部内、個⼈ リリース状況:β版 リンク
サービスアーキテクチャー SSG
前提 • サークルのサービス • 予算がほぼない 条件 • 可能な限り無料枠 • 有料でも可能な限り低コスト
• 既存のインフラと共存 サービス選定と理由 サービス 理由 Cloudflare 既にDNSに利⽤していた Wasabi ストレージの保存容量に対してのみ料⾦が発⽣。 通信等でコストが掛からないため低コストで定 額である。 Conoha VPS 既に別サービスの運⽤に使⽤していたため相乗 りの形で使⽤することで追加のコストが掛から ない フロントは今後Github Pagesに移管予定 リポジトリをOrganizationアカウントで管理しているためVercelなどではコストが発⽣する
• エッジサーバーでのスクリプト実⾏を提供してくれているサービス • オリジンサーバーに到達する前に処理を⾏う • コールドスタートがない • JavaScript、Rust、C、C++が実⾏可能 • CDN上で動作
Cloudflare Workers 「CDNとは何か?| CDNの仕組みは?」cloudflare https://www.cloudflare.com/ja-jp/learning/cdn/what-is-a-cdn/
SPA (Single Page Application) 1. 初回アクセス時にJSファイルと最⼩限のHTMLファイルを返却 2. クライアントからAPIにリクエストを⾏いデータ取得・表⽰ 特徴 •
クライアントのみでJSを実⾏ • 返却時点ではHTML内にコンテンツデータは存在しない • ページ遷移が⾼速、デプロイが⼿軽、UXが強い、静的ホスティングが可能、などの利点がある • 初回読み込みに時間が掛かる、SEOに不利、などの⽋点がある SPA・SSG・SSR 「SPA, SSR, SSGって結局なんなんだっけ?| CDNの仕組みは?」Zenn https://zenn.dev/rinda_1994/articles/e6d8e3150b312d
SSR (Server Side Rendering) 1. ページ遷移毎にウェブサーバー側でAPIでのデータ取得と レンダリングを⾏い、⽣成されたHTMLを返却 2. 2回⽬以降のアクセス時はクライアントからデータ取得を⾏い、差分をレンダリング 特徴
• ページ遷移毎にウェブサーバーでJSを実⾏ • 返却時点でHTML内にコンテンツデータが存在 • 初回表⽰がSPAに⽐べて早い、SEOに強い、などの利点がある • デプロイ環境の⾼コスト、ウェブサーバーの⾼負荷、静的ホスティングできない、などの⽋ 点がある SPA・SSG・SSR 「SPA, SSR, SSGって結局なんなんだっけ?| CDNの仕組みは?」Zenn https://zenn.dev/rinda_1994/articles/e6d8e3150b312d
SSG (Static Site Generator) 1. ビルド時にAPIからデータを取得し、レンダリングを⾏う 2. リクエストに対してビルド時に⽣成したHTMLを返却 3. 2回⽬以降のアクセス時はクライアントからデータ取得を⾏い、差分をレンダリング
特徴 • クライアントでJSを実⾏(ビルド時のみウェブサーバー側で実⾏) • 返却時点でHTML内にコンテンツデータ(最新とは限らない)が存在 • SPAとSSGの特徴を併せ持つ • 初回表⽰が早い、SPAよりはSEOに強い、静的ホスティングが可能、などの利点がある • ページ数に応じてビルド時間が増える、更新頻度が多いサイトは不向き、などの⽋点がある SPA・SSG・SSR 「SPA, SSR, SSGって結局なんなんだっけ?| CDNの仕組みは?」Zenn https://zenn.dev/rinda_1994/articles/e6d8e3150b312d
• TwitterやFacebookなどでウェブページのタイトルや概要、 イメージ画像、などを表⽰するためのHTML要素 • SEOで重要 • TwitterやFacebookなどのOGPクライアントはJSを実⾏してく れない • SPAやSSGは最新の情報はクライアントのJS実⾏時に取得する
ため正しい表⽰ができない OGP (Open Graph Protcol)
パス︓/about ページの更新頻度︓ない データ︓HTML内に記述 静的ページでの比較 SPA SSG SSR 返却時に情報があるため、 正しい表⽰ができる。 返却時に情報があるため、
正しく表⽰される。 返却時に情報があるため、 正しく表⽰される。
パス︓/blog/_id ページの更新頻度︓少なめ データ︓APIから取得 動的ページでの比較 SPA SSG SSR 返却時には情報がないため、 正しい表⽰はできない。 ビルド時にデータ取得を⾏い、
返却時に情報があるが、デー タが最新でない場合は正しく 表⽰されない。 例えば、新規投稿されたコン テンツや更新されたコンテン ツは正しく表⽰できない。 新規投稿、更新があるたびに ビルドすることで解決可能。 リクエスト時にウェブサー バー側でデータ取得を⾏い、 返却時に情報があるため、正 しく表⽰される。
パス︓/work/_id ページの更新頻度︓多め データ︓APIから取得 動的ページでの比較 SPA SSG SSR 返却時には情報がないため、 正しい表⽰はできない。 ビルド時にデータ取得を⾏い、
返却時に情報があるが、デー タが最新でない場合は正しく 表⽰されない。 例えば、新規投稿されたコン テンツや更新されたコンテン ツは正しく表⽰できない。 更新頻度が多いため、都度ビ ルドすることは難しい。 リクエスト時にウェブサー バー側でデータ取得を⾏い、 返却時に情報があるため、正 しく表⽰される。
流れ 1. クライアントからリクエスト 2. Workersがオリジンサーバーにアクセスしデータを取得 3. URLのパスが条件に⼀致すれば処理Ⅰへ、それ以外は処理4へ I. WorkersがAPIからデータを取得する II.
WorkersがHTMLファイルのOGP情報を書き換え処理4へ 4. クライアントに返却 SPA・SSGの動的ページのOGP対応
流れ 1. クライアントからリクエスト 2. Workersがオリジンサーバーにアクセスしデータを取得 3. URLのパスが条件に⼀致すれば処理Ⅰへ、それ以外は処理4へ I. WorkersがAPIからデータを取得する II.
WorkersがHTMLファイルのOGP情報を書き換え処理4へ 4. クライアントに返却 SPA・SSGの動的ページのOGP対応
1. オリジンサーバーからデータ取得 ← オリジンサーバーからデータ取得
1. オリジンサーバーからデータ取得 ← オリジンサーバーからデータ取得 ← パスに応じて処理を⾏う
2. パス検証 ← パス検証
2. パス検証 ← パス検証 ← 書き換え処理関数の呼び出し
2. パス検証 ← パス検証 ← 書き換え処理関数の呼び出し ← パスが条件にヒットしない場合はnullを返す
流れ 1. クライアントからリクエスト 2. Workersがオリジンサーバーにアクセスしデータを取得 3. URLのパスが条件に⼀致すれば処理Ⅰへ、それ以外は処理4へ I. WorkersがAPIからデータを取得する II.
WorkersがHTMLファイルのOGP情報を書き換え処理4へ 4. クライアントに返却 SPA・SSGの動的ページのOGP対応
Ⅰ. APIからデータ取得 ← APIへリクエスト (クラスは別途定義)
流れ 1. クライアントからリクエスト 2. Workersがオリジンサーバーにアクセスしデータを取得 3. URLのパスが条件に⼀致すれば処理Ⅰへ、それ以外は処理4へ I. WorkersがAPIからデータを取得する II.
WorkersがHTMLファイルのOGP情報を書き換え処理4へ 4. クライアントに返却 SPA・SSGの動的ページのOGP対応
Ⅱ. HTML書き換え処理 ← HTML書き換えelement作成
ogRewriteHandlerFactory ← element作成
Ⅱ. HTML書き換え処理 ↑ elementを元にHTML要素の書き換え ← HTML書き換えelement作成
流れ 1. クライアントからリクエスト 2. Workersがオリジンサーバーにアクセスしデータを取得 3. URLのパスが条件に⼀致すれば処理Ⅰへ、それ以外は処理4へ I. WorkersがAPIからデータを取得する II.
WorkersがHTMLファイルのOGP情報を書き換え処理4へ 4. クライアントに返却 SPA・SSGの動的ページのOGP対応
4. クライアントへデータを返却 ← オリジンサーバーからデータ取得 ← パスに応じて処理を⾏う ← 書き換えたデータを返す
詳細 C3ブログ
• Vercelやprerendor.io、Netlifyなどのプレレンダリングサービスの導⼊を検討する選択肢 • SPA・SSG・SSRのどれを⽤いるのかも慎重に検討 • Cloudflare Workers以外にもAWS Lambdaなどでも可能 まとめ
ご清聴ありがとうございました C3 (Composite Computer Club) HP Twitter シモ Twitter