SSR vs CSR in Next.js

🔥 프로젝트 중...

Next.js로 간단한 프로젝트를 진행하면서 최근 게시물을 보여주는 페이지를 SSR로 할 것인가 CSR로 할 것인가에 대한 중대한(?) 결정을 내리게 되었다.

Next.js를 사용한다면 꼭 알아야 하는 내용, 바로 SSR이다. SSR은 서버에서 렌더링을 진행하는 방식이다.

장점
- SEO(검색 엔진 최적화)가 좋다.
  
  대부분의 웹 크롤러와 봇들은 js를 실행 시키지 못하고 HTML에서만 컨텐츠를 수집하기 때문에 CSR로 개발된 페이지를 빈 페이지로 인시하게 되지만 SSR 방식은 View를 서버에서 렌더링하기 때문에 HTML에 모든 컨텐츠가 저장되어 있어 SEO 사용에 용이하다.(구글 검색엔진의 경우 자바스크립트 엔진이 내장되어 있다고 한다.) 초기 렌더링 속도가 빠르다.
단점
- 서버에서 불러오다 보니 서버의 부하가 심하다. 새로운 페이지를 요청할 때 마다 새로고침이 발생한다.

CSR은 영어 그대로 클라이언트 쪽에서 렌더링을 진행한다는 것이다.

유저가 웹사이트 요청을 보내면 cdn이 html 파일과 js 파일에 접근할 수 있는 링크를 클라이언트로 보내고 클라이언트는 html,js 를 다운로드 받는다. 이때 유저는 ssr과 달리 아무 화면도 볼 수 없다.
다운이 완료된 js가 실행되고 이때 유저들은 placeholder를 보게 된다.
서버가 api로부터 요청에 응답하고 api로 부터 받은 data를 placeholder 자리에 넣어준다. 이때 부터 페이지와 유저는 상호작용 할 수 있게 된다.

장점
- 초기 로딩 속도가 빠르다.
- 서버에서 렌더링을 하지 않기 때문에 서버 부하가 적다.
- 사용자가 페이지를 요청할 때마다 새로고침이 발생하지 않는다.
단점
- SEO(검색 엔진 최적화)에 대한 작업이 필요하다.
  
  CSR은 서버에서 렌더링을 하지 않기 때문에 검색 엔진이 페이지를 크롤링할 때 페이지의 내용을 제대로 수집하지 못할 수 있다.
- 첫 로딩 속도가 느리다.
  
  사용자가 페이지를 요청할 때마다 서버에서 데이터를 받아와야 하기 때문에 첫 로딩 속도가 느리다.

이런 차이들이 있지만 눈으로 확인하는 것 만큼 효과적으로 알수 있는 방법은 없다

지금 이 페이지는 아래 Recent Posts에서 data fetch를 하고 있는 페이지이다. 위에 line 4개는 애니메이션 작업 때문에 client 컴포넌트로 작업했고 큰 원 사진은 server 컴포넌트로 만들었다.

ssr 의 특징 답게 빠르게 컨텐츠를 확인 할 수있다는 장점을 눈으로 확인할 수 있었다.

빠르게 컨텐츠가 보여지는것이 마음에 든다.

아래 Recent Posts부분을 보면 ssr과 달리 컨텐츠가 조금 더 느리게 나오는 것을 확인 할 수 있다.

첫 컨텐츠가 나오는 속도는 확실하게 ssr쪽이 더 빨랐다.

약간의 고민 끝에 나는 ssr를 사용하기로 했다.

이 페이지는 처음 웹 사이트에 들어갈때 보이는 메인 페이지이다. 다른 페이지는 몰라도 처음 메인 페이지는 최대한 빠르게 컨텐츠를 보여주고 싶었다.

다른 페이지도 아닌 처음 메인 페이지가 렌더링하는데 느리다면 사용자가 이 웹 사이트가 무슨 기능을 가지고 있는 페이지인지 느리게 파악할 수 있다는 것이 마음에 걸렸다.

눈으로 직접 확인해보니 ssr 과 csr의 장점과 단점이 글로만 보았을 때 보다 명확하게 느껴졌다.

중요한건 어떤게 무조건 더 좋다는 것은 없다는 것이다.

개발하고자 하는것이 무엇이냐에 따라서 어떤 방식을 사용할지 정해야 할 것 같다.

ssr, csr 뿐만 아니라 다른 렌더링 방식도 있다.

SSG(Static Site Generation)은 SSR과 다르게 클라이언트가 요청하는 시점이 아닌 빌드 시 페이지를 미리 생성해 놓는 방식을 말한다.

ISR(Incremental Static Regeneration)은 빌드 시점에 페이지를 렌더링 한 후, 설정한 시간 마다 페이지를 새로 렌더링하는 방식을 말한다.

한로로 음악 좋아요~