[ Feat/#500 ] prerender 파이프라인 구축 후 글 페이지에 대한 dynamic og meta tag 추가

[ljh0608]

✨ 해당 이슈 번호 ✨

todo

• csr환경에서 prerender 파이프라인 구축을 위해 prerenderer/rollup-plugin과 @prerenderer/renderer-puppeteer를 사용하여 prerender를 구현하고 각각의 게시글에 대한 index.html 파일에 대한 dynamic og meta tag를 추가하였습니다.

📌 내가 알게 된 부분

• 많이 알려진 react-snap은 CRA환경에 친화적인 라이브러리이며 해당 라이브러리에서 사용하고 있는 puppeteer 버전 이슈로 옵셔널 체이닝을 인식하지 못하는 이슈가 있습니다.

• react-helmet-async는 mount될 때 작동하여 meta tag를 넣기 때문에 OG 태그나 SEO 크롤러 입장에선 여전히 빈 index.html을 보고 있습니다. (title정도는 느리더라도 변경되긴 합니다.)

• @prerenderer/rollup-plugin 역시 vite에 친화적이진 않아 @vitejs/plugin-legacy 를 활용하는데에 어려움이 있습니다.
  이 라이브러리는 rollup의 hook을 사용하는데에 목적이 있기에 이점을 유의해야했고 transformIndexHtml이라는 vite hook이 있는데 이것을 사용하는데에 문제가 발생한 것으로 확인됩니다.

실제로 vite의 plugin들은 Rollup 플러그인 인터페이스에 몇가지 vite만의 옵션을 추가한 형태로 구성되어 있습니다.

• puppeteer 20이상 버전에서 Timeout Error와 크롬 윈도우 정책에 대한 에러가 발생하여 puppeteer 버전을 낮추고 chrome의 버전을 임의로 설정해주었습니다.

• 정적 빌드 파일의 경로가 detail/:groupId/:postId/index.html 이여서 실제로 서비스에서 index.html에 접근해야만 og tag가 보이고 이는 react-router-dom 에서 허용하는 경로가 아니여서 에러가 발생합니다. 따라서 vercel에 trailingSlash라는 옵션을 활용하여 /about path를 /about/ 변경시켜주어서 적절한 라우팅을 제공해주면서 OG tag를 추가하는 방식을 사용했습니다.

📌 질문할 부분

📌스크린샷(선택)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
mile-client	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 26, 2024 4:30pm