4.1 서버 사이드 렌더링이란?
싱글 페이지 애플리케이션의 세상
싱글 페이지 애플리케이션이란?
렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식을 말한다.
최초에 첫 페이지에서 데이터를 모두 불러온 이후에는 페이지 전환을 위한 모든 작업이 자바스크립트와 브러우저의 history.pushState, history.replaceState로 이루어진다. 따라서 페이지를 불러온 이후에는 서버에서 HTML을 내려 받지 않고 하나의 페이지에서 모든 작업을 처리한다.
최초에 서버에서 최소한의 데이터를 불러온 이후부터는 이미 가지고 있는 자바스크립트 리소스와 브라우저 API를 기반으로 모든 작동이 이뤄진다.
단점 : 최초에 로딩해야할 자바스크립트 리소스가 커진다.
장점 : 한 번 로딩된 이후에는 서버를 거쳐 필요한 리소스를 받아올 일이 적어지기 때문에 사용자에게 훌륭한 UI/UX를 제공한다.
싱글 페이지 렌더링 방식의 유행과 JAM 스택의 등장
자바스크립트 모듈화의 결실, 사용자 기기의 성능 향상과 인터넷 속도의 발전 등으로 자바스크립트에서 할 수 있는 일이 점차 다양해지기 시작했다.
과거에 자바스크립트로 할 수 있는 일이 제한적이었고, 서버를 확장하는것도 매우 번거로운 일이었다. 점차 프레임워크/라이브러리의 인기는 자바스크립트의 역할을 가중시켰고 이에 등장한 것이 JAM(javaScript, API,Markup)이다.
자바스크립트와 마크업을 미리 빌드해두고 정적으로 사용자에게 제공하면 이후 작동은 모두 사용자의 클라이언트에서 실행되므로 서버 확장성 문제에서 자유로울 수 있게 되었다.
새로운 패러다임의 웹서비스를 향한 요구
인터넷 속도는 날이 갈 수록 빨리졌고, 프로세스나 메모리 등 하드웨어 성능 또한 눈부시게 발전을 거듭했다. 그러나 웹 애플리케이션에서 제공하는 자바스크립트 리소스의 크기와 수도 같이 증가하기 시작했다.
자바스크립트에서 처리해야 하는 코드의 절대적인 양이 증가하였고, 처리속도는 크게 개선되지 않았다. 따라서 사용자가 느끼는 웹 애플리케이션의 로딩 속도는 5년전이나 지금이나 다를 바가 없다는 것을 알 수 있다. 이에 점차 패러다임이 바뀌게 되었다.
서버 사이드 렌더링이란?
최초에 사용자에게 보여줄 페이지를 서버에서 렌더링해 빠르게 사용자에게 화면을 제공하는 방식이다. SPA와의 차이점은 웹페이지 렌더링의 책임을 어디에 두냐이다. 클라이언트 렌더링은 사용자 기기의 성능에 영향을 받지만 서버사이드 렌더링은 서버에서 제공하기 때문에 비교적 안정적인 렌더링이 가능하다.
서버사이드 렌더링의 장점
- 최초 페이지 진입이 비교적 빠르다.
- 서버에서 HTTP 요청을하고, HTML을 그린 뒤 바로 화면에 렌더링하기 때문이다.
- SPA라면 사용자가 화면에 진입 → 자바스크립트 리소스 다운 → HTTP 요청 → 응답 → 화면에 렌더링하는 과정을 거쳐 초기에 시간이 필요하다.
- 검색 엔진과 SNS 공유 등 메타데이터 제공이 쉽다.
- 검색 엔진 최적화 과정
- 검색 엔진 로봇이 페이지에 진입
- 페이지가 HTML 정보를 제공해 로봇이 HTML 다운 (자바스크립트는 실행하지 않는다.)
- 다운로드한 HTML 페이지 내부의 오픈그래프, 메타 태그 정보를 기반으로 페이지의 검색 정보를 가져오고 이를 검색엔진에 저장.
- SSR은 최초 렌더링 작업이 서버에서 일어나기 때문에 검색 엔진에 제공할 정보를 서버에서 가공해서 HTML 응답으로 제공할 수 있으므로 검색 엔진 최적화에 대응하기 용이하다.
- 누적 레이아웃 이동이 적다.
- 서버에서 HTML을 로딩하기 떄문에 사용자에게 페이지를 보여준 뒤 뒤늦게 HTML 정보가 추가되거나 삭제될 일이 없다.
- 사용자의 디바이스 성능에 비교적 자유롭다.
- 보안에 좀 더 안전하다.
- 민감한 작업을 서버에서 수행하고 그 결과만 브라우저에 제공해 보안 위협을 피할 수있다.
서버사이드 렌더링의 단점
- 소스코드를 작성할 때 항상 서버를 고려해야 한다.
- window, sessionStorage와 같이 브라우저에만 있는 전역 객체를 서버 사이드에서 실행되지 않도록 처리해야 한다.
- 적절한 서버가 구축돼 있어야 한다.
- 서비스 지연에 따른 문제
SPA와 SSR을 모두 알아야 하는 이유
서버 사이드 렌더링 역시 만능이 아니다.
웹 페이지에서 사용자에게 제공하고 싶은 내용이 무엇인지, 어떤 우선순위에 따라 페이지의 내용을 보여줄지를 잘 설계하는 것이 중요하다. 웹페이지의 설계와 목적, 우선순위에 따라 SPA가 더 효율적일 수 도 있다.
싱글 페이지 애플리케이션과 서버 사이드 렌더링 애플리케이션
두가지 모두 장단점이 있으며 어느 하나가 완벽하다고 볼 수 없다. 싱글 페이지 애플리케이션이 제공하는 보일러플레이트나 라이브러리가 점차 완벽해지면서 잠재적인 모든 위험을 제거할 수도 있고, 멀티 페이지 애플리케이션이 브라우저 API의 도움을 받아 SPA와 같은 끊김없는 사용자 경험을 제공할 수도 있다.
현대 서버 사이드 렌더링
최초 웹사이트 진입 시에는 서버 사이드렌더링 방식으로 서버에서 완성된 HTML을 제공받고, 이후 라우팅에서는 서버에서 내려 받은 자바스크립트을 바탕으로 싱글 페이지 어플리케이션 처럼 작동한다.
