웹 페이지를 구성하는 여러 파일(HTML, JS, CSS)들은 어떤 과정을 거쳐서 웹 사이트가 되는 것일까?
바로 렌더링 엔진을 거쳐서 화면으로 그려지게 되는 것이다.
즉, 렌더링은 웹 페이지를 구성하는 해당 파일들을 브라우저상에 그려 주는 것을 의미한다.
이러한 렌더링은 과정을 수행하는 위치에 따라 클라이언트 사이드 렌더링(Client Side Rendering)과
서버 사이드 렌더링(Server Side Rendering)으로 나눠진다.
클라이언트 단에서 렌더링을 수행하면 CSR, 서버에서 렌더링을 수행하면 SSR을 의미하는 데
이러한 방식은 하나의 앱에서도 혼합해서 사용할 수 있기에 그 특징과 차이점을 정확히 알고
원하는 목적에 따라 올바르게 사용하는 것이 중요하다.
그렇다면, 각자의 특징과 자세한 과정, 그에 따른 장단점은 어떠할까?
CSR (Client Side Rendering)
앞서 말했듯, CSR은 클라이언트 단에서 렌더링을 수행하는 것을 의미한다.
Client가 최초로 웹 사이트에 접속할 때 HTML, CSS,JS 등의 소스파일들을 Client에 다운로드하고, 렌더링을 한다.
이 때 Server는 맨 처음 접속할 때 소스 파일들을 제공하고, 그 이후 요청 시 데이터를 전송해주는 역할만을 수행한다.
자세한 과정은 다음과 같다.
1. Client가 페이지를 요청하면 Server에서 해당 페이지의 HTML 파일을 먼저 보낸다. (해당 HTML 파일은 정보가 거의 없는 상태)
2. 화면을 구성하는 데에 필요한 소스 파일(CSS, JS, 데이터 파일)등을 Server에서 받아온다.
3. 다운받은 파일들을 이용하여 Client 단에서 동적으로 HTML을 생성하고 완성한다. (렌더링 과정)
이후 웹 페이지를 이동하거나 변경이 되더라도 서버에서 새로운 HTML 파일들을 받지 않고도 렌더링을 할 수 있다.
장점
해당 CSR 방식은 웹 페이지를 처음 접속할 때만 Server에서 HTML, JS, CSS등의 파일을 받아오며, 이후에는 Server를 거치지 않고 Client에서 렌더링하기 때문에 초기 로딩이 느리지만 이후의 요청에서는 렌더링 속도가 빠르다는 장점이 있다. 또한 페이지를 이동하거나 변경되는 등의 변화가 생겨도 서버에 요청을 보내지 않기에 성능이 효율적이다.
단점
첫 접속 시 페이지를 구성하는 파일을 받아온 뒤에 Client에서 렌더링 과정을 수행하기에 첫 화면 로딩 속도가 느리다는 단점이 있다.
또한 Server에서 받아오는 HTML 파일 내에 정보가 많이 들어있지 않기에 페이지의 내용이 중요한 SEO 기술을 활용하는 데에는 어려움이 있다.
SSR (Server Side Rendering)
CSR와 다르게 SSR은 서버에서 렌더링을 수행하는 것을 의미한다.
Client가 최초로 웹 사이트에 접속하면 요청에 따라 Server에서 HTML, CSS등을 이용하여 페이지를 렌더링하고, 화면에 띄운다.
이후 웹 페이지를 이동하거나 변경될 때마다 Server에 요청을 보내 렌더링 과정을 수행한 후에 화면에 띄운다.
자세한 과정을 다음과 같다.
1. Client가 페이지를 요청하면 Server에 해당 페이지에 대한 요청을 보낸다.
2. Server는 필요한 HTML, CSS를 이용하여 렌더링을 하고, 해당 페이지를 Client에 반환한다.
3. 이후 JS 파일을 보내 페이지를 동적으로 동작할 수 있게 한다.
장점
SSR 방식은 Server에서 완성된 페이지를 받아온 후 띄우기때문에 첫 화면 로딩 속도가 빠르다.
CSR 방식과는 다르게 Client가 받은 HTML 파일에 많은 정보가 들어있어서 SEO이 가능하다는 장점이 있다.
단점
웹 페이지 요청이 발생할 때마다 Server에서 페이지를 받아오기에 페이지를 이동하거나 변경되는 변화가 발생할 때마다 화면 전환이 일어나 화면이 깜빡거리는 UX를 제공하며, 서버에 과부하가 오기 쉽다는 단점이 있다.
이 뿐만 아니라 만약 JS파일을 받아오지 않은 상태에서 화면 클릭할 시에 동적으로 처리하는 기능이 없기에 아무 변화가 일어나지 않을 수 있다.
