Background
Looi 서비스는 개인의 기록을 위한 서비스이지만, 작성한 일기나 꿈을 토대로 그림을 생성해 주고 Looi의 답장을 제공하는 기능을 가지고 있다. 이 부분에서 결과물을 친구들에게 공유하고 싶다는 피드백들이 들어와서 마케팅 효과도 노릴 겸 [URL 공유하기] 기획이 추가되었는데, 단순히 url만을 공유한다면 사용자들은 이상한 링크로 생각하고(?) 눌러보지 않을 수도 있다. 따라서, 각 링크마다 해당 기록의 제목, 내용, 그림 정도는 메타 태그로 추가되어야 한다는 필요성이 대두되었다!
🛠️프론트 CI/CD 구축하기 글에서 알아보았던 것처럼, 웹사이트는 CSR / SSR 등의 방식으로 배포할 수 있다.
CSR에서 메타 태그를 넣지 못하는 건 아닌데… 왜 SSR로 했어야 할까?
공유하기 페이지는 /share/[id] 이런 식의 url을 가지고 있다.
프리렌더링 시켜 페이지마다 head를 정해놓는 방법을 택할 수도 있었지만, 우리는 각 일기마다 다른 제목, 이미지 등을 다르게 보여주고 싶었다.
그러려면 API 응답이 온 후 화면이 그려져야 했고 = Server side에서 처리해야 했다!
useServerSeoMeta()
useSeoMeta()composable을 이용해 <head> 영역에 들어갈 <meta> 태그를 정의할 수 있다.useServerSeoMeta()가 있다고 하여 이걸 사용하기로 결정했다!useAsyncData()
useasyncData()를 이용해 SSR 환경에서 API를 비동기적으로 호출할 수 있다.