브라우저 렌더링 방식 (SSR, CSR)

🔍 브라우저 렌더링

브라우저가 서버로부터 요청해 받은 내용을 브라우저의 화면에 표시하는 작업

 

HTML, CSS, JavaScript 문서를 전달받아 브라우저 엔진이 각 문서를 해석해 브라우저 화면을 표시

이전에 브라우저 렌더링과정을 학습을 했었는데 이제 브라우저 렌더링의 방식에 대해서 알아보고자 합니다.

 

브라우저 렌더링 방식은 크게 서버 사이드 렌더링(SSR), 클라이언트 사이드 렌더링(CSR)로 구분됩니다.

 

↩️ 이전 히스토리 (MPA와 SPA)

📌 1990s

1990년 중반까지는 모두 static sites 였습니다.

서버에는 만들어진 HTML 문서들이 존재했고 사용자가 브라우저에 접속하면 서버에 있는 HTML 문서를 가져와 보여주는 형식

 

📖 MPA (Multi Page Application)

• 이동할 때마다 서버로부터 새로운 HTML을 새로 받아와 페이지 전체를 새로 렌더링

 

⚠️ 문제점 - Blink

• 웹 페이지내에서 다른 링크를 클릭 시 다시 서버에서 해당 페이지의 HTML을 받아와서 페이지 전체가 업데이트가 됩니다. (새로고침 발생)
• 사용성이 매우 떨어짐!

 

📌 1996년 - iframe

1996년 문서내에서 또 다른 문서를 담을 수 있는 iframe 태그가 도입되었습니다.

이를 통해 페이지내에서 부분적으로 문서를 받아와 업데이트할 수 있게 되었습니다.

 

📌 1998 - XMLHttpRequest

fetch API의 원조인 XMLHttpRequest가 개발되어 HTML 문서 전체가 아닌 JSON과 같은 포맷으로 서버에서 가볍게 필요한 데이터만 받아올 수 있게 되었습니다.

• 데이터를 자바스크립트를 이용해 동적으로 HTML 요소를 생성해 페이지에 업데이트하는 방식

이 방식이 2005년에 AJAX 라는 이름을 가지게 되었습니다.

AJAX를 이용해 웹 어플리케이션을 만들기 시작합니다. 이런 방식이 SPA(Single Page Application) 입니다.

• 사용자가 한 페이지 내에서 머무르면서 필요한 데이터를 서버에서 받아와 부분적으로 업데이트

SPA 와 PC 성능이 점차 좋아지면서 자바스크립트 표준화가 잘되어가면서 Angular, React, Vue 와 같은 프레임워크등이 나오면서 CSR 시대로 접어들게 됩니다.

 

🌐 클라이언트 사이드 렌더링(CSR)

CSR에서 사용되는 HTML 예제 (빈 뼈대만 있는 HTML)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSR</title>
</head>
<body>
    <div id="root"></div>
    <script scr="app.js"></script>
</body>
</html>

• body에는 id 값만 들어가 있고 필요한 자바스크립트의 링크만 주어집니다.

 

따라서, HTML은 비어 있어 처음 접속시 빈 화면만 보이게 됩니다.

 

다시 링크된 자바스크립트를 서버로부터 다운로드 받아 이 자바스크립트에는 필요한 로직들뿐만 아니라 애플리케이션을 구동하는 프레임워크와 라이브러리의 소스 코드들도 다 포함되어 있습니다.

• 굉장히 사이즈가 커서 다운받는데도 시간이 소요

추가로 필요한 데이터는 서버에 요청해 데이터를 받아와 동적으로 HTML을 생성해 사용자에게 최종 웹 페이지를 보여줍니다.

 

 

👟 CSR 동작 과정

• 브라우저가 JS를 다운로드 받고 DOM 을 생성한 후에 웹 페이지를 볼 수 있고 인터렉션이 가능

 

👍 장점

1️⃣ 로딩 이후에 페이지 일부를 변경할 때에는 서버에 해당 데이터만 요청하면 되어서 빠르다.

 

2️⃣ 서버 부하가 적다

• 서버가 빈 뼈대의 HTML만 넘겨주면 됩니다.
• 클라이언트에서 연산, 라우팅등을 처리해 반응속도가 빠르고 사용자 경험이 좋습니다.

 

⚠️ 문제점

1️⃣ 사용자가 첫 화면을 보기까지 시간이 오래 걸린다.

• 필요한 JS 파일을 다운받고 동적으로 DOM을 생성하는 시간을 기다려야해 초기 로딩 속도가 느립니다.

 

2️⃣ SEO 💥

🔍 SEO (Search Engine Optimization)

구글, 네이버 같은 검색 엔진들은 서버에 등록된 웹사이트를 돌아다니면서 웹사이트의 HTML의 문서를 분석하여 검색을 빠르게 할 수 있도록 도와줍니다.

 

⚠️ CSR에서의 HTML body는 내용이 없어 검색엔진들이 웹페이지를 분석하는데 어렵습니다.

 

🖥️ 서버 사이드 렌더링(SSR)

CSR에서의 문제점들 때문에 1990년 중반쯤에 사용한 Static Sites에 영감을 받은 Server side Rendering이 도입됩니다.

 

클라이언트에서 모든 것을 처리하는 방식과 다르게 웹 사이트 접속시 웹 페이지의 콘텐츠를 서버에서 모두 생성한 후 완성된 HTML 파일(렌더링 준비 끝) 을 클라이언트에게 전송하는 방식

• HTML 파일을 동적으로 제어할 수 있는 소스 코드와 함께 보내줍니다.

 

👟 SSR 동작 과정

• 완성된 html 파일을 받고나서 사용자는 웹 페이지를 볼 수 있지만 JS 파일을 다운받고 처리하지 않아 바로 인터렉션을 하지 못할 수 있습니다.
• 따라서 사용자가 웹 사이트를 볼 수 있는 시간(TTV, Time To View)과 인터렉션(TTI, Time To Interact)을 할 수 있는 시간의 공백이 존재

 

👍 장점

1️⃣ 첫 페이지 로딩 속도

• 서버로부터 완전하게 만들어진 HTML 파일을 받아와 화면에 표시하기 때문에 첫 화면 로딩 속도가 빠릅니다.

2️⃣ SEO

• 모든 콘텐츠가 HTML에 담겨져 있어 효율적인 SEO가 가능

 

⚠️ 문제점

1️⃣ Blinking (화면 깜빡임)

static sites 에서 발생했던 문제

사용자가 클릭시 전체적인 웹사이트를 다시 서버에서 받아와 보여줍니다.

 

2️⃣ 서버 과부하

사용자가 많은 서비스일 수록 사용자가 클릭을 할 때마다 서버에 요청을 해 서버에서 필요한 데이터를 가져와 HTML을 만들어야 합니다.

 

3️⃣ 인터렉션을 하기위한 시간이 필요💥 (TTV ≠ TTI)

사용자가 빠르게 웹 사이트를 확인할 수 있지만 동적으로 데이터를 처리하는 자바스크립트를 아직 다운로드 받지 못해서 사용자가 클릭을 해도 반응이 없을 수 있다.

 

🔗 CSR, SSR - SPA, MPA 와의 관계

SPA의 경우에는 웹 애플리케이션에 필요한 정적 리소스들을 처음에 모두 다운로드하고 새로운 페이지 요청시 필요한 데이터를 전달받아 클라이언트에서 페이지를 갱신하기 때문에 렌더링 방식으로 CSR을 사용합니다.

 

MPA의 경우에는 새로운 요청이 있을 때마다 서버에서 새로운 정적 리소스를 받아오기 때문에 렌더링방식으로 SSR을 사용합니다.

 

✅ SPA != CSR , MPA != SSR

이 두개의 개념은 다른 개념입니다.

• 페이지가 몇개인지, 렌더링을 어디서 하는지에 따라 달라지는 개념입니다.

Next.js 같은 프레임워크를 사용하면 SPA 구조를 가지면서도 초기 페이지를 SSR로 렌더링하여 SEO(검색 엔진 최적화) 문제를 해결합니다.

 

📚 Ref.

https://www.youtube.com/watch?v=iZ9csAfU5Os&t=115s&ab_channel=드림코딩

https://www.youtube.com/watch?v=YuqB8D6eCKE&ab_channel=우아한테크

https://v3-docs.vuejs-korea.org/guide/scaling-up/ssr.html