develop/Sprint

[Web] 웹 페이지 렌더링 방식 (서버 사이드 렌더링-SSR 과 클라이언트 사이드 렌더링-CSR 에 대하여)

온몸비틀기 2024. 2. 21. 15:57

웹 브라우저 렌더링 방식에는 여러가지 방법들이 존재합니다.

오늘은 그 중 대표적인 방법들 몇가지에 대해서만 알아보겠습니다.

1. 클라이언트 사이드 렌더링 (Client Side Rendering)

1-1. CSR 이란?

클라이언트가 웹 화면을 그리는 주체가 된다.
모바일의 수요와 환경이 폭발적으로 증가함에 따라 모바일 웹브라우저에 대한 접근과 니즈가 증가하였고,  PC보다 사양이 부족한 모바일 환경에 맞추어 기존과는 다른 접근방식으로 등장한 SPA가 등장하게 되었다.
관련 프레임워크 ex) React.js, Angular.js, Vue.js

1-2. CSR 방식의 렌더링 과정

페이지를 처음 로딩할때 서버는 index.html 파일을 클라이언트에 전달
전달받은 index.html파일 안에는 어플리케이션에 필요한 자바스크립트의 링크만 존재한다.
HTML의 빈 부분은 서버로부터 app.js 파일을 다운로드 받게 되는데, 어플리케이션에서 필요한 로직들을 포함하여 프레임워크, 라이브러리도 포함되어 있다.  이때 유저는 빈 화면만을 보게됨
다운로드가 완료괸 JS파일이 실행되고, 데이터를 요청하기 위한 API가 호출된다. 이때 사용자들은 placeholder (예 : skeleton UI)를 보게됨
서버에서 API 요청에 응답하여 데이터를 전송한다.
클라이언트는 API에서 받아온 데이터를 placeholder 자리에 넣어주고, 상호작용이 가능한 페이지가 된다.

1-3. CSR 방식의 장단점

1-3-1. 장점

동적인 웹 앱에서 이상적이다.
첫 로드 이후에 페이지 렌더링이 빠르다.
애플리케이션의 반응성이 빠르게 개선되어 사용자와의 상호작용이 부드럽다.
CSR 구현에 최적화된 JS 라이브러리가 다양하다

1-3-2. 단점

검색 엔진 크롤러가 페이지 내용을 인식하기 어려워 SEO에 적합하지 않다.
클라이언트 측에서 페이지를 렌더링하여 API 응답 속도가 느리다.
첫 페이지 로딩이 오래 걸린다.
추가적인 외부 라이브러리를 필요로 한다.
메모리 소모량이 크다.

2. 서버 사이드 렌더링 (Server Side Rendering)

2-1. SSR 이란?

서버가 웹 화면을 그리는 주체가 된다.
관련 프레임워크 ex) Next.js, Flask
Static Sites 방식에 영감을 얻어 SSR방식이 도입된다.
서버에서 필요한 데이터 모두를 가져와서 서버 안에서 html을 만들고, 만들어진 html 파일을 동적으로 제어할 수 있는 소스코드와 함께 클라이언트에 보낸다.
클라이언트로 전달된 html문서는 바로 유저에게 보여줄 수 있게 된다.

2-2. SSR 방식의 렌더링 과정

사용자가 클라이언트에 요청을 보내게 된다.
서버는 리소스를 확인하고 이를 해석하고 변환하는 컴파일링 과정을 통하여 즉시 렌더링 가능한 HTML 파일을 생성한다.
클라이언트에 전달되는 순간 이미 렌더링 될 준비가 되어 있으므로 즉시 렌더링 된다. 이때 JS파일은 읽히기 전 이므로 사이트 자체의 조작은 불가능한 상태임
클라이언트가 JS파일을 다운받는다. 이때 브라우저에서는 사용자의 조작을 기억하고 있음
브라우저가 다운로드된 JS 프레임워크를 실행한다.
JS까지 성공적으로 컴파일링 된 후에는 기억된 사용자 조작이 실행되고, 상호작용 가능한 페이지가 된다.

2-3. SSR 방식의 장단점

2-3-1. 장점

정적인 사이트에서 이상적이다.
첫 페이지 접근이 빠르다.
JS에 의존하지 않는다.
크롤링에 용이하여 SEO에 적합하다.

2-3-2. 단점

서버 요청이 많이 발생한다.
전체 페이지를 다시 로딩해야 해서 CSR에 비해 페이지 로드 속도가 느리다.
사용자와 사이트 간의 상호작용이 부드럽지 못하다.
서버에서 사용자 요청을 처리하여 보안 취약점에 노출될 가능성이 높다.

주의할 점

전통적인 웹 페이지 방식(Static)은 SSR이 아니다. { Traditional != SSR }
싱글 페이지 어플리케이션(Single Page Application) 은 CSR이 아니다. { SAP != CSR }
전통적인 웹 페이지 방식이 SSR 방식 안에 속하는 것이고, SPA가 SCR 방식 안에 속하는 것이다.

짚고 넘어가야 할 부분 (MPA - Multi Page Application 와 SPA - Single Page Application)

MPA - Multi Page Application

고전적인 웹 페이지 구성 방식으로, 여러 개의 페이지로 구성된 웹을 의미한다.
페이지 별로 해당 페이지에 맞는 HTML, CSS, JS 파일을 받아 화면을 구성한다.
하이퍼링크를 클릭했을 때 해당 페이지로 이동하고, 화면이 깜빡이면서 새로운 페이지에 맞는 화면이 그려지는 방식이다.
이미 하드코딩된 정적 페이지들을 서버에서 개별적으로 가지고 있다가 요청에 따라 해당 요청에 상응하는 정적 페이지를 찾아 반환한다.
렌더링이 서버 사이드에서 완료되어 최종 완성된 문서를 반환하고 있는 형태!
사용자가 페이지를 새로고침하거나 다른 페이지로 이동할 때마다 해당 페이지의 HTML 문서를 서버로부터 다시 받아와야 한다.
이때의 HTML 문서는 사진과 같은 컨텐츠들이 이미 포함된, 서버가 렌더링한 파일이다.
MPA는 SSR 렌더링 방식을 사용한다.

SPA - Single Page Application

단일 페이지 애플리케이션
현재의 페이지를 동적으로 작성함으로써 사용자와 소통할 수 있는 웹 애플리케이션
최초 한 번 페이지 전체를 로딩한 뒤 데이터만 변경하여 사용할 수 있는 애플리케이션
어떤 페이지에 접속하더라도 동일한 HTML, CSS, JS 파일로 접속한 페이지에 맞게 화면을 구성한다.
연속되는 페이지 간의 UX를 향상시키고, 웹 애플리케이션이 데스크톱 애플리케이션처럼 동작하도록 돕는다.