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
72
コンテナ技術とVPSでのデプロイの基本的
simo123
0
170
Other Decks in Technology
See All in Technology
Windows の新しい管理者保護モード
murachiakira
0
200
白金鉱業Meetup Vol.17_あるデータサイエンティストのデータマネジメントとの向き合い方
brainpadpr
7
1k
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
120
コンピュータビジョンの社会実装について考えていたらゲームを作っていた話
takmin
1
590
Reading Code Is Harder Than Writing It
trishagee
2
120
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
システム・ML活用を広げるdbtのデータモデリング / Expanding System & ML Use with dbt Modeling
i125
1
320
OPENLOGI Company Profile
hr01
0
60k
エンジニアが加速させるプロダクトディスカバリー 〜最速で価値ある機能を見つける方法〜 / product discovery accelerated by engineers
rince
4
550
Aurora PostgreSQLがCloudWatch Logsに 出力するログの課金を削減してみる #jawsdays2025
non97
1
130
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
6
2.2k
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
8
3.3k
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
511
110k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Fireside Chat
paigeccino
34
3.2k
Building Applications with DynamoDB
mza
93
6.2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Navigating Team Friction
lara
183
15k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.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