리액트에서의 오픈그래프 적용?

Question

안녕하세요.
현재 리액트를 활용해서 대학축제에서 사용할 채팅앱을 개발하고 있습니다.

저희 앱에서는 학교 축제 정보(몇시에 어떤 행사가 있는지)와 학우 간 채팅 기능을 제공하는데요.
카카오톡 채팅방에 링크를 보내면 카드형태로 보여주는 링크 미리보기 기능을 저희 앱에도 구현하고자 합니다.

더욱 구체적으로 말씀드리자면, 서버로부터 받아온 대학 축제정보 게시물이 여러개가 있는데, 이 모든 게시물들에 오픈그래프를 적용하고 싶습니다. 그래서 채팅방에서 공유할 때 링크 미리보기가 출력되게 하고 싶습니다.

문제는 리액트 특성 상 클라이언트에서 렌더링하기 때문에 적용이 어렵다는 것입니다.

1. axios.get(festival/1)을 호출하여 스프링 서버에서 축제 정보를 JSON으로 받아온다.
2. 리액트에서 받아온 JSON을 바탕으로 렌더링한다.

이런 상황에서 오픈그래프를 적용할 수 있는 방법이 있을까요?

남 재민 · Answer

https://h-owo-ld.tistory.com/m/134
이 내용으로 안됐나요?

권혁진 · Answer

오픈그래프는 수집 봇이 사이트에 get 요청을 날렸을때 반환 되는 html 
즉 사용자 측면에서는 접속했을때의 최초로 렌더링 되는 html 기반으로 수집하는걸로 알고 있어서 
오픈그래프를 적용하기 위해선
서버사이드 렌더링을 사용하셔야 합니다

Nextjs 를 사용하시면 서버사이드 렌더링을 적용하기에 수월해서 오픈그래프 적용이 쉽습니다