Next.js 와의 첫 만남 (CSR vs SSR)

회사에서 React Native 앱 개발을 주력으로 하고 있는데, 어느날은 Next.js로 구현된 홈페이지 리뉴얼 일감이 주어졌다.

Next.js 라 하면 보통 SSR을 쉽게 구현할 수 있는 자바스크립트 프레임워크라는 설명이 따라온다. 당시 CSR과 SSR이 무엇인지도 모르는 채여서 한참 이런저런 설명을 찾았었다.

 

 

CSR(Client Side Rendering) 과 SSR(Server Side Rendering)이란?

이름에서도 알 수 있지만, 결국 어디에서 화면을 랜더링 해주느냐의 방식 차이다.

우리가 보는 화면은 기본적인 html 틀과, 그 안에 들어갈 다양한 데이터들이 합쳐져서 완성된다. 

 

 

첫 화면을 만드는데 필요한 내용을 서버에서 받아온 뒤, 클라이언트쪽에서 조합 후 보여주면 CSR,

서버에서 이미 완성된 html을 보내줘서 클라이언트쪽에서 그걸 그대로 보여준다면 SSR 방식이 된다.

간단한 장단점은 아래와 같다(서로 반대).

 

 

CSR

장점 

• 효율적이다 : 변경된 부분만 서버에 요청해서 받아옴
• 화면 깜빡임이 없다 : 전체 내용을 한번에 받아오기 때문에 화면을 이동해도 깜빡임 없이 필요한 부분만 업데이트 됨

단점

• 첫 화면을 보기까지 시간이 오래걸린다 : 첫 페이지에 필요한 전체 데이터를 받아와 조합하는 과정이 필요
• SEO가 어렵다 : 처음에 받는 정보가 빈 html 뼈대라서 검색엔진이 해당 페이지가 어떤 정보를 담고있는지 알기 어려움 

 

SSR

장점

• 첫 페이지 로딩이 빠르다 : 이미 서버에서 만든 내용을 바로 보여줌
• SEO에 유리하다 : 이미 데이터가 들어있는 html 파일을 받으므로 검색엔진이 웹페이지 내용을 파악하기 용이함

단점

• 페이지를 이동할때마다 깜빡거림이 발생한다 : 화면을 이동하려면 전체 화면을 다시 서버에 요청해서 받아오는 과정 필요
• 서버 과부하가 발생할 수 있다 : 서버측에서 화면을 구성하기 때문에 요청이 많을 경우 서버 부담이 큼
• 화면이 보이지만 인터랙션이 불가능할 수 있다 : 서버에서 받은 화면이 먼저 랜더링되고 그 이후 자바스크립트 파일이 로드되기 때문에 인터랙션이 불가능한 타이밍이 존재할 수 있음

 

---

 

React는 기본적으로 CSR 방식이지만, 추가적인 설정을 통해 SSR 방식을 사용하는것도 가능하다. 다만 설정하기 복잡하기 때문에 Next.js 를 바로 사용하는게 훨씬 간편하다고 한다.

 

https://nextjs.org/learn/basics/data-fetching/pre-rendering

 

위에 나온 그림처럼, Next.js 는 화면을 먼저 그리고 자바스크립트 파일을 그 이후에 받는다. 따라서 첫 화면을 보는건 빠르더라도 인터랙션이 불가능한 시점이 존재한다. 반면 React는 자바스크립트 파일이 없다면 아예 화면을 그리지 못한다.

 

---

 

한편 기획서를 읽고 개발할 내용을 정리하던 중 이 SSR 과 관련하여 큰 문제에 직면했다.

바로 기존에 동일했던 모바일/pc 페이지 디자인이 이제 두 개로 나뉘어졌다는 점이었다.

따라서 고객의 현재 접속한 기기를 파악한 이후 모바일 페이지를 보여줄 것인지, pc 페이지를 보여줄 것인지를 선택해야했다.

 

하지만 SSR 정의대로면 첫 화면을 서버에서 받아오는 셈인데 pc 화면을 받아온 이후에 모바일 기기일 경우에 다시 그 위를 덮어버려야 하는 건가? 혹은 다른 모바일 웹페이지 도메인을 파서 이동시켜야 하는건가? 

 

주니어의 슬픔

 

그렇게 조언해줄 사람 하나 없이 리서치만 하다 미궁에 빠져들기 시작했다... (다음 글에 계속)