CSR과 SSR은 무엇일까?

들어가기 전..

Next.js에서는 클라이언트 컴포넌트와 서버 컴포넌트로 나뉩니다.

기본적으로 app폴더의 하위의 모든 컴포넌트는 서버컴포넌트입니다!

 

✨ 서버 컴포넌트와 클라이언트  컴포넌트

- 서버 컴포넌트(서버상에서 실행되는 컴포넌트)

우리는 React에서 프로젝트를 하면서 console.log를 찍었을 경우 크롬 브라우저의 콘솔창에서 로그를 확인하였습니다.

하지만 Next.js에서 컴포넌트를 만들어 console.log 찍었을 경우에 크롬 브라우저에서 확인하면 로그를 확인할 수 없습니다. 그럼 찍은 로그는 어디서 확인할 수 있을까요? 바로 terminal에서 확인할 수 있습니다!

이처럼 Next.js에서는 컴포넌트의 실행 환경이 브라우저인지, 서버인지에 따라 서버 컴포넌트인지 클라이언트 컴포넌트인지가 결정됩니다!

console.log뿐만 아니라 alert처럼 유저와 상호작용이 필요한 메서드, useState와 같은 client-side rendering을 위해 만들어진 기술들도 사용할 수 없습니다.

 

- 클라이언트  컴포넌트(브라우저 상에서 실행되는 컴포넌트)

그럼 컴포넌트에서 alert나 useState를 사용하고 싶으면 어떻게 해야할까요?

컴포넌트 최상단에 "use client"를 붙여주면 됩니다!

 

✨ SSR(Server Side Rendering)

말 그래도 서버 쪽에서 렌더링을 하여 화면에 보여주는 방식을 말합니다.

fetch 한 데이터는 실시간으로 계속 바뀝니다. 컴포넌트 요청이 있을 때마다 변화를 적용하여 가장 최신의 데이터를 유저에게 제공합니다.

 

✨ CSR(Client Side Rendering)

SSR과 달리 렌더링이 클라이언트 쪽에서 일어납니다.

CSR은 빌드타임에 컴포넌트를 초기 생성하지 않습니다. Javascript로 이루어진 리액트파일을 다운로드 받고 그제야 화면에 그려지게 됩니다.

✨ SSR과 CSR의 차이

1. 웹페이지를 로딩하는 시간

 

첫 페이지 로딩 시간

• CSR의 경우 HTML, CSS와 모든 스크립트를 한 번에 불러옵니다.
• SSR은 필요한 부분의 HTML과 스크립트만 불러오게 되므로 평균적으로 SSR이 더 빠릅니다. 

나머지 로딩 시간

• 첫 페이지를 로딩한 후, 사이트의 다른 곳으로 이동하는 식의 동작을 가정해 보았을 때 CSR은 이미 첫 페이지를 로딩할 때 나머지 부분을 구성하는 코드를 받아왔기 때문에 빠릅니다.
• SSR은 첫 페이지를 로딩한 과정을 정확하게 다시 실행 하므로 더 느립니다.

2. 검색엔진 최적화(SEO)

검색 엔진은 자동화된 로봇인 '크롤러'로 웹 사이트들을 읽는다. CSR은 자바스크립트를 실행시켜 동적으로 컨텐츠가 생성되기 때문에 자바스크립트가 실행되어야 meatadata가 바뀌었다.

SSR은 애초에 서버 사이드에서 컴파일되어 클라이언트로 넘어오기 때문에 크롤러에 대응하기 용이하다.

✨ 사용 권장 예시

SSR

• 네트워크가 느릴 때(CSR은 한 번에 SSR은 각 페이지마다 나눠서 불러오기 때문)
• SEO가 필요할 때
• 최초 로딩이 빨라야 하는 사이트를 개발할 때
• 메인 스크립트가 크고 로딩이 매우 느릴 때
• 웹 사이트가 상호작용이 별로 없을 때

CSR

• 네트워크가 빠를 때
• 서버의 성능이 좋지 않을 때
• 사용자에게 보여줘야 하는 데이터 양이 많을 때(로딩창을 띄울 수 있다는 장점이 있다!)
• 메인 스크립트가 가벼울 때
• 웹 어플리케이션에 사용자와 상호작용할 것들이 많을 때