Isomorphic, Universal 그리고 SEO 개념 정리

이 글은 2020년 4월 백업 아카이브에서 복원된 글입니다. 당시 시점의 용어·관점 그대로 두었습니다.

Isomorphic (이서모픽) 개념

Javascript 기능이 Server 와 Client 환경에서 똑같이 실행되는 형태를 의미합니다.

예를 들어 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 를 구현할 수 있게 됩니다.

예를 들어, 사용자가 게시판 리스트에서 제목을 눌러 본문을 보러 가는 상황에서 SPA 플랫폼은 기본적으로 페이지 전체 로드를 하지 않고 해당 부분만 다시 렌더링 합니다. 일반적인 MVC 를 사용한 프로젝트라면 처음 게시판 리스트를 사용자가 접근했을 때는 HTML 마크업이 정상적으로 게시판 리스트를 출력하고 있을 것입니다.

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

Router (예: react-router) 를 이용한다면 Ajax 로 보여주는 방식에 대해서는 고민할 필요가 없어집니다. 서버단에서만 처리를 하면 되는 것입니다. bbs/77 에 해당하는 react 컴포넌트를 Server 에서 처리하고 해당 마크업 결과물을 Client 로 보내주고, Client 의 React 는 다시 Ajax 로 처리해 해당 영역을 다시 Rendering 합니다.

서버사이드 렌더링 기본

1. 검색엔진 최적화

React 혹은 다른 Javascript 라이브러리/프레임워크로 만들어져 뷰 렌더링이 Javascript 위주로 돌아가는 프로젝트는, Javascript 엔진이 돌아가지 않으면 원하는 정보를 표시해주지 않습니다. React 의 index.html 은 body 요소 안에 <div id="root"></div> 만 가지고 있고 내용은 비어있습니다.

클라이언트 렌더링만 될 경우에는 검색엔진 크롤러가 어플리케이션이 지닌 데이터들을 제대로 수집하지 못합니다. 구글 검색엔진에는 크롤러에 Javascript 엔진이 내장되어 있어 데이터를 제대로 렌더링 해주지만, 네이버나 다음 기타 검색엔진에서는 사이트를 제대로 크롤링 못할 수도 있습니다.

2. 성능 개선

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

3. 서버 부하 개선 방안

클라이언트 초기 렌더링을 서버가 대신 수행하므로 SEO·클라이언트 부담은 줄지만 서버 부하가 문제가 될 수 있습니다. 보통 ReactDOMServer.renderToString 은 동기적으로 작동하며, 렌더링하는 동안 이벤트 루프가 막히게 됩니다.

도구	설명
rapscallion	renderToString 을 비동기로, Promise 기반, 컴포넌트 단위 캐싱
hypernova	Airbnb 에서 만든 도구. 렌더링 서버를 따로 열어 cluster 로 여러 프로세스 생성. 운영서버가 렌더링서버로 결과물을 요청
react-router-server	Promise 비동기 렌더링 지원. 깔끔한 방식으로 데이터 fetch

4. 메타 태그만으로 최적화

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