서버 사이드 렌더링 (SSR) & 클라이언트 사이드 렌더링 (CSR)

웹 프로젝트 진행전에 웹 자체에 대해

이해하고 공부하는 시간을 갖게되네요

정리해두는게 좋을거같아서 정리해봅니다.🧐

---

1. 렌더링이란?

문서의 표현식을 그래픽 표현식으로 변형시켜 출력해주는 작업을 말합니다.

쉽게 말해 어떤 페이지에 접속 시 출력이 해당 페이지를 화면에 그려 볼 수 있게 해주는 작업을 말합니다.

 

2. 서버 사이드 렌더링(SSR)이란?

SSR은 Server Side Rendering의 약어로서 서버에서 렌더링을 수행하는 것을 말합니다.

사용자가 웹 페이지에 접근할 때, 서버로 페이지에 대한 요청이 이루어집니다.

서버에서는 html, view와 같은 리소스들을 어떻게 보여질지 해석하고 렌더링해 사용자에게 반환하게 됩니다.

이미지 출처 https://goodgid.github.io/Server-Side-Rendering-and-Client-Side-Rendering/

 

3. 클라이언트 사이드 렌더링(CSR)이란?

CSR은 Client Side Rendering의 약어로서 최초에 1번 서버에서 전체 페이지를 로딩하여 보여주고

이후에는 사용자의 요청이 있을 시에만 필요한 리소스 데이터를 서버로부터 제공받고 클라이언트가 해당 데이터를 해석, 렌더링해 사용자에게 반환해주는 방식입니다.

이미지 출처 https://goodgid.github.io/Server-Side-Rendering-and-Client-Side-Rendering/

4. 각각의 렌더링 비교

이미지 출처 https://asfirstalways.tistory.com/244

크게 세가지 이슈를 중점적으로 비교해 볼 수 있다. 초기 렌더링 속도, 검색엔진 최적화, 보안 문제이다.

	클라이언트 사이드 렌더링 (CSR)	서버 사이드 렌더링 (SSR)
초기 렌더링속도	서버에서 View를 렌더링 하지 않고 html, js, 각종 리소스를 다운 받은 후 브라우져에서 렌더링을 하기 떄문에 초기 View로딩 속도는 SSR보다 길다. (그러나 첫 로드 이후에는 사용자의 행동에 따라 필요한 부분만 다시 로드하기 때문에 빠른 상호작용이 가능하다)	View를 서버에서 렌더링해 가져오기 때문에 첫 로딩이 매우 짧다.
검색 엔진 최적화 (SEO)	대부분의 웹 크롤러, 봇들이 자바 스크립트 파일을 실행시키지 못하고 HTML에서만 컨텐츠를 수집하기 때문에 CSR방식으로 구현된 페이지는 빈 껍데기로 인식하게 된다. 검색엔진에 제대로 노출 될 수 없다.	View를 서버에서 전부 렌더링해 가져오기 때문에 HTML에 모든 컨텐츠가 저장되어 있어 SEO적용에 문제가 없다.
보안	클라이언트 측의 쿠키 말고는 사용자 정보를 저장할 공간이 마땅하지 않다.	사용자에 대한 정보를 서버 측에서 세션으로 관리한다.

어떤 것이 더 낫다라고 단정지을 수 없고 상황에 따른 유연한 활용이 필요하다고 생각든다.

 

5. MVC 구조

이미지 출처 https://goodgid.github.io/Server-Side-Rendering-and-Client-Side-Rendering/

SSR과 CSR의 MVC 구조다 한번 살펴 보면 좋을것 같다.

 

• 참고 사이트

https://goodgid.github.io/Server-Side-Rendering-and-Client-Side-Rendering/

https://asfirstalways.tistory.com/244

https://brownbears.tistory.com/411?category=158664

서버 사이드 렌더링(SSR), 클라이언트 사이드 렌더링(CSR)

서버 사이드 렌더링 그리고 클라이언트 사이드 렌더링

서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)