Nextjs는 무엇인가?
NextJS 공식 도스를 기반으로 작성 했습니다.
Vercel이라는 미국 회사에서 리액트에서 사용되는 라이브러리입니다.
왜 굳이 사용하는 것일까?
server-side rendering의 유행
server-side rendering이라는 것은 서버에서 html을 미리 만들어서 브라우저로 보낸후 화면에 표시하는 기법을 말합니다.
server-side rendering 장점
- 검색엔진 최적화 (SEO)가능 합니다.
- 미리만든 것을 브라우저로 보내주기 때문에 빠른 페이지 랜더링이 가능합니다.
server-side rendering 단점
좋은 측면이 있으면 나쁜 측면도 있습니다.
- 프로젝트의 복잡도가 있습니다.
- 서버 랜더링에 따른 부하가 발생될수 있습니다.
- 불필요한 인터넷 자원이 소모가 될수 있습니다
페이지를 요청할떄 마다 페이지를 새로고침이 발생한다.
Next.js의 주요 특징
Next.js의 주요 기능 중 일부는 다음과 같습니다.
특징 | 설명 |
---|---|
라우팅 | 레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 서버 구성 요소 위에 구축된 파일 시스템 기반 라우터입니다. |
렌더링 | 클라이언트 및 서버 구성 요소를 사용한 클라이언트 측 및 서버 측 렌더링. Next.js를 사용하여 서버에서 정적 및 동적 렌더링으로 더욱 최적화되었습니다. Edge 및 Node.js 런타임에서 스트리밍합니다. |
데이터 가져오기 | 서버 구성 요소의 async/await를 사용하여 데이터 가져오기를 단순화하고 fetch요청 메모, 데이터 캐싱 및 재검증을 위한 확장된 API를 제공합니다. |
스타일링 | CSS 모듈, Tailwind CSS, CSS-in-JS 등 선호하는 스타일 지정 방법 지원합니다. |
최적화 | 애플리케이션의 핵심 웹 바이탈 및 사용자 경험을 개선하기 위한 이미지, 글꼴 및 스크립트 최적화. |
타입스크립트 | 더 나은 유형 검사, 더 효율적인 컴파일, 사용자 정의 TypeScript 플러그인 및 유형 검사기를 통해 TypeScript에 대한 지원이 향상되었습니다. |