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.4k
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
76
コンテナ技術とVPSでのデプロイの基本的
simo123
0
170
Other Decks in Technology
See All in Technology
プロダクト開発におけるAI時代の開発生産性
shnjtk
2
240
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
120
QA/SDETの現在と、これからの挑戦
imtnd
0
140
Road to Go Gem #rubykaigi
sue445
0
790
ビジネスとデザインとエンジニアリングを繋ぐために 一人のエンジニアは何ができるか / What can a single engineer do to connect business, design, and engineering?
kaminashi
0
100
AIエージェント開発手法と業務導入のプラクティス
ykosaka
2
1.5k
SmartHR プロダクトエンジニア求人ガイド_2025 / PdE job guide 2025
smarthr
0
130
LangfuseでAIエージェントの 可観測性を高めよう!/Enhancing AI Agent Observability with Langfuse!
jnymyk
1
240
От ручной разметки к LLM: как мы создавали облако тегов в Lamoda. Анастасия Ангелова, Data Scientist, Lamoda Tech
lamodatech
0
750
AWSのマルチアカウント管理 ベストプラクティス最新版 2025 / Multi-Account management on AWS best practice 2025
ohmura
4
310
The Tale of Leo: Brave Lion and Curious Little Bug
canalun
1
130
Cross Data Platforms Meetup LT 20250422
tarotaro0129
1
690
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
90
6k
Unsuck your backbone
ammeep
670
57k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
670
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.2k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
23
2.6k
The Cult of Friendly URLs
andyhume
78
6.3k
RailsConf 2023
tenderlove
30
1.1k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
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