TIL #6 - SSR과 CSR

 

TIL #6 - SSR과 CSR

 

 

 

 

📜 목표

• SSR,CSR에 대한 개념에 대해 이해한다.
• SSR,CSR의 차이점에 대해 이해한다.
• SSR,CSR은 각각 어떤 상황에 사용해야할지 이해한다.

 

---

 

SSR과 CSR이란?

 

브라우저 렌더링은 크게 '서버 사이드 렌더링(SSR)'과 '클라이언트 사이드 렌더링(CSR)'로 나누어진다.

 

 

SSR (Server Side Rendering)

➡️ 렌더링이 서버측에서 이루어지는 방식을 말한다.

 

 

🏃‍♂️ 과정

 

1. 유저가 Website 요청을 보낸다.
2. 서버는 렌더링에 사용될 HTML파일들을 생성하여 클라이언트로 전달한다.
3. 클라이언트는 받은 HTML파일들을 우선 렌더링 하는데 보여지는 것만 가능하고 조작은 불가능하다.
4. 클라이언트는 JS파일을 다운로드한다.
5. 유저는 화면 내용을 볼 수 있고 유저의 조작들이 기록된다. (아직 실행 X)
6. 클라이언트가 JS Framework를 실행시킨다.
7. 앞서 기록된 유저의 조작들이 실행되며, 이 시점부터 페이지의 정상적인 이용이 가능하다.

 

---

 

CSR (Client Side Rendering)

➡️ 렌더링이 클라이언트 측에서 이루어지는 방식을 말한다.

 

 

🏃‍♂️ 과정

 

1. 유저가 Website 요청을 보낸다.
2. CDN이 JS로 접근할 수 있는 HTML 파일들을 보낸다.
3. 클라이언트는 HTML과 JS를 다운로드 받는다. 
4. JS가 실행되고, API를 호출하여 데이터를 요청한다.
5. 서버는 API로부터 요청에 데이터로 응답한다.
6.  API로 부터 도착한 데이터는 화면의 placeholder들을 채우고 이 시점부터 페이지의 정상적인 이용이 가능하다.

 

 

---

 

SSR과 CSR의 차이점

 

 

SSR (Server Side Rendering)

• 서버쪽에서 렌더링 준비를 끝 마치고 클라이언트로 전달
• 화면을 그리는 주체는 '서버'
• JS가 다운로드 되는 동안 사용자는 화면의 일정 부분을 경험할 수 있다.
• MPA 방식
• 빠른 초기 로딩 => TTV(Time To View)와 TTI(Time To Interact) 사이의 시간 간격이 생김.
• 첫 페이지로딩은 빠르지만 이후 로딩들은 CSR보다 느린 속도를 가짐.
• 추가 로딩시 화면 깜빡임 존재
• 화면 변경시 화면을 구성하는 모든 리소스들을 매번 다운로드 받아야함.
• 매번 서버에 요청을 하기 때문에 많은 서버 리소스를 필요로 한다. (서버에 부하를 줌)
• 화면을 구성하는 각각의 페이지가 존재하기 때문에 SEO에 유리

 

 

CSR (Client Side Rendering)

• 렌더링이 클라이언트에서 일어난다.
• 화면을 그리는 주체는 '클라이언트'
• 클라이언트의 요청을 받은 서버는 HTML과 JS를 보내주고 정보를 받은 클라이언트는 렌더링을 한다.
• 한꺼번에 다운로드를 받기 때문에 그동안 사용자는 화면의 어떠한 부분도 경험할 수 없다.
• 초기에 모든 JS 파일을 다운로드 받는다.
• SPA 방식
• SSR과 비교하면 비교적 느린 초기 로딩
• 첫 페이지 로딩은 느리지만 이후 로딩들은 SSR 보다 빠른 속도를 가짐.
• 추가 로딩시 화면 깜빡임 없음
• 화면 변경시 변경에 필요한 리소스들만 다운로드 받으면 됨.
• 서버에 부하가 적다.
• SEO에 적합하지 않음. (JS 까지 모두 다운 되어야 페이지가 로드되기 때문.)

 

 

 

❗잠깐 MPA? SPA?

 

https://bmy1320.tistory.com/entry/TIL-7-SPA%EC%99%80-MPA

TIL #7 - SPA와 MPA

 

---

 

언제 뭘 쓰면 좋을까?

 

 

이때는 SSR

• 한 번에 모든 파일을 다운로드 받을 필요가 없으므로 네트워트가 느린 곳
• 초기 로딩시에도 사용자의 경험을 우선시 할 때
• SEO를 신경 쓸 때
• 웹사이트에 동적인 컨텐츠가 많을 때

 

 

 

 

이때는 CSR

• 한 번에 모든 파일을 다운로드 받으므로 네트워크가 빠른 곳.
• 초기 로딩시 사용자의 경험을 비교적 덜 신경 쓸 때
• SEO를 신경쓰지 않을 때

 

 

 

 

 

+)

리액트의 SSR을 간편하게 한 것이 바로 Next.js 이다.

 

 

---

👨‍💻 마무리

 

프론트엔드 필수 지식 SSR과 CSR에 대해 알아봤습니다.

 

브라우저 렌더링 방식이 이렇게 나누어진 다는 것과 이 두 방식 중에 어떤 방식으로 접근할 지는 웹사이트에서 어떠한 것을 할 계획에 따라 달라진다는 점들이 되게 흥미로웠네요 😁

 

덤으로 Next.js 가 탄생하게 된 배경도 알게 되니 재밌던 주제였습니다. 

 

얼른 React 뿌시고 Next.js도 경험해보고 싶네요~!!