서버사이드렌더링, 클라이언트사이드렌더링, 스태틱사이트제너레이터

현대에는 모바일의 수요와 환경이 폭발적으로 증가함에 따라 모바일 웹에 대한 니즈가 증가하였고 성능 최적화에 대한 이슈가 발생하게 되었다. 이는 PC에 비해 성능이 낮았기 때문에 기존 방식과는 다른 접근이 필요해졌다. 그래서 Single Page Application(SPA)가 등장하게 되었다.

 

Single Page Application

SPA는 브라우저에 로드된 후 페이지 전체를 서버에 요청하는 것이 아니라 처음 한번 페이지 전체를 로딩한 이후, 데이터만 변경하여 사용하는 방식이다. 과거의 방식으로는 페이지를 이동할 때, 새로고침이 일어나며 페이지를 로딩할 때마다 서버로부터 데이터를 받아 해석하고 화면에 렌더링하는 방식이었기 때문이다.

 

따라서 SPA는 트래픽을 감소시켜 DB에 과부하가 적어지고, 깜빡이는 것이 없는 더 나은 성능으로 인해 사용자에게 좋은 사용자 경험을 주는것이 가능했다. 서버는 단지 JSON파일만 보내주었고, 클라이언트 측에서 JS파일을 이용하여 동적으로 HTML요소를 생성해서 페이지를 업데이트 하는 방식으로 관리를 하게 된 것이다. 이것이 바로 Client Side Rendering(CSR) 이다.

 

현재 Angular, Reactm, Vue 등 유명한 프레임워크들이 사용하고 있는 방식이다.

 

클라이언트 사이드 렌더링의 흐름

서버에서 Index라는 html파일을 클라이언트에게 보내주면 html파일에는 어플리케이션에서 필요한 자바스크립트 링크만 있다. 그러므로 처음 페이지에 접속하면 빈 화면만 보이게 되고 서버로부터 app.js파일을 다운로드 받게 되는데 어플리케이션에서 필요한 로직들 뿐만 아니라 어플리케이션을 구동하는 프레임워크, 라이브러리들도 포함되어 있다. 그러므로 사이즈가 커서 다운로드 받는 시간이 오래 걸린다. 만약 데이터가 추가로 필요하다면 추가로 데이터를 서버에 요청 후, JSON파일을 서버로부터 받아 동적으로 html을 보여주게 된다.

 

클라이언트 사이드 렌더링의 단점

1. 필요한 데이터를 모두 받아와야 하기 때문에 첫 화면을 보기까지 오래걸린다.

2. html body는 대부분 비어있기 때문에 검색엔진이 CSR로 작성된 웹 페이지를 분석하기 어려워 SEO측면에서 좋지 않다.

 

Server Side rendering

1990년에 사용되던 Static site 방식에 영감을 얻어 SSR 방식이 도입되었다고 한다. 서버에서 필요한 데이터를 모두 가져와서 html파일을 만들고, 해당 html파일을 동적으로 제어할 수 있는 소스코드와 함께 클라이언트에게 보낸다. 클라이언트는 html 파일을 받아서 바로 유저에게 보여줄 수 있다.

 

서버사이드렌더링 장점

1. 처음 서버에서 요청하는 데이터 양이 적어 첫 페이지 로딩시간이 짧다.

2. 모든 컨텐츠가 HTML에 담겨져 있기 때문에 SEO측면에서 유리하다.

 

서버사이드렌더링 단점

1. Static Site에서 발생하던 단점인 html 파일을 새로 받아올 경우 블링킹 이슈가 있어 유저에게 좋지 않은 경험을 준다.

2. 서버에서 과부하가 걸리기 쉬워진다. 유저가 많을수록 특히 심해진다.

3. 사용자가 빠르게 웹 사이트를 볼 수는 있지만, 동적으로 처리하는 JS파일은 아직 다운받지 못하여 다른 동적인 기능을 사용하려해도 반응이 없는 경우가 생길 수 있다.

 

Static Site Generation

정적사이트 생성은 빌드시 HTML 페이지를 만들기 때문에 모든 요청에 대해 HTML페이지를 작성할 필요가 없으며 클라이언트 사이드의 브라우저에도 HTML페이지를 작성할 필요가 없다.

 

SSG의 장점

1. SEO측면에서 매우 유리하다. 크롤러가 페이지를 쉽게 인덱싱 할 수 있도록 하기 때문에 SSG를 수행하는 최고의 이점 중 하나이다.

2. 속도가 빠르다. 브라우저가 사전에 많은 처리를 하지 않아도 되기 때문에 HTML 페이지를 제공하는 것이 사용자에게 훨씬 더 빠른 속도를 제공한다.

3. CDN을 사용한 캐싱 : HTML 페이지를 구축해놓으면 CDN 캐싱이 매력을 발휘할 수 있다. 페이지는 글로벌하게 사용자에게 더 가까이 저장되므로 훨씬 빠르게 엑세스 할 수 있다. 모든 요청은 서버가 페이지를 렌더링할 때까지 기다릴 필요가 없으며, CDN에서 페이지를 수신하기만 하면 되기 때문에 계산 리소스와 비용을 절약할 수 있다.

 

SSG의 단점

모든 URL에 대해 개별 HTML파일을 생성해야 한다. 따라서 URL을 미리 예측할 수 없거나 URL을 예측할 수 없으면 적용이 어렵다.