웹 개발이 SPA(single page application)로 많이 넘어오면서 server rendering을 고민하시는 분들이 많습니다. 또는 server rendering이라는 단어는 많이 들어봤는데 뭐에 쓰는 건지 잘 모르시는 분들도 많을 것 같네요.
우선 server rendering을 하지 않는 경우의 처리 순서를 보겠습니다.
1. 첫 페이지 요청
2. 껍데기 뿐인 html과 js 파일 리턴
3. client에서 js 파일을 실행해서 dom에 UI를 그림 (client rendering)
다음은 server rendering을 하는 경우의 처리 순서입니다.
1. 첫 페이지 요청
2. 서버에서 js 파일을 실행해서 html에 내용을 채움 (server rendering)
3. 위에서 생성된 html과 js 파일 리턴
4. client에서는 화면을 바로 볼 수 있으며 js 파일을 실행해서 렌더링 외의 나머지 작업을 수행 (event handler 붙이기 등등)
위의 처리 순서를 보면 장단점은 명확합니다.
장점 1. server rendering을 하면 사용자는 첫 페이지를 빠르게 확인
PC 사용자는 체감상 별 차이가 없고, 저사양의 모바일 사용자에게는 큰 장점이 됩니다.
장점 2. 검색 엔진 최적화 가능
server rendering을 하지 않으면 검색 엔진은 빈 껍데기의 페이지를 받아보기 때문에 문제가 됩니다. 구글은 자바스크립트까지 실행해서 처리를 한다지만 네이버, 다음 등등의 다른 업체들은 그렇지 않죠.
물론 단점도 있습니다.
단점 1. 코드 복잡도가 크게 상승
서버 렌더링을 위해서 고려해야 될 사항이 크게 증가합니다. 개발 환경을 설정하는 것만 하더라도 만만치 않을 겁니다. 코딩을 할 때도 서버(보통 nodejs)와 클라이언트(브라우저) 양쪽에서 모두 실행 가능한 코드를 작성해야 합니다.
단점 2. 서버 인프라 및 리소스 관리 부담 증가
server rendering을 하지 않으면 정적 파일만 서비스하면 되기 때문에 nginx 또는 apache만 띄워 놓으면 됩니다. 하지만 server rendering을 한다면 별도의 서버 인스턴스가 떠있어야 하므로 CPU 사용량도 증가하고 캐싱을 위해 메모리 사용량도 증가하죠. 배포 시스템도 신경 써서 구축해야 합니다. 정적 파일만 있다면 파일 복사만으로 배포가 끝나죠. server rendering을 한다면 node 버전은 뭘로 할지, docker를 사용할지, 무중단 배포는 어떻게 할지 등을 고민해야 합니다.
server rendering의 대안도 몇 가지 있습니다.
대안 1. 돈을 내고 prerendering service 이용하기
대안 2. react-snapshot, react-helmet으로 빌드시 prerendering하기
대안 2는 반쪽짜리 대안이지만 프로젝트 성격에 따라서 좋은 대안이 될 수도 있습니다. 위의 대안으로 해결이 안 된다면 이제 server rendering을 준비해야죠. 개인적으로 create-react-app을 좋아하지만 아쉽게도 server rendering을 지원하지 않습니다. 그래서 create-react-app으로 개발하면서 server rendering 환경을 직접 구축하시는 분들도 있습니다.
server rendering 방법 1. create-react-app을 eject 해서 사용
고생길이 훤합니다. 능력자라면 도전해보세요. 단, eject를 했기 때문에 이후 create-react-app의 새로운 기능은 적용하기가 힘듭니다.
server rendering 방법 2. create-react-app은 개발 환경에서만 사용하고, server rendering은 별도의 스크립트로 관리
욕심내지 않고 server rendering 스펙을 간단하게 잡고 간다면 선택할만합니다. 예를 들어, 특정 페이지 하나만 server rendering을 한다면 해볼 만하죠. 단, 개발 환경에서 server rendering 쪽 이슈를 놓칠 위험이 있습니다.
server rendering 방법 3. next.js 사용
server rendering에 특화돼서 나온 create-react-app과 같은 zero configuration tool입니다. 2016년 말부터 급성장했고 zeit라는 회사에서 관리하고 있죠. 전체적으로 create-react-app에 비해 기능이 부족하지만 server rendering 하나만큼은 확실하게 해줍니다.
