브라우저 렌더링이란? ( SSR )

먼저 브라우저 렌더링이란 브라우저가 서버로부터 요청해 받은 내용을 브라우저 화면(view)에 표시해주는 작업을 말합니다. 즉, 브라우저가 서버로부터 HTML, CSS, JavaScript 문서를 전달받아 브라우저 엔진이 각 문서를 해석해 브라우저 화면을 그려주는 것이다.
그리고 이러한 브라우저 렌더링은 크게 ‘클라이언트 사이드 렌더링’과 ‘서버 사이드 렌더링’ 방식으로 나누어집니다.

 

SSR(Server Side Rendering)

SSR 설명

서버사이드렌더링의 약자이다. 말 그대로 서버쪽에서 렌더링을 하여 화면을 보여주는 방식을 말한다. 서버로부터 완전하게 만들어진 HTML 파일을 받아와 화면을 그리기 때문에 첫 화면 로딩 속도가 빠르다.

 

1.사용자가 웹사이트에 요청을 보낸다
2. 서버는 렌더링 가능한 HTML 파일을 만든다
3. 브라우저는 빠르게 HTML파일을 읽을 수 있어 화면은 렌더링 된 상태이지만 아직 JS 파일을 읽지 않았기 때문에 조작은 불가능하다.
4. 브라우저가 JS를 읽는다
5. 이제 유저는 콘텐츠를 보고 사용자의 조작도 기록된다.
6. 브라우저가 JS 프레임워크를 실행한다
7. 기록된 사용자 조작도 실행되고 페이지 상호작용도 가능해진다.

 

서버가 렌더링된 HTML 파일을 보내고 브라우저가 받음 => 브라우저가 페이지를 화면에 띄워주고 JS 파일을 다운받는다 => 브라우저가 React(프레임워크)를 실행한다 => 이제 페이지가 모두 작동된다!

 

 

정리하자면 서버사이드렌더링은 클라이언트(브라우저)가 서버에 매번 데이터를 요청하고 서버에서 처리하는 방식이다. 요청이 들어올 때마다 서버에서 새로운 화면을 만들어서 제공한다. 화면을 그리는(렌더링) 주체가 서버

전통적인 웹은 대부분 서버사이드렌더링 방식이었다. 하지만 요즘은 웹에 제공되는 정보가 너무 많고 이를 매번 서버에서 요청하는 방식은 성능적 문제를 낳았다. SSR 방식은 서버에 정보를 요청할 때마다 새로고침이 일어나고 페이지를 로딩할때마다 서버로부터 리소스를 전달받아 이를 읽고 화면에 렌더링하는 방식이기 때문이다.

 

 

장단점

SSR 장점

1. 첫페이지 로딩속도가 빠르다.
2. 검색엔진 최적화가 가능하다.

SSR 단점

1. 초기 로딩 이후 페이지 이동 시 속도가 CSR에 비해 느리다.
2. 깜빡임 이슈 (매번 새로고침 해야하기 때문에)
3. 서버 과부하
4. TTV(Time To View) 와 TTI(Time To Interact) 의 공백시간