1. Next.js
Next.js는 웹 개발자에게 필요한 다양한 기능을 제공해주는 리액트 기반 프레임워크
Next.js 장점
-
SEO(Search Engine Optimization)을 위한 SSR(Server-Side rendering)을 지원한다.
- CSR과 SSR을 적재적소에 맞게 복합적으로 사용 가능(밑에서 설명 예정)
-
파일 기반 라우팅(File-based routing)을 통해 Routing을 쉽게 구현할 수 있다.
-
복잡한 Server 구축 없이도 API를 배포할 수 있다.
-
초기 로딩 속도 개선을 위한 자동 Code Splitting(코드 분할) 등 최적화를 자동으로 지원한다.
-
개발 환경 설정이 쉽고 간단하다.
- Linting, Compling, Bundling, Deploying을 위한 설정이 자동화 되어있다.
- Router, tailwind, typescript, lint 등 주요 기능들을 configuration 없이 사용 가능하다.
공식문서 : https://nextjs.org/
2. CSR/SSR/SSG/ISR
1) CSR(Client Side Rendering)
MPA(Multi-Page-Application)에서 페이지 이동시나 렌더링 시 깜빡거려 유저 사용성 저하하는 경우를 보완하기 위해 등장한 방식으로 React를 이용하여 SPA를 구현하는 것이 대표적이다.
- js와 라이브러리, css등 모든 파일을 한번에 번들링하여 클라이언트 쪽에서 렌더링 하는 방식이다.
- 장점
- 한번 로딩되었을 때 빠른 UX를 제공하고 서버의 부하가 적다.
- 단점
- 페이지 로딩시간(TTV), FCP(First Contentful Paint)가 길다.
- 자바스크립트가 활성화 되어야 한다.
- SEO(search engine optimization)가 힘들다.
- 보안이 취약하다. (서버로 부터 모든 코드를 받아오기 때문에 클라이언트 쪽에서 보안 정보들을 획득할 수 있다.)
- CDN(Content Delivery Network)에 캐시하기 어렵다.
2) SSG(Static Site Generation)
CSR의 단점을 보완하기 위해 만들어졌는데 렌더링하는 주체는 서버이고 빌드할 때 렌더링하는 방식. 즉, 정적 사이트를 렌더링한다.
- 배포할 때 즉, 빌드할 때 미리 렌더링을 해서 서버에 저장한다.
- 장점
- 이미 렌더링이 된 HTML을 클라이언트 쪽에서 불러오가 때문에 페이지 로딩 시간이 빠르다.
- 따라서 자바스크립트가 필요하지 않다.
- SEO와 보안이 좋고 CDN캐시가 가능하다.
- 단점
- 데이터가 정적이므로 사용되는 곳이 한정적일 수 밖에 없다.
- 동적으로 데이터가 변동되는 페이지에서는 적합하지 않다.
3) ISR(Incremental Static Regeneration)
SSG의 단점을 보완하기 위해 나온 개념으로 주기적으로 재렌더링 시킨다. 즉, SSG에서 업데이트 기능이 추가된 것이다.
- 장점
- 기본적으로 SSG와 같다.
- 추가적으로 데이터가 주기적으로 업데이트가 된다.
- 단점
- 실시간 데이터가 아니다.
- 사용자별로 달라지는 정보를 제공 하기가 어렵다.
4) SSR(Server Side Rendering)
SSG, ISR의 단점을 보완하기 위해 생겼다. 렌더링 주체는 서버, 클라이언트에서 요청이 올 때마다 렌더링 시켜준다.
- 클라이언트에서 서버에 요청이 오면 가지고 있는 파일로 페이지를 렌더링해서 보내준다.
- 장점
- 페이지 로딩시간 빠름
- 자바스크립트 필요 없음
- SEO, 보안이 좋음
- 실시간 데이터를 사용
- 사용자별 필요한 데이터를 사용
- 단점
- 요청시마다 서버에 요청하기 때문에 비교적 느리고, 서버부하가 생긴다.(overhead)
- CDN 캐시가 안된다.
3. Hybrid / Hydration
Next.js에서는 성능 개선을 위해 지금까지 나온 모든 렌더링 방식을 혼합하여 사용할 수 있다.
렌더링 방식 선택 기준
-
주로 정적인 페이지는 SSG 혹은 ISR을 사용한다.
- 업데이트가 필요 없으면 SSG를, 업데이트가 필요하면 ISR을 사용.
-
하나의 페이지에서도 분리하여 SSR과 CSR을 혼합하여 사용이 가능하다.
-
위와 같이 사용하면 의미있는 데이터를 정적으로 먼저 보여줄 수 있는데 이것을
pre-rendering이라 한다.- 그러나 정적인 페이지이므로 js가 다운받기 전까진 동적으로 사용할 수 없다.
pre-rendering이후에 리액트 관련 컴포넌트 코드들로 채워지게 된다.
예시
- 사용자 로그인이 필요하면
CSR,SSR,SSG+CSR - 사용자 로그인이 필요하지 않고 데이터가 변동이 되지 않으면
SSG - 사용자 로그인이 필요하지 않으나 데이터 변경이 자주되면
SSR,ISR|SSG+CSR - 사용자 로그인이 필요하지 않으나 데이터 변경이 간헐적으로 있다면
ISR
