CSR SSR SSG 의 정의와 장단점 비교

 

CSR(Client-Side Rendering)

CSR은 클라이언트 사이드에서 렌더링하는 방식을 말합니다. 기존에는 서버에서 데이터를 받아와서 HTML 코드를 완성하고 전달해주는 방식이었습니다. 그러나 CSR 방식에서는 서버는 빈 HTML 코드를 전달하고, 클라이언트에서 JavaScript를 이용하여 페이지를 완성합니다.

 

CSR 방식의 장점은 다음과 같습니다.

• 사용자 인터랙션에 대한 응답이 빠릅니다.
• 서버에서는 데이터만 전달하면 되므로 서버 부담이 덜합니다.

 

그러나 CSR 방식은 몇 가지 단점도 있습니다.

• 초기 로딩 후 데이터를 받아와야 하기 때문에 초기 로딩 이후에는 다소 느릴 수 있습니다.
• 검색 엔진 최적화(SEO)가 어렵습니다.

 

SSR(Server-Side Rendering)

SSR은 서버에서 페이지를 렌더링하는 방식을 말합니다. 클라이언트에서 요청이 들어오면 서버에서 데이터를 받아서 완성된 HTML 코드를 클라이언트에게 전달합니다.

 

SSR 방식의 장점은 다음과 같습니다.

 

• 검색 엔진 최적화(SEO)가 용이합니다.
• 초기 로딩이 빠르고, 사용자가 페이지를 보는 동안에도 서버에서 렌더링을 처리할 수 있으므로 페이지 속도가 빠릅니다.

 

SSR 방식의 단점은 다음과 같습니다.

• 사용자 인터랙션에 대한 응답이 느립니다.
• 서버에서 렌더링을 처리해야 하므로 서버 부담이 높습니다.

 

SSG(Static Site Generation)

SSG는 빌드 시점에 미리 페이지를 생성하는 방식을 말합니다. 데이터가 변경되지 않는 경우, 빌드 시점에 생성된 HTML 파일을 그대로 사용하므로 서버에서 렌더링할 필요가 없습니다.

 

SSG 방식의 장점은 다음과 같습니다.

 

• 초기 로딩 속도가 매우 빠릅니다.
• 서버에 부하를 줄일 수 있습니다.
• 보안에 강합니다.

 

SSG 방식의 단점은 다음과 같습니다.

• 사용자 인터랙션에 대한 응답이 느립니다.
• 데이터가 자주 변경되는 경우에는 사용하기 어렵습니다.

 

 

정리

각각의 방식은 장단점이 있기 때문에 상황에 맞게 선택하여 사용하는 것이 중요합니다.

 

예를 들어, 블로그나 문서 페이지와 같이 데이터가 자주 변경되지 않는 경우 SSG 방식을 사용하는 것이 좋습니다.

 

반면, 대화형 웹 애플리케이션과 같이 사용자 인터랙션이 높은 경우 CSR 방식이 적합할 수 있습니다.

 

또한, 초기 로딩 속도와 SEO 최적화가 중요한 경우 SSR 방식을 고려할 수 있습니다.

 

최근에는 CSR 방식과 SSR 방식을 조합하여 사용하는 것이 일반적입니다. 이를 SSR + CSR 또는

 

최적화된 서버 사이드 렌더링(optimized server-side rendering)이라고 합니다.

 

초기 로딩 시 SSR 방식으로 페이지를 렌더링하고, 이후에는 CSR 방식으로 사용자 인터랙션을 처리합니다.

 

이를 통해 초기 로딩 속도와 SEO 최적화를 유지하면서도 사용자 인터랙션에 대한 응답 속도를 빠르게 할 수 있습니다.

 

최근에는 SSG 방식의 발전으로 미리 빌드된 정적 페이지를 서비스하는 정적 사이트 호스팅 플랫폼이 등장하고 있습니다.

 

이를 통해 서버 구축과 관리의 부담을 덜고, 초기 로딩 속도와 보안을 강화할 수 있습니다.

 

---

 

SSR,SSG는 프레임워크인 Next.js에서 쉽게 구현할 수 있습니다.

▽ Next.js에 대한 정리 글 ▽

Next.js 왜 쓸까요?