Next.js란?
Next.js는 React 라이브러리의 프레임워크입니다. React는 CSR(Client Side Rendering) 방식을 사용하기 때문에 비어있는 HTML을 가져온 후 script를 Client에서 렌더링을 하기 때문에 캐시가 없을 때 첫 로딩 시간이 많이 소요됩니다. SEO(Search Engine Optimization)에 취약하다는 단점이 있습니다.
하지만 Next.js를 사용하게되면 pre-rendering을 통해 사전에 미리 렌더링된 페이지를 가져올 수 있습니다. 미리 데이터가 렌더링된 페이지를 가져오게되면 첫 로딩이 오래 걸리지 않아 사용자에게 좋은 경험을 줄 수 있고, SEO에서도 유리합니다.
pre-rendering을 사용하게되면 SSG(Static-Site Generate)도 가능하게 해줍니다.
CSR vs SSR
CSR과 SSR 방식 각각의 상세 작동원리와 장단점을 정리해 보겠습니다.
CSR(Client Side Rendering) 방식
사용자가 브라우저를 통해 웹을 사용하게 되면 브라우저는 JS 정보가 들어있는 빈 HTML문서를 전달 받습니다.
그 후 브라우저는 JS 파일을 다운로드 하고 JS 다운로드가 완료되면 리액트 코드를 실행하고 UI를 렌더링하게 되고 렌더링이 완료되면 사용자는 화면을 볼 수 있습니다.
여기서 브라우저가 UI를 렌더링하기 전 까지는 사용자는 비어있는 화면을 보게됩니다.
장점
- 첫 로딩 이후에는 캐시가 쌓여 렌더링이 빨라집니다.
- 클라이언트에서 렌더링이 대부분 이뤄지기 때문에 서버의 부담이 적습니다.
단점
- 검색 엔진 최적화(SEO)에 불리합니다.
- 캐시가 쌓이기 전 첫 로딩이 오래 걸립니다.
SSR(Server Side Rendering) 방식
사용자가 브라우저를 통해 웹을 사용하게 되면 서버에서 리액트를 실행해 UI를 렌더링 하고 렌더링이 완료된 HTML 파일을 브라우저에게 전달합니다.
그 후 브라우저는 CSR 방식과 동일하게 JS 파일을 다운받아 실행하게 됩니다. 이 과정을 Hydration 이라고 합니다.
Hydration은 리액트 코드들이 브라우저에 만들어져 있는 HTML 문서와 동기화하여 앱이 동적으로 상호작용 할 수 있도록 하는 과정을 말합니다.
장점
- 검색 엔진 최적화(SEO)에 유리합니다.
- 첫 로딩이 빠릅니다.
- 정적 사이트 생성에 유리합니다.
단점
- 서버에서 pre-rendering 하기 때문에 로딩이 길어질 수 있습니다.
- 서버에서 pre-rendering 하기 때문에 서버의 부담이 CSR에 비해 큽니다.
- 페이지 요청 시 새로고침 되기 때문에 UX 적으로 불리합니다.
