SEO란?
SEO는 Search Engine Optimization의 약자로 직역하자면 검색 엔진 최적화 라고 할 수 있다.
검색 엔진 최적화는 검색 엔진으로부터 웹 사이트나 웹 페이지에 대한 트래픽의 품질과 양을 개선하는 과정이다.
검색 엔진 최적화를 위해서는 시멘틱한 태그의 작성부터 웹 페이지 렌더링 기법까지 작은 부분부터 큰 틀을 정하는 것까지 다양한 방법을 시도할 수 있는데, 이 모든 것은 검색봇(Robot)에게 잘 보이기 위함이라고 할 수 있다. 검색 엔진 최적화가 잘 된 사이트일 수록 웹 사이트가 브라우저 단에서의 트래픽이 적다는 것을 의미하고 이는 곧 검색봇이 그 사이트를 들어가서 읽을 때 편하다는 것을 의미한다. 이 때, 봇이 읽어들이는 것이 편하다는 것은 그만큼 많은 정보를 읽어들여서 검색 엔진에 노출시킬 수 있다는 것이다.
오늘은 이 SEO와 갖가지의 웹 사이트 렌더링 기법들 간의 관계를 알아보려 한다.
시간순으로 과거부터 얘기를 시작하겠다.
MPA
초창기에는 모든 페이지들이 정적인 페이지들이었다. 대부분의 로직들이 서버에서 처리되었고 브라우저는 서버로부터 전달받은 정적인 HTML과 CSS를 렌더링하는 방식으로 동작했다. 웹 페이지에 접속하면 브라우저는 서버에 첫 페이지를 보여주기 위해 HTTP 요청을 전송했고 서버로부터 받은 HTML을 렌더링하는 SSR(Server-Side-Rendering) 방식이다. 첫 페이지에서 또 다른 페이지로 넘어가려면 다시 HTTP 요청을 전송하고 다시 렌더링 했다. 매번 처음부터 렌더링을 해야했기에 성능적인 문제도 있었고 무엇보다 화면이 깜빡거려 사용자 경험 측면에서 좋지 못했다.
SEO 측면에서는 문제될 것이 없었다. 애초에 서버 단에서 모든 컨텐츠를 로드하여 전달하기 때문에 클라이언트 단에서는 트래픽이 생길 만한 로직이 없다. 검색봇이 읽기에 더할 나위 없이 편할 것이다.
그러다 Ajax가 등장하게 된다. Ajax는 Asynchronous Javascript And XML의 약자로 비동기적인 자바스크립트와 XML을 말한다. Ajax의 눈에 띄는 강점은 바로 페이지 전체를 새로고침 하지 않아도 된다는 것이다. 이런 과정 속에서 클라이언트 측에서 화면을 쉽게 처리할 수 있도록 다양한 라이브러리들이 나오기 시작했고 DOM조작을 도와주는 jQuery 부터 최근에 들어서는 React, Vue, Angular 등이 있다.
SPA
React 같은 프론트 엔드 프레임워크들이 유행하면서 클라이언트 측에서 페이지 렌더링을 책임지는 방식이 보편화되었다. 서버에서는 아무런 내용이 없는 빈 HTML 파일을 보내면 클라이언트 측에서 동적으로 태그를 생성하여 페이지를 채운다. 이렇게 되면 처음에 HTML 파일을 서버로부터 받아오는 것 외에는 별도의 HTTP 요청이 필요 없게 된다. 서버는 Ajax를 통해 그때그때 필요한 데이터만을 주고 받게 된다. 이러한 방식을 SPA(Single Page Application)라고 한다. 이 SPA 렌더링 방식은 깜빡임 따위 없는 매우 부드러운 화면 전환을 선보이며 사용자 경험을 증가시켰다.
하지만, 이는 반대로 말하면 페이지 렌더링을 위해 많은 양의 JS 코드가 실행된다는 것이다. SPA 안에서도 CSR(Client-Side-Rendering) 방식은 특히 첫 페이지 로딩이 눈에 띄게 느리다. 빈 페이지를 보여주는 HTML은 렌더링에 필요한 모든 리소스를 참조하는데, 로드할 때 한 번에 전부 불러와야 하기 때문이다.
그리고 이는 SEO 측면에서 문제를 야기한다. 검색봇이 웹 사이트를 들어갔는데 브라우저(클라이언트)단의 트래픽이 많아서 그만큼 읽어들일 수 있는 정보의 양도 적어지고 이는 곧 검색 엔진 최적화에 방해가 된다. 사실상, 대부분의 웹 크롤러(봇)가 빈 페이지를 읽게 되는 것이기 때문에 검색 엔진에 노출이 되지 않는다고 봐도 무방하다. 다만, 구글봇은 자바스크립트를 지원하기 때문에 SEO가 이루어졌다고 하기는 힘들지만 검색 엔진에 노출이 되는 데는 문제가 없다.
그러다, 사람들은 이런 발상을 하기 시작했다.
매번 똑같은 페이지를 보여주는 부분은 정적인 페이지로 전달해주고, 유저의 데이터와 같은 다른 페이지를 보여주는 부분은 동적인 페이지로 전달해줄 수 없을까?
이렇게 SSG(Static Site Generation)이 나오게 된다.
SSG
어떤 학교의 인사말이나 찾아오는 길과 같은 페이지는 모든 유저에게 항상 동일한 화면을 보여주기 때문에 항상 동적으로 생성할 필요가 없다. CDN으로 어딘가에 저장해두고 필요할 때 불러오면 된다. React를 사용하고 있다면, Next.js나 Gatsby.js등을 사용해서 쉽게 정적 페이지를 생성할 수 있다.
SEO 측면에서, 검색 엔진에 노출시키고 싶은 정보를 담은 페이지를 의도적으로 정적으로 생성해 보여줄 수 있다는 점에서 SSR 보다 더 이점이라고 할 수 있다. SSR 은 동적인 페이지를 정적인 페이지로 만드는 데 시간이 소요된다면, SSG 는 정적인 페이지를 따로 빼뒀다가 바로 던져줄 수 있기 때문에 완전 똑같은 사이트를 SSR과 SSG로 나눈다면 SSG가 SEO 측면에서 더 좋을 거라는 것이.. 나의 추측이다.
출처:
https://developer.mozilla.org/ko/docs/Web/Guide/AJAX/Getting_Started
https://im-developer.tistory.com/227
https://ko.wikipedia.org/wiki/%EA%B2%80%EC%83%89_%EC%97%94%EC%A7%84_%EC%B5%9C%EC%A0%81%ED%99%94
https://minsoftk.tistory.com/68
https://jw910911.tistory.com/36
