Next.js을 사용하는 기업이 날로 늘고 있다. 왜 Next.js의 인기가 많은지 이해하고, 장점을 이해해보도록 하자.
Next.js
리액트 기반의 프레임워크로 React(SPA)의 단점을 커버해 주는 역할을 의미합니다.
SPA
장점
- SPA는 사이트에 접속할 때 하나의 페이지를 불러옵니다.
- 하나의 페이지에는 모든 JS 파일이 포함됩니다.
- SPA는 페이지를 이동하게 되면, 받아온 파일을 이용하여 UI를 변화시키고, 필요한 데이터는 서버에서 JSON 파일로 받아와 UI를 빠르게 변화시킬 수 있습니다.
- 빠른 변화를 가져올 수 있어 사용자 경험에 좋습니다.
단점
- 처음 페이지를 불러올 때 모든 코드를 불러와야 하기 때문에 시간이 오래 걸립니다. = 초기 로딩속도 느림
- 빠른 검색 엔진 최적화(SEO) 에 좋지 않습니다.
⇒ SSR 방법으로 이 단점을 해결할 수 있습니다.
SSR
- 사이트에 접속할때 렌더링된 html을 불러오게 됩니다.
- JS 파일을 불러올 때까지 반응을 하지 않지만, 빠르게 화면을 보이게 할수는 있습니다.
- 페이지 이동 시 새로운 페이지를 요청하기 때문에 화면이 깜빡입니다.
- 템플릿을 중복해서 로딩하여 서버에 부담을 줍니다.
Next.js 기능
- 서버 사이드 렌더링
- Next.js 는 빌드시에 모든 페이지를 미리 렌더링 합니다.
- 처음 페이지를 불러올 때 사용자에게 빠르게 보이게 됩니다.
- 미리 렌더링 되어 SEO(빠른 검색 엔진 최적화) 에도 좋습니다.
- HTML을 불러온 후에는 최소한의 JS 코드를 불러와 페이지를 사용합니다
- 서버의 데이터를 필요로 하는 페이지는 요청 시에 SSR을 통해 HTML을 생성합니다.
- HOT Code Reloading을 지원합니다.
- 자동 코드 분할
- 자동 코드 분할 기능으로 불필요한 코드가 페이지에 로드되지 않습니다.
- TypeScript가 내장되어 있습니다.
- router 기능이 내장되어 있습니다.
- 파일 시스템 기반 라우팅을 사용함으로, 폴더의 경로에 따라 페이지의 경로가 설정됩니다.
- styled-jsx 를 지원합니다.