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.2k
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
67
コンテナ技術とVPSでのデプロイの基本的
simo123
0
150
Other Decks in Technology
See All in Technology
AIを駆使したゲーム開発戦略: 新設AI組織の取り組み / sge-ai-strategy
cyberagentdevelopers
PRO
1
130
VPC間の接続方法を整理してみた #自治体クラウド勉強会
non97
1
840
ABEMA のコンテンツ制作を最適化!生成 AI x クラウド映像編集システム / abema-ai-editor
cyberagentdevelopers
PRO
1
180
新卒1年目が向き合う生成AI事業の開発を加速させる技術選定 / ai-web-launcher
cyberagentdevelopers
PRO
7
1.5k
日経電子版におけるリアルタイムレコメンドシステム開発の事例紹介/nikkei-realtime-recommender-system
yng87
1
500
現地でMeet Upをやる場合の注意点〜反省点を添えて〜
shotashiratori
0
520
プロダクトエンジニアが活躍する環境を作りたくて 事業責任者になった話 ~プロダクトエンジニアの行き着く先~
gimupop
1
480
visionOSでの空間表現実装とImmersive Video表示について / ai-immersive-visionos
cyberagentdevelopers
PRO
1
110
Java x Spring Boot Warm up
kazu_kichi_67
2
490
Jr. Championsになって、強く連携しながらAWSをもっと使いたい!~AWSに対する期待と行動~
amixedcolor
0
190
初心者に Vue.js を 教えるには
tsukuha
5
390
Amazon FSx for NetApp ONTAPを利用するにあたっての要件整理と設計のポイント
non97
1
160
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
243
12k
The Invisible Side of Design
smashingmag
297
50k
Building Better People: How to give real-time feedback that sticks.
wjessup
363
19k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Facilitating Awesome Meetings
lara
49
6k
Ruby is Unlike a Banana
tanoku
96
11k
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
GraphQLとの向き合い方2022年版
quramy
43
13k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
Adopting Sorbet at Scale
ufuk
73
9k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
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