[TIL] next.js 알아보기

next.js란?

풀스택 웹 어플리케이션을 구축하기 위한 react 기반 프레임 워크이다. 버셀에서 제작되었기 때문에 next.js를 사용하면 버셀에 배포할 때 좀 더 편리하게 이용할 수 있다. next.js는 리액트에 고급 성능 최적화 되어 있기 때문에 좀 더 쉽게 개발할 수 있으며 SEO에 친화적이다.

네가지 특징

next.js는 다음과 같이 네가지 특징이 있다.

• 성능 : Next.js는 자동 코드 분할, 서버 사이드 렌더링, 정적 사이트 생성과 같은 내장된 성능 최적화 기능을 제공하여 개발자가 최소한의 노력으로 빠르고 반응성 있는 웹 애플리케이션을 만들 수 있도록 도와줍니다.
• 개발자 경험 : Next.js는 핫 모듈 교체, 자동 페이지 라우팅, 통합된 API 개발과 같은 기능을 제공하여 개발자가 애플리케이션을 쉽게 구축하고 반복적인 작업을 수행할 수 있도록 지원합니다.
• 유연성 : Next.js는 어떤 데이터 소스와도 함께 사용할 수 있으며, 기존 프로젝트에 쉽게 통합할 수 있어 다양한 웹 개발 요구에 유연하게 대응할 수 있습니다.
• 생태계 : Next.js는 크고 활발한 개발자 커뮤니티를 가지고 있어, 개발자들이 애플리케이션을 구축하고 유지보수하기 위한 다양한 리소스, 타사 라이브러리 및 도구를 활용할 수 있습니다.

서버사이드 렌더링(SSR)

next.js는 서버사이드 렌더링을 통해 기존의 클라이언트에 렌더링을 요청하는게 아닌 서버에다가 렌더링을 요청하기 때문에 초기 로딩 속도와 사용자 경험을 개선해 최적의 사용자 환경을 제공하는데 중요한 역할을 한다. 결국 빠르고 간결한 작업을 통해 사용자가 오래 기다리지 않고 서비스를 이용할 수 있는 것이다.

• 서버 사이드 렌더링(SSR) : SSR을 사용하면 각 요청에 대해 서버에서 HTML 페이지를 생성하여 초기 렌더링에 필요한 모든 데이터와 마크업을 포함할 수 있습니다. 이는 애플리케이션의 인지 성능을 향상시키고 검색 엔진이 콘텐츠를 쉽게 크롤링하고 인덱싱할 수 있도록 합니다.
• 정적 사이트 생성(SSG) : SSG를 사용하면 HTML 페이지가 빌드 시간에 생성되고 정적 에셋으로 제공되어 각 요청마다 서버 사이드 렌더링이 필요하지 않게 됩니다. SSG는 콘텐츠가 많은 웹사이트나 업데이트 빈도가 낮은 애플리케이션에 적합하며, 빠른 로딩 시간과 효율적인 캐싱을 가능하게 합니다.