SEO ?
SEO(Search Engine Optimization)는 검색 엔진에서 웹 사이트를 검색하고 색인(index)하여 검색 결과 페이지에 노출시키기 위한 기술입니다. 검색 엔진은 웹 페이지의 콘텐츠를 수집하고 분석하여 검색어와 관련된 콘텐츠를 사용자에게 제공합니다. 따라서, 웹 사이트가 검색 엔진에서 잘 검색될 수 있도록 콘텐츠와 구조를 최적화하는 것이 중요합니다.
쉽게 말해 웹사이트가 유기적인 검색 방식을 통해 검색 엔진에서 상위에 노출될 수 있도록 최적화하는 과정을 말합니다.
리액트를 이용한 SPA에서는 검색 엔진에 노출되는 것이 힘들기 때문에 이를 보완하기 위해서 SSR을 통해서 해결합니다.
SSR? CSR? SSG?
CSR(Client-side rendering), SSR(Server-side rendering), SSG(Static Site Generation)은 웹 페이지의 렌더링 방식을 나타내는 용어입니다.
1) CSR
클라이언트에서 모든 렌더링 작업을 처리하는 방식입니다. 초기 로딩 속도가 느리지만, 이후 페이지 전환이 빠르고, 사용자 경험이 좋습니다. 예를 들어, React, Angular, Vue.js 등의 프론트엔드 프레임워크에서 주로 사용됩니다.
📍장단점
빠른 사용자 경험, 클라이언트 측에서 모든 렌더링 작업을 처리하기 때문에 서버 부담이 적습니다. 그러나 초기 로딩 속도가 느리고, 검색 엔진 최적화가 어려울 수 있습니다.
2) SSR
서버에서 렌더링 작업을 처리하고, 클라이언트에게 완전한 HTML 페이지를 전달하는 방식입니다. 초기 로딩 속도가 빠르지만, 페이지 전환 시 서버 요청이 필요하므로 사용자 경험이 느릴 수 있습니다. 예를 들어, Next.js, Nuxt.js 등의 SSR 프레임워크에서 주로 사용됩니다.
📍장단점
초기 로딩 속도가 빠르고 검색 엔진 최적화가 용이합니다. 그러나 서버 부담이 크고, 페이지 전환이 느릴 수 있습니다.
3) SSG
미리 빌드된 HTML 파일을 서버에서 제공하는 방식입니다. 초기 로딩 속도가 빠르고, SEO 최적화에 용이합니다. 그러나 페이지 전환 시 서버 요청이 필요하므로 사용자 경험이 느릴 수 있습니다. 예를 들어, Gatsby, Hugo, Jekyll 등의 SSG 도구에서 주로 사용됩니다.
📍장단점
초기 로딩 속도가 빠르고 SEO 최적화가 용이합니다. 그러나 페이지 전환이 느릴 수 있습니다.
So...
프로젝트의 목적과 특징을 고려하여 적절한 렌더링 방식을 선택하는 것이 중요합니다. 예를 들어, 대규모 웹 애플리케이션을 구축하는 경우에는 CSR을 사용하여 빠른 사용자 경험을 제공하면서도 서버 부담을 줄일 수 있습니다. 반면, 콘텐츠 중심의 웹 사이트를 구축하는 경우에는 SSR이나 SSG를 사용하여 초기 로딩 속도를 높이고 SEO 최적화를 용이하게 할 수 있습니다.
