Frontend - CSR , SSR

SSR

 

Server-Side Rendering의 약자로 컨텐츠의 렌더링을 서버에서 하는 방식입니다.

 

웹 사이트에 접속하면 브라우저는 웹 사이트의 컨텐츠를 서버에 요청합니다.

 

서버측에서 요청이 처리가 되면 브라우저는 서버측에서 완전히 렌더링된 HTML을 전달받고 화면에 표시합니다.

 

브라우저가 서버에 보내는 요청은 보통 몇 밀리초 밖에 걸리지 않지만 본인 인터넷 속도, 서버 위치, 웹 사이트에 접속하려는 사용자의 숫자, 웹 사이트 최적화 상태 등과 같은 요소에 따라 달라질 수 있습니다.

 

 

SSR 장점

 

SEO ( Search Engine Optimization )

 

SSR은 웹 사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정인 SEO(Search Engine Optimizaiton, 검색 엔진 최적화)에는 좋은성능을 보입니다.

 

컨텐츠를 요청하기전에 이미 존재하고있어 검색 엔진이 인덱싱하고 크롤링하기 좋게 되어 있습니다.

 

 

SSR 단점

 

잦은 렌더링

 

웹 사이트의 다른 페이지에 접속하면 브라우저는 다시 한번 서버측에 컨텐츠를 요청하고 완전히 렌더링된 HTML을 전달받고 화면에 표시합니다.

 

새로운 페이지가 현재 보이는 페이지와 다른 요소가 별로 없다고 하더라도 브라우저는 완전히 새로운 페이지를 서버에 요청하고 새로운 페이지가 처음부터 리렌더링됩니다.

 

컨텐츠가 적은 웹 사이트에서는 위 문제가 크게 다가오지 않지만 컨텐츠량이 많은 웹 사이트에 접속했을때, 페이지를 넘어갈때마다 렌더링이 발생한다면 사용자 경험이 나쁠 수 있습니다.

 

 

CSR

 

Client-Side Rendering의 약자로 자바스크립트를 이용해 컨텐츠를 브라우저에서 렌더링하는것을 말합니다. 웹 사이트를 렌더링하는 비교적 새로운 접근 방식으로 자바스크립트 라이브러리들이 지원하기 전까지 그렇게 유명한 방식은 아니였습니다.

 

HTML 문서를 통해 컨텐츠를 얻어오는 방식이 아닌, 처음 로딩할때 데이터는 없는 순수한 HTML 문서와 JavaScript 파일을 얻어와 브라우저에서 렌더링하는 방식입니다.

 

CSR 방식은 모든 파일을 처음 로딩할때 불러오기때문에 처음 로딩이 느리지만, 다른 페이지로 넘어갈때마다 페이지를 처음부터 새로 렌더링할 필요가 없어 페이지 전환이 매우 빠릅니다. 

 

 

CSR, SSR Workflow

 

 

각 방식의 장단점

 

SSR (Server-Side Rendering ) 

장점 

1. 검색 엔진 최적화에 유리
2. 초기 페이지 로딩이 빠름
3. 정적인 사이트에 적합

단점

1. 서버 요청이 잦다
2. 페이지 렌더링에 소비하는 시간이 많다
3. 새로운 페이지를 처음부터 렌더링
4. 사이트 상호작용 구현이 어렵다 (클릭, 드래그 등등)

 

CSR ( Client-Side Rendering ) 

장점

1. 사이트 상호작용을 구현하기 좋다
2. 초기 로딩 이후 페이지 렌더링 빠름
3. 웹 앱 구현하기 좋음

단점

1. SEO가 잘 안될 가능성 높음
2. 초기 로딩 시간이 길다
3. 많은 경우에 외부 라이브러리 필요

---

[ 그러면 언제 SSR을 쓰고, CSR을 써야하나요? ]

 

SSR가 유리한 상황

• 간단한 UI와 적은 수의 페이지를 앱을 개발할 경우
• 동적인 데이터가 적은 웹 앱을 개발하는 경우
• 사용자가 적은 웹 사이트

 

CSR가 유리한 상황

• 복잡한 UI와 많은 페이지 수를 가진 앱을 개발할 경우
• 앱이 많은 양의 동적 데이터를 가진 경우
• 사용자가 많은 웹 사이트

 

[ 출처 ]

https://www.freecodecamp.org/news/what-exactly-is-client-side-rendering-and-hows-it-different-from-server-side-rendering-bd5c786b340d/

https://velog.io/@haileyself/SPA-Client-Side-Rendering-%EA%B7%B8%EB%A6%AC%EA%B3%A0-Server-Side-Rendering-90k4ar8is1