page 로딩후 제목, 내용 등을 가져오는 방식은 페이지 공유시 미리보기를 제공하기 어려우므로, fuction을 사용하거나 ssr 방식을 이용해야하는데, 아래처럼 해봤다.
1) github에 netlify.toml 을 루트에 만든다.
[functions]
directory = "netlify/functions"
[[redirects]]
from = "/ogpage"
to = "/.netlify/functions/ogpage"
status = 200
2) package.json 에 아래 supabase-js가 있어야 한다.
"dependencies": {
"react-dom": "18.2.0",
"react": "18.2.0",
"@supabase/supabase-js": "2"
}
3) github에서 netlify/functions/ogpage.js 를 만든다
import { createClient } from '@supabase/supabase-js'
const supabase = createClient('co 경로', 'anon key')
export const handler = async (event) => {
const params = new URLSearchParams(event.rawQuery)
const id = params.get('id')
// DB에서 기사 정보 불러오기
const { data: article } = await supabase
.from('articles')
.select('title, summary, thumbnail_url')
.eq('id', id)
.single()
const title = article?.title || "기본 제목"
const description = article?.summary || "기본 설명."
const image = article?.thumbnail_url || "기본 이미지"
const html = `
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>${title}</title>
<meta property="og:title" content="${title}" />
<meta property="og:description" content="${description}" />
<meta property="og:image" content="${image}" />
<script>window.location.href = '/?id=${id}'</script>
</head></html>
`
return { statusCode: 200, headers: { "Content-Type": "text/html" }, body: html }
}
댓글 달기