(Next.js) SSR과 CSR의 차이

SSR과 CSR이란

SSR(Server Side Rendering)과 CSR(Client Side Rendering)의 차이는 다음과 같다.

우선 이 개념을 이해하기 위해선 Rendering이라는 개념을 이해하는 것이 중요하다.

React에서의 Rendering이라는 개념은, 기존 React로 작성된 컴포넌트 파일의 UI를생성하고 브라우저 DOM으로 변환하는 과정을 말한다. 간단하게 말하여, React Javascript파일을 HTML로 변환하는 과정인 것이다.

먼저 CRA(Create React App)로 만들 수 있는 일반적인 React인 경우, CSR에 해당한다.

CSR는 이름에서부터 Client가 들어가는 것처럼, 유저의 브라우저에서 해당 과정을 처리한다. 그렇기 때문에, 해당 방식은 다음과 같은 문제점이 있다.

• 수많은 Javascript파일을 다운받고, 변환해야한다.
• 변환하기 전에는 HTML에 내용이 전혀 없으므로, 로딩하는 동안 공백이 생기게 된다.

Next.js에서 사용하는 SSR의 경우, 유저가 서버에게 request를 보내면 서버에서 Javascript 파일을 실행하여 HTML로 Render한 후, 변환이 완료된 HTML파일을 respone로 보낸다. 해당 방식은 위의 CSR방식의 단점을 보완한다. 아래는 SSR방식의 장점이다.

• 상대적으로 적은 Javascript파일만 다운 받으면 된다.
• 서버에서 미리 렌더링된 HTML 파일을 전달받기 때문에, 초기 로딩 시 화면에 공백이 없다. 이후 클라이언트에서 Hydration 과정을 통해 동적 기능이 활성화 된다.