Next.js는 React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크이다. 그렇다고 React에서 SSR이 불가능하지는 않다. 하지만, React로 개발환경을 구현하는 것은 굉장히 복잡한 일이다. 이런 문제를 해결하기 위해 등장한 것이 바로 Next.js 이다.
‼️CSR(Client Side Rendering) VS SSR(Server Side Rendering)
예시로, React의 일반적인 렌더링 방식은 render() 함수가 먼저 실행되고 ComponentDidMount() 함수를 통해 데이터를 가셔와 다시 렌더링을 하는 방식이다.
- 초기 로딩 속도 느림
- 페이지를 로딩하며 모든 파일을 다운로드 하기 때문에 페이지 이동 시 필요한 데이터만 불러와 사용함
반면 Next.js는 getInitialProps() 함수를 사용하여 데이터를 먼저 가져온 뒤 한 번에 렌더링을 해준다.
- 서버에서 View를 렌더링 하기 때문에 초기 로딩 속도가 빠름
- 검색 엔진 최적화(SEO)에 유리
- But, 페이지 이동 시 CSR에 비해 느림
Next.js 주요 기능
Code Spliting
리액트 싱글페이지에서는 초기 렌더링에서 모든 컴포넌트를 내려 받는다. 하지만 규모가 커질수록 로딩속도가 지연될 수 있다. 이에 Next.js는 필요에 따라 파일을 불러올 수 있게 여러 개의 파일을 분리하였다(Code Spliting).
컴포넌트 폴더에는 리액트 컴포넌트들이, pages 폴더에는 각 라우트들이 들어가있다. 브라우저가 실행되고 사용자가 접속하면 첫 페이지인 index 페이지만 불러오고, 그 이후에 다른 페이지로 넘어갔을 때 해당 페이지만 불러오게 된다.
Dynamic Routing
pages 폴더에 있는 파일은 해당 파일 이름으로 라우팅된다
( pages/admin/info.tsx → localhost:3000/admin/info )
Pre-rendering
Next.js는 렌더링 서버를 자체적으로 지원하고 모든 페이지를 프리 렌더링한다. 클라이언트 사이드에서 모든 작업을 수행하는 대신 미리 각 페이지에 대해 HTML 파일을 만들어 성능과 SEO측면에서 도움을 준다
Image Optimization
HTML의 <img> 태그를 확장한 next/image 컴포넌트를 사용할 수 있다.
import Image from 'next/image';
<Image
src="/images/example.jpg"
className={exampleStyle.borderCircle}
height={144}
width={144}
alt={name}
/>next/image는 이미지 최적화 기능을 내장하고 있어 리사이징, 옵티마이징, 그리고 WebP와 같은 최신 포맷이 사용 가능한 브라우저에서는 이러한 포맷으로 이미지를 제공한다. 이미지 옵티마이징을 할 때 빌드되는 시점이 아닌, 사용자에 의해 리소스가 요청되는 시점에 실행한다. 때문에, 이미지가 많다고 해도 최적화에 따른 빌드 타임이 증가하지 않는다. 또한 레이지 로딩 기능을 내장하고 있어, viewport 바깥 영역에 있는 이미지들은 스크롤로 화면에 표시될 때에만 로드된다.
