SEO ( SSR, CSR )

이전 마케팅 업무를 할 때 SEO에 관해서 자주 들어봤고, 사용도 많이 했다.
개발 공부를 하던 중 SEO를 들을 수 있었고, 마케팅 상위노출 방식에만 쓰이던 방법이 어떤 식으로 렌더링되고 정확히 어떻게 진행되는지 알게 되어 내용을 정리해 보려고 한다.

📌 SEO

검색 엔진 최적화(Search Engine Optimization)는
사이트를 검색 결과에 잘 노출될 수 있도록 하는 것인데

구글, 네이버와 같은 검색 엔진은 자체적으로 만든 검색봇을 이용해서
수 많은 웹페이지에서 검색 결과에 근접한 페이지를 최상위에 매칭해준다

소비자의 검색어가 광고 키워드에 가장 많이 연관되는 만큼 마케팅에서도 중요한 부분 중 하나였다.

📌 렌더링

이 때, 검색봇이 수집할 때 활용하는 것으로 웹브라우저 기반 해석(렌더링)이 있다.

대표적인 웹브라우저 랜더링 방식에는 2가지가 있는데, 그것이 바로 SSR과 CSR인 것이다.

대표적인 웹 브라우저 렌더링 방식

1. Client-side rendering(CSR)
2. Server side rendering(SSR)

CSR은 Client Side Rendering의 약자로, 클라이언트 측에서 렌더링 하는 방식이고, SSR은 Server Side Rendering의 약자로, 서버 측에서 렌더링 하는 방식이다. 말 그대로 어느 Side에서 렌더링을 준비하느냐에 따라 나뉘는 개념이다.

즉, 검색 엔진이 렌더링된 웹페이지를 해석할 때 자바스크립트를 활용해 동적으로 HTML을 처리하는 경우가 아니라면 정적인 HTML의 내용을 먼저 수집한다는 것이다.

📌 CSR

1. 동작방식

1. 유저가 웹사이트에 방문하면, 브라우저가 서버에 콘텐츠를 요청한다.
2. 이에 서버는 빈 뼈대만 있는 HTML을 응답으로 보내준다.
3. 브라우저가 연결된 JavaScript 링크를 통해 서버로부터 다시 JavaScript 파일을 다운로드한다.
4. JavaScript를 통해 동적으로 페이지를 만들어 브라우저에 띄워준다.

2. 장단점

- 장점

1. 초기 로딩 이후에 페이지 일부를 변경할 때는 서버에서 해당 데이터만 요청하면 되기 때문에 이후 구동 속도는 빠르다.
2. 서버는 빈 뼈대만 있는 HTML을 넘겨주는 역할만 수행하면 되기 때문에 서버 측의 부하가 적은 편이다.

- 단점

1. CSR은 브라우저가 JavaScript 파일을 다운로드하고, 동적으로 DOM을 생성하는 시간을 기다려야 하기 때문에 초기 로딩 속도가 느리다.
2. 브라우저들이 가지는 웹 크롤러는 HTML을 읽어 검색 가능한 색인을 만들어 내는데, 웹 크롤러 봇 입장에서는 HTML이 텅텅 비어 있는 것처럼 보여서 색인할만한 콘텐츠가 존재하지 않기에, SEO(검색엔진 최적화)에 불리하다.

📌 SSR

1. 동작방식

1. 유저가 웹사이트에 방문하면, 브라우저가 서버에 콘텐츠를 요청한다.
2. 이에 서버는 페이지에 필요한 데이터를 즉시 얻어와 모두 삽입하고, CSS까지 모두 적용해 렌더링 준비를 마친 HTML과 JavaScript코드를 브라우저에 응답으로 전달한다.
3. 브라우저에서는 JavaScript코드를 다운로드하고 HTML에 JavaScript로직을 연결한다.

2. 장단점

- 장점

1) SSR은 모든 데이터가 이미 HTML에 담긴 채로 브라우저에 전달되기 때문에 SEO에 유리하다.
2) 자바스크립트 코드를 다운로드 받고, 실행하기 전에 사용자가 이미 HTML이 렌더링 된 화면을 볼 수 있다.
-> JavaScript 다운로드를 기다려야 했던 CSR 보다 초기 구동 속도가 빠름

- 단점

1) JavaScript 로직이 모두 연결될 때까지 사용자가 버튼을 클릭하거나 이동하려고 할 때 아무 반응이 없을 수 있다.
-> HTML,CSS,JavaScript를 한번에 불러오기 때문에 CSR보다는 렌더링 속도가 느리기 때문
-> 이로 인해 화면 깜빡임이 있을 수 있음

📌 어떤 페이지에 CSR,SSR을 활용할까?

✔️CSR

• 유저와 상호작용이 많은 페이지
• 고객의 개인정보로 이루어진 페이지
  -> 검색엔진에 노출될 필요가 없기 때문

✔️SSR

• 상위노출 홍보가 필요한 페이지
• 업데이트가빈번해 데이터가 자주 바뀌는 페이지
• 누구에게나 항상 같은 내용을 보여주는 페이지