SEO(CSR, SSR, SSG)

🐥 웹 렌더링하는데 3가지의 다른 방식인 CSR, SSR SSG가 있다.
우선 SEO를 알아보고 다음에 렌더링 3형제를 알아보자.

SEO가 뭐야

세오. 조세오 아니다. 헿

SEO(Search Engine Optiomization)는 검색엔진 최적화이다.

사용자의 니즈에 맞춰서 웹에서 노출하고자 하는 키워드와 컨텐츠를 제작한다. 제작된 페이지가 검색 결과 페이지에서 잘 노출될 수 있도록 웹페이지의 태그와 링크 구조를 개선한다.

검색자 (검색 유저)의 의도를 이해하고 이에 충실히 맞춰 웹 페이지의 콘텐츠를 제작하고, 이 페이지가 검색 결과 페이지에서 잘 노출 되도록 웹페이지의 태그와 링크 구조를 개선하여 유입되는 트래픽을 늘린다.

CSR?

CSR(Client Side Rendering)이란 사용자의 요청에 따라 필요한 부분만 응답받아 렌더링 하는 방식이다. 최초에 한 번 서버에서 전체 페이지를 로딩해서 보여주고난 뒤에 사용자의 요청이 올 때마다 리소스를 서버에서 제공한 후 클라이언트가 해석하고 렌더링한다.
CSR은 HTML 파일(코드) 자체로 배포되는 정적 사이트에 쓰인다.

SSR??

SSR(Server-side Rendering)은 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식이다. SSR을 사용하면 모든 데이터가 매핑된 서비스 페이지를 클라이언트(브라우저)에게 바로 보여줄 수 있다. 서버를 이용해서 페이지를 구성하기 때문에 클라이언트에서 구성하는 CSR보다 페이지를 구성하는 속도는 느리지만 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빠르다는 장점이 있다. 게다가 SEO를 쉽게 구성할 수 있다. 따라서 데이터가 수시로 업데이트되고, 개인화된 경험을 제공해야하는 전자 상거래(E-commerce) 플랫폼이나 소셜 네트워크 서비스(SNS)에 매우 적합하다.

SSG???

SSG(Static Site Generation)는 누가 접속하든지 항상 동일한 내용을 보여주는 웹사이트를 만드는데 최적화된 방법이다. 회사소개, 개인 블로그처럼 변경이 자주 일어나지 않는 소규모 웹에 적용하기 좋다.
유저의 데이터에 따라 다르게 보여주는 페이지의 경우는 매 번 서버에서 동적으로 생성할 필요가 있지만, 모든 유저에게 항상 같은 내용을 보여주는 페이지는 매 번 동적으로 생성할 필요는 없다.
SSG로 생성된 웹은 서버와 클라이언트 측 모두 랜더링을 위해 할 일이 별로 없기 때문에 속도가 굉장히 빠르다. 게다가 CDN(Content Delivery Network)을 활용하면 미리 만들어 놓은 웹페이지를 유저와 지리적으로 최대한 가까운 곳에 캐싱(catching)해놓을 수도 있다.

ㅤ
ㅤ
ㅤ
ㅤㅤ
ㅤ
ㅤ

CSR 이미지 출처:https://miracleground.tistory.com/entry/SSR%EC%84%9C%EB%B2%84%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81%EA%B3%BC-CSR%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8-%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81

참고 출처

• https://hanamon.kr/spa-mpa-ssr-csr-%ec%9e%a5%eb%8b%a8%ec%a0%90-%eb%9c%bb%ec%a0%95%eb%a6%ac/
• https://d2.naver.com/helloworld/7804182
• https://im-developer.tistory.com/227
• https://www.daleseo.com/spa-ssg-ssr/