안녕하세요.
오늘은 Next.js에 대해 알아보겠습니다.
Next.js?
Next.js란 Verceld에서 만든 React 프레임워크입니다.
SSR, SEO 등 많은 특징들을 가지고 있습니다.
쫌 더 자세히 알아보겠습니다.
1. Server Side Rendering (SSR)
넥스트의 가장 대표적인 특징은 SSR입니다.
리액트는 CSR로 SSR에 비해 초기 페이지 로딩이 오래 걸리고 SEO가 어렵다는 단점이 있습니다.
반면 SSR은 서버에서 완성된 HTML을 보내주기 때문에 렌더링 속도가 빨라 로드 시간이 짧고 SEO가 좋습니다.
CSR보다 서버에 부하가 많고 페이지 이동 시 깜빡임 현상이 있을 수 있다는 단점이 있습니다.
2. Search Engine Optimization (SEO)
1번 특징에서 말씀드렸던 SEO입니다.
기존의 리액트는 html구성이 안되어있는 상태이기 때문에 검색엔진이 쉽게 찾을 수 없습니다.
반면 넥스트는 서버에서 이미 html을 구성하였기 때문에 SEO가 좋습니다.
구글의 크롤러 봇은 자바스크립트를 실행할 수 있어 CSR의 크롤링도 가능합니다.
하지만 아직 완벽한 상태는 아니며, 구글 측에서도 자바스크립트를 실행 전 더욱 빠른 크롤링과
다른 크롤러 봇들을 위해 SSR을 고려해보라는 말을 합니다.
SEO가 좋으면 사용자가 검색했을 때 제작한 페이지가 상단에 노출되어야 유입이 증가합니다.
3. Pre-rendering
넥스트는 모든 페이지를 사전 렌더링 합니다.
두 가지 종류가 있습니다.
3-1. Static Site Generation (SSG)
정적 생성의 경우 프로젝트가 빌드되는 시점에서 html 파일이 생성됩니다.
3-2. Server Side Rendering (SSR)
SSR은 매 요청마다 html 파일이 생성됩니다.
해당 부분은 추후 더 자세히 설명드리겠습니다.
4. Dynamic Routes
리액트와 다르게 별도의 세팅 없이 폴더 및 파일 기반으로 라우팅을 지원합니다.
5. 개발 중 저장하면 자동으로 리 렌더링이 일어납니다.
6. 강력한 페이지 이동
넥스트는 <Link />로 페이지간 이동이 빠르고 매끄럽습니다.
a태그와 다르게 페이지가 리 로딩되지 않으며 <Link />가 뷰포트에 보이면 해당 페이지를 백그라운드에서 미리 가져옵니다.
7. Code Splitting
첫 페이지가 로드될 때 모든 코드를 호출하는 것이 아닌, 번들을 여러 조각내어 처음에 필요한 부분만 전송해 주는 방식으로 로드 시간을 단축시킵니다. 코드 분할은 webpack, parcel 등 모듈 번들러도 지원하는 기능이지만 넥스트는 별도의 설정 없이 사용 가능합니다.
이외에도 여러 가지 특징이 있습니다.
코드를 직접 작성하며 더 자세히 알아보겠습니다.
'Front-end > Nextjs' 카테고리의 다른 글
| Next.js getServerSideProps, getStaticProps, getStaticPaths (0) | 2022.05.15 |
|---|---|
| Next.js 페이지 이동 Link, Router (0) | 2022.05.10 |
| Next.js Dynamic Routes를 알아보자 (0) | 2022.05.09 |
| Next.js _app과 _document에 대하여 (0) | 2022.05.09 |
| Next.js 시작하기 (typescript) (0) | 2022.05.09 |