[CS] CSR, SSR, SEO,, 그게 다 뭔데?

안녕하세요! 개발하는 토마토 입니다 🍅 

 

CSR이랑 SSR이 차이가 있는건 알겠고,, SEO에 영향이 있다는건 알겠는데,, 구체적으로 어떻게 영향을 미치고 있는건지 모르겠단 말이죠?

그래서 준비해봤습니다!

 

1. CSR 과 SSR의 차이

2. SEO 어떤 이유에서 영향을 받는지

 

 

1. CSR vs. SSR

(1) CSR (Client Side Rendering)

웹 페이지의 렌더링을 클라이언트가 처리하는 것

* 렌더링 (Rendering) :컴퓨터가 HTML , CSS, Javascript 로 구성된 코드를 시각적으로 화면에 표시하는 것

 

 

동작 과정

 

1. 초기 요청

- 클라이언트에서 서버에 초기 요청을 보냄

 

2. 최소한의 HTML 전달

- 서버에서 클라이언트에 HTML을 보내면, 클라이언트에서 다운로드

 

3. HTML 해석 후 Javascript 다운로드 및 실행

- HTML 파일 안에서 <script> 태그를 만나면 JavaScript 파일을 추가로 다운로드

 

4. 서버로부터 데이터를 가져오고, DOM 업데이트 화면 렌더링

 

특징

1. 초기 로딩 시간:

JavaScript와 데이터를 모두 받아 실행해야 하므로 초기 로딩이 느릴 수 있음.

 

2. SEO 제한:

초기 HTML이 빈 상태로 제공되기 때문에 검색 엔진 크롤러가 콘텐츠를 제대로 인덱싱하기 어려울 수 있음.

 

React, Angular, Vue.js 와 같은 프레임워크가 기본적으로 CSR 기본이라고 해요!

 

(2) SSR (Server Side Rendering)

 

웹 페이지의 렌더링을 서버에서 처리하여 클라이언트에 완전한 HTML을 전달하는 방식

 

1. 초기 요청

- 클라이언트에서 서버에 초기 요청을 보냄.

 

2. 서버에서 HTML 렌더링

- 서버에서 필요한 데이터를 가져와 HTML을 완전히 렌더링한 후, 클라이언트에 전송.

 

3. 완전한 HTML 전달

- 클라이언트는 서버로부터 완전한 HTML 파일을 수신하고, 화면에 표시.

 

4. JavaScript 다운로드 및 실행

- 화면 렌더링 후, JavaScript가 실행되어 추가적인 동작이나 상호작용이 가능해짐.

 

특징

 

1. 빠른 초기 로딩 시간

- 서버에서 렌더링된 HTML이 전달되므로, 클라이언트에서 추가적인 작업 없이 즉시 콘텐츠를 표시할 수 있음.

 

2. SEO 친화적

- 검색 엔진 크롤러가 완전한 HTML을 받아 콘텐츠를 쉽게 인덱싱 가능.

 

 

Next.js 와 같은 프레임워크가 기본적으로 CSR 기본이라고 해요!

 

 

2. SEO (Search Engine Optimization) - 검색 엔진 최적화

 

검색 엔진은 웹을 크롤링하면서 페이지 데이터를 수집하고, 수집한 데이터를 분석하여 검색 결과에서 제공할 준비를 합니다 ! 그리고 알고리즘에 따라 사용자 검색어와 관련성이 높은 순서대로 결과를 나열하는 과정을 거쳐 사용자에게 결과를 제시합니다!

 

 

CSR :초기 HTML이 비어 있거나 기본적인 정보만 제공하므로 검색 엔진 크롤러가 내용을 제대로 인덱싱하지 못하는 문제가 발생 가능

 

SSR :서버에서 완전한 HTML을 생성하여 클라이언트에 제공하기 때문에 검색 엔진 크롤러가 페이지의 콘텐츠를 즉시 크롤링 및 인덱싱 가능