Colin's Blog
[javascript] Next.js에서의 SSR(Server-Side Rendering)과 CSR(Client-Side Rendering) 중 어떤 것을 사용해야 할까요?

  1. 서버 측 렌더링 (SSR) 서버 측 렌더링은 웹 페이지를 서버에서 렌더링하여 클라이언트에게 완전히 렌더링된 페이지를 전달합니다. 이는 초기 로딩 속도를 개선하고 SEO(Search Engine Optimization)에 유리합니다. 또한 특정 데이터의 보안이 필요한 경우, 서버 측에서 데이터를 불러올 수 있으므로 CSR보다 안전합니다. 하지만 서버 자원이 많이 소모되며, 초기 로딩 시간이 오래 걸릴 수 있습니다.

  2. 클라이언트 측 렌더링 (CSR) 클라이언트 측 렌더링은 HTML 소스 코드와 함께 JavaScript 번들을 클라이언트에게 전달하고, 클라이언트에서 JavaScript를 실행하여 페이지를 렌더링합니다. CSR은 초기 로딩 속도가 빠르고 사용자 경험이 향상될 수 있습니다. 데이터의 동적 로딩에 용이하며, 서버 자원 소모가 적습니다. 그러나 초기 로딩 시 빈 화면이 나타날 수 있으며, 검색 엔진 최적화에 어려움이 있을 수 있습니다.

따라서 SSR과 CSR 중 어떤 것을 선택해야 할지는 프로젝트의 요구 사항에 따라 다릅니다. 예를 들어, SEO가 중요하고 초기 로딩 성능이 큰 영향을 미치는 경우 SSR이 적합합니다. 반면, SPA(Single Page Application)와 같이 동적 데이터 로딩이 필요하고 사용자 경험에 초점을 맞추는 경우 CSR이 적합할 수 있습니다.

Next.js는 두 가지 방식을 모두 지원하기 때문에, 개발자는 페이지마다 SSR 또는 CSR을 선택할 수 있습니다. 페이지마다 다른 렌더링 방식이 필요한 경우, Next.js의 동적 라우팅 기능을 사용하여 SSR 및 CSR을 조합할 수도 있습니다.

이러한 선택은 프로젝트의 요구 사항과 성능 요구 사항에 따라 달라질 수 있으므로, 프로젝트 특성을 고려하여 적절한 렌더링 방식을 선택해야 합니다.

참고 자료:

© 2018 Colin. All rights reserved.