SPA, SSR, CSR 그리고 Next.js

웹은 Client와 Server로 나누어진다. Client는 요청을 보내는 역할을 하고 Server는 요청을 보고 알맞은 응답을 해준다. 그리고 Client는 그 응답을 바탕으로 DOM에 그린다. (css처리 + javascript로드) 이 과정을 반복한다. 웹의 발전으로 수많은 요청과 응답을 처리해야 되기 때문에 Server 부하, Client도 페이지 깜빡임이 나타남. Ajax라는 기술을 통해 일부분만 정보를 가져올 수 있게 되고 더 나아가 SPA라는 개념이 등장한다.

 

 SPA(Single Page Application)

SPA는 url을 움직이더라도 html을 새로고침하지 않는 것이다. React는 SPA를 지원하는 라이브러리이며 Client Side Rendering 방식으로 동작한다. Server에서 받은 html을 바탕으로 Client가 화면을 그리는데 CSR은 그냥 Client에서 알아서 화면을 그린다. React에서 build할 때 내가 짠 모든 리액트 코드를 하나의 자바스크립트 파일로 만들어준다. (Babel로 transpiling, Webpack으로 bundling)

 

 SSR(Server Side Rendering) vs CSR(Client Side Rendering)

SSR은 전통적인 웹 방식으로 페이지 새로고침할 때마다 서버로부터 리소스를 전달받아 렌더링 하는 방식이다. React, Vue와 같은 라이브러리가 등장함에 따라 SPA 방식의 좋은 성능의 개발환경이 선호되면서 CSR이 등장한다. CSR의 장점은 url이 바뀌어도 html을 다시 내려 받지 않고 Client에서 알아서 그린다. 화면 깜빡이 없이 앱과 같은 경험이 가능하다. 단점은 서비스 사이즈로 커질수록 코드가 많아지면 번들링된 하나의 자바스크립트 파일의 크기가 커지면 커질수록 로드하는 시간이 오래 걸리게 된다. 사용자가 첫 화면을 보기까지가 오래 걸리고 SEO 관련 이슈도 있다.

 

 Next.js

CSR + SSR을 합치는 아이디어를 구현해주는 것이 Next.js이다. 국내 검색봇들은 html을 기반으로 요소를 찾기 때문에 html가 비어있는 CSR는 불리하다. 첫 페이지는 서버 사이드 렌더링하고 그 뒤에 발생하는 라우팅은 클라이언트 사이드 렌더링으로 하면 첫 페이지가 내용이 모두 채워져있는 html을 받고 이후 interaction이 가능한 js 파일은 따로 load해서 클라이언트에서는 DOM을 그대로 그리기만 하면 된다. 그럼 SEO 대응이 가능, code splitting 안했을 때 CSR 방식 보다 사용자가 화면을 보는 타이밍도 빨라진다.

 

사용법

npm install next react react-dom

먼저 위의 3개의 패키지를 설치한 뒤 package.json에 아래의 scripts 항목을 추가한다.

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}

yarn dev를 실행하면 localhost:3000으로 접속이 된다.

next.js의 중요한 컨셉 중 하나는 page를 기반으로 build 한다는 것이다. (page는 여러개의 컴포넌트로 이루어 짐.)

next/link나 next/router를 활용하면 CSR 동작이 가능하다.

CSR이 동작하면 해당하는 js파일이 실행되서 DOM의 내용이 변경된다.

 

해당 소스코드

github.com/ianlee92/Next.js-practice

ianlee92/Next.js-practice