안녕하세요? 개발자 옵티머스입니다. 오랜만에 인사드리네요 ㅎㅎ
최근에 제가 개발하고 있는 서비스가 한 가지 난관에 봉착했습니다. 바로 SEO와 관련된 문제입니다. SEO는 검색엔진최적화의 약자로 구글이나 네이버와 같은 검색 엔진이 제가 만든 서비스에서 생성되는 콘텐츠를 얼마나 잘 노출하는 지를 결정할 수 있는 매우 중요한 부분입니다. 제가 아무리 서비스를 잘 만들어도 사람들이 검색해도 나오지 않으면 아무 소용이 없겠죠? 이처럼 SEO는 서비스 운영에 있어서 굉장히 중요한 역할을 차지합니다. 하지만 제가 만든 서비스는 SEO가 잘 적용이 되지 않는다는 문제를 갖고 있었습니다. (아래는 제가 가 개발하고 있는 서비스입니다. 이렇게라도 노출해야지 ㅎ)
SEO가 안 되는 이유
제가 만든 서비스에 SEO가 잘 적용되지 않은 이유가 무엇이었을까요? 그것은 바로 제가 사용한 프레임워크와 연관이 되어 있습니다. 픽플리(필자가 만든 웹 서비스)를 만들 때, 제가 선택했던 라이브러리는 리액트였습니다. 리액트는 렌더링 방식으로 CSR(Client Side Rendering)을 사용합니다. 웹에 접속했을 때, 클라이언트 브라우저가 HTML, CSS, JS 파일을 내려받고 이후 화면을 그리는 역할을 수행합니다. 그렇기에 리액트로 만든 사이트에 요청을 보내면 html 파일이 거의 비어있는 것처럼 보입니다. 아래는 thunder client로 픽플리 서비스에 요청을 보냈을 때 응답입니다. 검색 봇이 해당 페이지의 내용을 알고 싶어도 비어있기에 정확하게 검색엔진에 정확히 색인을 할 수 없는 문제가 존재하는 것입니다. 물론 구글 검색 엔진은 최근 JS 파일까지 해석할 수 있도록 개선되었지만 완벽하게 해당 페이지의 내용을 파악할 수는 없습니다.
<body>
<div id="root">
</div>
</body>
리액트로는 SEO 불가능?
그렇다면 리액트를 기반으로 만든 서비스는 SEO가 아예 불가능할까요? 그렇지는 않습니다. 리액트에서 SEO를 위해서 개발된 라이브러리를 추가로 사용하고 sitemap을 작성하고 구글 서치 콘솔을 적절히 활용하면 검색엔진에 내가 만든 서비스를 충분히 노출할 수 있습니다. (충분하다의 기준은 사람마다 다르겠죠 ㅎㅎ...) 저 같은 경우, react-snap와 react-helmet-async를 활용하여 SEO를 세팅했고 구글 서치 콘솔에 접속해서 주기적으로 웹에서 만들어지는 콘텐츠의 URL을 입력했습니다. 그래서 아래 이미지와 같이 구글 검색엔진에 픽플리와 관련된 색인 페이지들이 생성된 것을 확인할 수 있습니다. 아래와 같이 픽플리와 관련된 페이지가 잘 검색되니 아무 문제가 없는 것일까요? 그렇지는 않습니다. 매번 sitemap을 업데이트해야 하고 구글 서치 콘솔에서 새로 생성된 콘텐츠의 URL을 수동으로 입력해야 합니다. 심지어 서치 콘솔에는 하루에 입력할 수 있는 요청이 정해져 있기에 이를 초과할 수가 없습니다. 쉽게 말해서 하루에 SEO를 설정할 수 있는 페이지의 개수가 정해져 있다는 뜻입니다. 또한 해당 서비스의 콘텐츠가 충분히 노출되지 않는다는 문제도 있습니다. 그렇다면 리액트로 개발은 해야 하고 SEO도 적용하고 싶다면 어떻게 해야 할까요? (아마 충분히 답을 알고 있을 겁니다. ㅎㅎ....)
그래서 등장한 NextJS
Nextjs는 Vercel 팀이 개발한 오픈 소스 react 프레임워크입니다. SSR(Server Side Rendering)과 SSG(Static Site Generation)을 지원하기에 이를 쉽게 구현할 수 있습니다. 그렇기에 웹에서 생성된 콘텐츠를 보다 쉽게 외부로 노출할 수 있습니다. 또한 별다른 서버 프레임워크 없이 Nextjs만으로도 풀스택 웹 어플리케이션을 만들 수도 있습니다. 리액트를 충분히 학습했다면 Nextjs도 그렇게 어렵지는 않습니다. 물론 초반에 익숙하지 않은 세팅으로 진입장벽이 있기는 합니다. 또한 Nextjs도 react 기반이기에 처음부터 Nextjs로 웹 개발을 하는 것을 추천하고 싶지는 않습니다. (react를 학습하고 Nextjs로 넘어오세요 ㅠㅠ) 다음 챕터부터는 실제로 Nextjs가 어떤 특징들이 있고 어떤 식으로 구현할 수 있는지 같이 알아보도록 하겠습니다.
'Nextjs' 카테고리의 다른 글
| [Nextjs] 1. 그대들은 Nextjs 세팅, 어떻게 할 것인가? (1) | 2023.11.22 |
|---|
