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
SREの次のキャリアの道しるべ 〜SREがマネジメントレイヤーに挑戦して、 気づいたこととTips〜
coconala_engineer
1
4.4k
無理しない AI 活用サービス / #jazug
koudaiii
0
100
CDK Toolkit Libraryにおけるテストの考え方
smt7174
1
550
CDKコード品質UP!ナイスな自作コンストラクタを作るための便利インターフェース
harukasakihara
2
240
モニタリング統一への道のり - 分散モニタリングツール統合のためのオブザーバビリティプロジェクト
niftycorp
PRO
1
520
Digitization部 紹介資料
sansan33
PRO
1
4.5k
AI エージェントと考え直すデータ基盤
na0
20
7.9k
Transformerを用いたアイテム間の 相互影響を考慮したレコメンドリスト生成
recruitengineers
PRO
2
440
衛星運用をソフトウェアエンジニアに依頼したときにできあがるもの
sankichi92
1
1k
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
3
1.9k
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
670
Delegating the chores of authenticating users to Keycloak
ahus1
0
190
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
A better future with KSS
kneath
238
17k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
How to train your dragon (web standard)
notwaldorf
96
6.1k
GitHub's CSS Performance
jonrohan
1031
460k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
340
Gamification - CAS2011
davidbonilla
81
5.4k
Git: the NoSQL Database
bkeepers
PRO
430
65k
RailsConf 2023
tenderlove
30
1.1k
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