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
Next.jsで作ったブログ内に リンクカードを実装したときの知見
Search
soso
June 24, 2023
Programming
3
860
Next.jsで作ったブログ内に リンクカードを実装したときの知見
soso
June 24, 2023
Tweet
Share
More Decks by soso
See All by soso
TiDB Serverless ~理想のServerless DBを考える~
soso_15315
1
560
AWS CDKを4〜5年使ってたどり着いた最新構成
soso_15315
1
2.2k
Reactにおける再レンダリングパフォーマンスチューニングの考え方と実践
soso_15315
2
380
React Hooks公開から1年で得られた知見
soso_15315
1
500
Other Decks in Programming
See All in Programming
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.5k
RailsGirls IZUMO スポンサーLT
16bitidol
0
200
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
0
330
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
3
410
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
220
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
240
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
300
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
130
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
7.3k
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
680
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
320
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
170
Featured
See All Featured
Designing for Performance
lara
610
69k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Optimizing for Happiness
mojombo
379
70k
Unsuck your backbone
ammeep
671
58k
GraphQLとの向き合い方2022年版
quramy
49
14k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Code Reviewing Like a Champion
maltzj
524
40k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
Thoughts on Productivity
jonyablonski
69
4.7k
Transcript
@sosomuse Next.jsで作ったブログ内に リンクカードを実装したときの知見
作ったもの 6 Next.js on Vercel(SG)の個人ブログにリンクカードを実装した
前提 Next.js v13 以前で作ったブログなので、App Router 対応してません(どこか で移行したい。ただし App Router
でも Pages Router でもこの資料の内容に は特に影響しません。書き方ちょっと変わるぐらいのはず このUIの呼び方は色々あり統一されていない(?)ようですが、本資料中で はZennに合わせてリンクカードと呼称します。 https://zenn.dev/zenn/articles/markdown-guide
作ってみた感想 https://www.sososo.me 自分のブログで作ったけど思ったより面倒だっY Qiita, Zenn, Twitterなどはクオリティ高いなと再認1
なので実装に手間取った時に得た知見を話します
アジェンダ 2. リンクカードの基本構成 3. OGPの取得とキャッシュ 1. 自己紹介
自己紹介 OSSコントリビュート: Storybook, i18next, ...etc 最近はAWS CDKとAtCoderにハマってます。 西村 爽 So
Nishimura フロントエンド: Next.js バックエンド: Go インフラ: AWS @sosomuse
アジェンダ 2. リンクカードの基本構成 3. OGPの取得とキャッシュ 1. 自己紹介
リンクカードの基本構成 これらは で定義されている OGP サービスによって表示要素は異なるが、基本的に以下の要素で構成 URL Title Description Image
OGP(Open Graph protocol) あとはサイトのメタデータから抽出して表示するだけ! Title: `og:title` Description: `og:description` Image: `og:image`
パラメータ https://ogp.me/ Facebookが開発したメタデータのプロトコル 大抵のWebサイトはこれに沿って自身のサイト情報を提供してくれている
コンポーネント作成 いい感じにコンポーネントを作る
完成? やった!完成だ!... ではない OGPの取得場所とキャッシュどうするの?
アジェンダ 2. リンクカードの基本構成 3. OGPの取得とキャッシュ 1. 自己紹介
OGPの取得 課題 解決策 OGPはHTMLのメタデータに定義されているので、取得するためには当然対象の Webサイトにアクセスしなければならない。 OGP取得速度は対象のWebサイトへの表示速度に依存するので、最悪数秒かかる ことも想定される。 クライアント側で取得するのでは遅すぎるし、APIサーバーで持つにしてもキャッ シュしたい。 (クライアント側だとCORS問題もある)
クライアント以外で取得してどこかにキャッシュを持つ 具体的な解決策はいくつかありそうだが、個人ブログなのでコストは掛けたく無 いしリソースも管理したく無い(APIサーバーとかは用意したくない)
他サービスの実装(1) Zenn Zennは開発技術がかなり公開されているので、こういった時非常に参考になりま す。 現在も同じ構成かは分かりませんが catnose さんの当時の scrap によれば、 CloudFunctionsでHTMLを生成して、iframeで表示。一定期間キャッシュしてい
るとのこと。 r https://zenn.dev/catnose99/scraps/381b3750099f49
他サービスの実装(2) 所感 エッジサーバーで取得・キャッシュしてから返すのが実装としては無難そうだ が、ぶっちゃけ個人ブログの1機能ぐらいであればエッジサーバーですら用意した くない。
解決策(1) 最終的な解決 SGでブログをレンダリングしているので、ビルドフェーズでメタデータを取得して最終 的なHTMLを生成する。 メタデータはキャッシュとしてJSONファイルでGitにコミットする。
解決策(2) 解決策(2) 解決策詳細(ビルドフェーズで以下の事を行う) uG 記事のMarkdownからURLを取得して、HTTPリクエストで対象サイトのメタデータ を取r G 取得したメタデータをJSONファイルに書き込む(キャッシュ用e 3G JSONファイルのメタデータを使ってHTML生s
BG キャッシュ用JSONファイルはコミットする
解決策(2) 解決策(3) ビルドフェーズのコード
解決策(2) 解決策(4) 以上でSGで表示できて、キャッシュされるようにもなりました
解決策(2) 課題 & まとめ 課題 残った課題 この処理だと一度取得したメタデータが一生キャッシュされるので、一定期間でパージするよ うな処理を入れないと元サイトのOGPが変わった時に追従されない。 再生成スクリプトを用意してGitHub Actionsで定期実行するのが妥当かなーとか考えている
が、やはり個人ブログの1機能のためにそんなリソースを持ちたくない。(まぁ、GitHub Actionsぐらいならいいかと思いつつ面倒なので放置してます...) OGPが変わる機会もそんなにないので、今はいいかなと思って放置している。
解決策(2) 課題 & まとめ まとめ リンクカードの表示はHTTPリクエストが絡むので思ったより手間が掛かる SGであればビルドフェーズでリクエストしてしまえば高速に表示できる SGできないのであればエッジで処理するのが無難な選択肢
ご静聴ありがとうございました