CSR(Client-side rendering) 방식으로도 충분히 훌륭한 SPA 웹 애플리케이션을 만들 수 있다. 그럼에도 불구하고 SSR(Server-side rendering)과 SSG(Static-site generation)을 채택하여 프로젝트를 진행하는 경우가 있다. CSR과 SSR, SSG에는 각각의 장단점이 있다.
CSR
CSR의 경우 처음으로 브라우저에 보내지는 HTML 파일에 아무런 컴포넌트도 담겨져있지 않다. 이후 보내질 JSX 파일이 렌더링할 컴포넌트들을 감쌀 div 태그만이 body 태그 내에 존재하고 있다. 그렇기 때문에 유저가 화면을 보기 위해서는 [1. view를 이루는 컴포넌트], [2. 비즈니스 로직을 담고있는 코드]와 [3. 어플리케이션을 구동하는 라이브러리와 프레임워크의 소스코드]를 모두 담고 있는 자바스크립트 파일이 다운로드되길 기다려야 한다. 추가로 필요한 데이터가 있다면 서버에 요청을 보내 또 기다려야 하며, 이런 데이터들을 기반으로 HTML 파일을 생성하여 유저에게 웹페이지를 보여주게 된다.
이에 따른 CSR의 단점과 장점은 아래와 같다.
단점
- TTV(Time to view: 유저가 첫 화면을 보는데 걸리는 시간)이 길다.
- 기존 HTML 파일 내에 아무런 요소가 없기 때문에 SEO가 좋지 않다.
장점
- 비즈니스 로직을 처음에 모두 받아오기 때문에, 한번 로딩이 끝나면 페이지 간 이동이 빠르다.
- 웹페이지의 화면이 보임과 동시에 유저와 상호작용할 수 있다.
- 페이지를 이동할 때 화면이 끊기지 않는다. (blank 화면이 발생하지 않음)
SSR, SSG
SSR와 SSG의 경우 서버가 자바스크립트 파일을 기반으로 HTML 파일을 생성해 놓는다. 클라이언트에서 특정 웹페이지에 대한 요청을 보낼 경우 이 HTML 파일을 우선 응답으로 보내고, 이후 비즈니스 로직 등을 담고 있는 자바스크립트 파일을 보낸다.
이에 따른 SSR과 SSG의 단점과 장점은 아래와 같다.
단점
- TTV는 짧지만, 자바스크립트 파일이 모두 받아져오기 전까지는 유저와 상호작용하지 못할 수 있다.
- 페이지를 이동할 때 화면이 끊긴다. (blank 화면 발생 가능)
장점
- TTV가 짧기 때문에 유저가 체감상 기다리는 시간이 적을 수 있다.
- HTML 파일에 웹페이지 뷰에 대한 내용이 있기 때문에 SEO가 비교적 좋다.
- 크고 무거운 프로젝트에서 각 페이지 별로 HTML 파일을 분리할 수 있다.
Next.js
Next.js는 React 라이브러리를 사용한 프로젝트에서 SSR과 SSG 구축을 비교적 쉽게 가능하게 해주는 프레임워크이다. Next.js가 제공해주는 기능은 정말 많지만, 개인적으로 느끼기에 중요한 기능은 아래와 같다.
- 페이지 기반 라우팅
- CNA(create-next-app) 생성 후 만들어진 pages 폴더에 jsx, tsx 파일을 생성해주면 해당 파일명이 path로 적용된다. (예: /pages/next.tsx 파일에 생성된 컴포넌트는http://localhost:3000/nexturl에서 렌더링됨) Link태그를 통한 빠른 페이지 전환
-a태그가 아닌Link태그 (import Link from 'next/link')를 사용하여 페이지를 빠르게 이동할 수 있도록 도와준다. 관련 페이지를 백그라운드에 미리 가져다놓기 때문에 가능한 기능이다.getServerSideProps,getStaticProps함수
- pages 폴더 내 각 컴포넌트에 위 두 가지 비동기 요청 함수를 생성하여 SSR, SSG 프로젝트를 만들 수 있다. 비동기 요청에 대한 응답이 뷰를 prerendering 하는데 필요하다면 위 비동기 요청을 사용할 수 있다.- SSR, SSG 이후 CSR
- 리액트 라이브러리의 프레임워크이기 때문에, SSR, SSG로 뷰를 로딩한 후 비즈니스 로직을 사용하여 CSR 방식으로 유저와 상호작용 할 수 있다.
참고자료
Next.js Documentation
[Next.js] 기본 개념 : Next.js 란? Next.js를 왜 사용할까? Next.js의 장점은?
