Isomorphic, Universal, SEO 개념

이번 포스트에서는 간단하게 Isomorphic, Universal 그리고 SEO에 대한 개념정리를 해볼까 합니다.

Isomorphic (이서모픽) 개념

Javascript 기능이 Server 와 Client 환경에서 똑같이 실행됩니다.

예를 들어 jQuery 즉, Client Side 의 jQuery 와 server side node.js 의 jQuery 는 import 해도 동일한 API를 제공합니다.

즉, 완전 똑같지는 않겠지만 BackEnd와 FrontEnd에서 똑같은 API를 사용할 수 있고 같은 결과를 얻을 수 있습니다.

Universal (유니버설) 개념

Javascript 가 서버와 브라우저 뿐만 아니라 각종 디바이스 등에서도 동작하기 때문에 Isomorphic 보다는 Universal 이라고 부르자는 움직임이 있습니다.

최근 Javascript 플랫폼의 Front-end 마크업 부분을 보면 <div id=”app”></div> 이런식으로 정의되어 있는 경우가 많습니다.

Javascript 플랫폼 들은 Javascript에서 정의된 Template와 Component를 하나의 Javascript로 빌드 시켜 Rendering시에 Javascript를 읽고 분석한뒤에 마크업 코드를 사전 정의한 위치에 Append 시킵니다.

이런 경우 SEO (검색엔진최적화) 를 전혀 맞출 수 없는 것이 쿤 문제였습니다. (즉, 최초 비어있는 HTML 은 SEO 유효하지 않음)

SEO (검색엔진최적화)

검색 엔진 최적화(search engine optimization, SEO)는 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있도록 하는 작업을 말합니다.

웹 페이지와 관련된 검색어로 검색한 검색 결과 상위에 나오게 된다면 방문 트래픽이 늘어나기 때문에 효과적인 인터넷 마케팅 방법 중의 하나라고 할 수 있습니다. 기본적인 작업 방식은 특정한 검색어를 웹 페이지에 적절하게 배치하고 다른 웹페이지에서 링크가 많이 연결되도록 하는 것입니다.

구글의 등장 이후 검색 엔진들이 콘텐츠의 신뢰도를 파악하는 기초적인 지표로 다른 웹사이트에 얼마나 인용되었나를 사용하기 때문에 타 사이트에 인용되는 횟수를 늘리는 방향으로 최적화 합니다.

하지만 네이버 등 한국의 포털 사이트의 경우, 검색 엔진의 우선순위 배치에 해외와 다른 기준을 적용하고 있으며 보편적인 SEO를 적용시 경우에 따라 오히려 스팸으로 분류될 수 있습니다. 이는 자사 블로그에 노출 우선순위를 두었기 때문이며, 한국의 검색 엔진에 노출되기 위해서는 사이트 콘텐츠가 웹문서가 아닌 블로그 포스트로 등록되는 방향으로 최적화해야 합니다.

또한 검색 키워드와 별개로, 블로그 유입율이 뛰어난 기존 키워드들이 페이지에 분포한 정도를 추가 지표로 삼기 때문에, 기존 네이버 블로그에 인기있는 키워드를 삽입하는 형태로 최적화 합니다.

티스토리, 이글루스 등 대형 블로그 플랫폼의 경우, 네이버에서 블로그 포스트로 등록되는 것이 어렵지 않으나, 워드프레스 등 설치형 블로그 플랫폼을 사용하는 경우, 네이버 블로그 영역 노출을 위해 몇 가지 작업을 필수적으로 수행해야 한다.

SEO 구현 예

Javascript로 Server Side 와 Client Side 에서 동시에 사용할 Javascript 컴포넌트를 만들고 Server 에서 Client 로 던져주는 response 에 renderToString 을 사용해 실제 HTML 마크업을 돌려줍니다.

즉, Server 에서 먼저 Rendering 된 Javascript 컴포넌트는 Client HTML 마크업으로 출력되어 SEO 를 구현할 수 있게 되었습니다.

예를 들어, Client 에서 사용자가 페이지를 이동한다고 가정합시다. 사용자가 게시판 리스트에서 제목을 눌러 내용을 보러가는 상황에서 SPA 플랫폼에서는 기본적으로 페이지 전체 로드를 하지 않고해당 부분만을 다시 렌더링 합니다.

여기서 일반적인 MVC 를 사용한 프로젝트라면 처음 게시판 리스트를 사용자가 접근했을때는 HTML 마크업이 정상적으로 게시판 리스트를 출력하고 있을 것입니다.

하지만 제목을 클릭하여 본문을 보려고 할때 Ajax 처리를 한다면? HTML5 history 를 제대로 사용하고 있다고 하더라도 게시글을 보여주는 방식이 두 가지 이기 때문에 (Ajax / Permalink) 개발자는 여간 피곤하지 않을 수 없습니다.

하지만 Router (예 react-router) 를 이용한다면 Ajax 로 보여주는 방식에 대해서는 고민할 필요가 없어집니다. 즉, 서버단에서만 처리를 하면 되는 것입니다.

list 에서 77번 글을 사용자가 클릭해서 보려고 할때 URI 는 bbs/list 에서 bbs/77 로 hisotry 를 이용해 변경하고 bbs/77에 해당하는 react 컴포넌트를 Server 에서 처리하고 해당 마크업 결과물을 Front 로 보내주고 Cient 의 React 는 다시 Ajax 로 처리해 해당 영역을 다시 Rendering 합니다. 사용자가 직접 bbs/77 로 접근하는 경우, bbs/77 에 해당하는 react 컴포넌트를 Server 에서 처리하고 해당 마크업을 Front 로 보내주어 Rendering 합니다. 일반적인 MVC 모델에서의 개발시 View 를 위해 HTML, JS 를 따로 작업해야 했는데 이전 이렇게 작업할 필요가 없어졌습니다.

서버사이드 렌더링 기본

1. 서버사이드 렌더링을 통해 얻을 수 있는 가장 큰 이점은 검색엔진 최적화 입니다.

React, 혹은 다른 Javascript 라이브러리/프레임워크로 만들어져 뷰 렌더링이 Javascript 위주로 돌아가는 프로젝트는, Javascript 엔진이 돌아가지 않으면 원하는 정보를 표시해주지 않습니다.

예를 들어 React 의 index.html 은 body 요소안에 <div id=”root”></div> 만 가지고 있고 내용은 비어있습니다. 따라서, 이렇게 클라이언트 렌더링만 될 경우엔 검색엔진 크롤러가 어플리케이션이 지닌 데이터들을 제대로 수집하지 못합니다. 대표적인 구글 검색엔진에는 크롤러에 Javascript 엔진이 내장되어있어 우리가 준비한 데이터를 제대로 렌더링 해주지만, 네이버나 다음 기타 검색엔진에서는 사이트를 제대로 크롤링 못할 수도 있습니다.

만약 이러한 검색엔진에서도 크롤링을 정상적으로 지원하려면 서버사이드 렌더링을 따로 구현해야 합니다.

2. 성능 개선

서버사이드 렌더링을 하게되면, 첫 렌더링된 HTML 을 클라이언트에게 전달을 해주기 떄문에 초기로딩 속도를 많이 줄여줄 수 있습니다. Javascript 파일을 불러오고, 렌더링 작업이 완료되기 전에도, 유저가 사이트의 컨텐츠를 이용할 수 있게 됩니다.

3. 서버측 부담으로 인한 서능 악화 개선 방안

클라이언트에서 초기렌더링을 서버측에서 대신 수행하므로서, 검색엔진 최적화 및 클라이언트의 부담을 줄여주지만, 서버측에 부하가 문제가 될 수 있습니다.

보통 ReactDOMServer.renderToString 함수를 예로 들면, 이 함수는 동기적으로 작동하며, 렌더링하는 동안 이벤트 루프가 막히게 됩니다. 즉 렌더링 하는 동안 다른 작업을 못하게 된다는 뜻입니다. 하지만 비동기식 렌더링 방식을 통해 문제를 해결할 수 있습니다.

4. 메타 태그만 넣어 검색엔진 최적화 방안

어플리케이션을 렌더링하지는 않고, 서버쪽에서 라우트에 따라 필요한 메타태그만 넣어주는 방법이다. 그러면 크롤로에서 해당 페이지에 대한 기본 정보를 얻어 갈 수 있습니다. 보통 SNS 공유시 매우 적합한 방식입니다.