[Nextjs] SSR vs CSR

 

CSR의 장점:

• 더 나은 상호작용성: 클라이언트 측에서 UI 갱신이 빠르고 반응적이므로 사용자 상호작용에 대한 응답성이 향상됩니다.
• 자원 효율성: 서버 측에서 렌더링을 처리하지 않으므로 서버 부하가 줄어듭니다.

CSR의 단점:

• 검색 엔진 최적화 (SEO) 문제: 초기 페이지 로드 시에는 빈 페이지가 표시되고, 검색 엔진 크롤러가 페이지 콘텐츠를 이해하는 데 어려움이 있을 수 있습니다.
• 초기 로딩 속도: 자바스크립트 파일 다운로드와 실행 시간이 필요하므로 초기 로딩 속도가 SSR에 비해 느릴 수 있습니다.

 

SSR의 장점:

• SEO 개선: 서버에서 완전한 HTML을 생성하므로 검색 엔진이 페이지 콘텐츠를 쉽게 파악할 수 있습니다.
• 더 빠른 초기 로딩: 완전한 HTML이 서버에서 제공되므로 초기 로딩이 빠릅니다.

SSR의 단점:

• 서버 부하: 서버에서 렌더링을 처리하므로 서버 부하가 증가할 수 있습니다.
• 덜 반응적인 UI: 초기 로딩 후에는 클라이언트 측에서 UI 갱신을 처리해야 하므로 CSR에 비해 상호작용성이 덜 반응적일 수 있습니다.

 

CSR과 SSR은 각각 특정 상황과 요구사항에 적합한 장점과 단점을 가지고 있으므로 프로젝트의 목표와 환경에 따라 선택되어야 합니다. 일반적으로 초기 로딩 속도와 SEO가 중요한 경우 SSR을 고려할 수 있고, 상호작용성과 자원 효율성이 우선시되는 경우 CSR을 선택할 수 있습니다.