🌿 Next.js란
next.js란 풀스택 웹 애플리케이션을 구축하기 위한 리액트 프레임워크로, 리액트를 더욱 강화하여 사용할 수 있게 한 리액트의 확장판이라고 할 수 있습니다.
사용자 인터페이스를 구축하기 위해 리액트 컴포넌트를 사용하고, 추가 기능 및 최적화를 위해 페이지 라우팅과 빌트인 최적화 및 다양한 렌더링 전략을 제공합니다.
아래에서 넥스트와 리액트를 비교하여 넥스트의 사용 이유에 대해 알아보겠습니다.
🌿 다양한 렌더링 전략
리액트는 기본적으로 클라이언트 사이드 렌더링(CSR, client side rendering)으로 동작합니다.
따라서 서버가 아닌 클라이언트인 브라우저에서 모든 것을 처리하기 때문에
초기 접속 요청을 보내고, 사용자가 화면에 있는 콘텐츠와 상호작용 할 수 있기까지 어느 정도의 시간이 필요합니다.
이와 달리 넥스트는 서버 사이드 렌더링(SSR, server side rendering), 정적 사이트 생성(SSG, static site generation), 증분 정적 생성(ISR, incremental static regeneration) 전략을 제공합니다.
이 기술들 덕분에 웹 애플리케이션의 성능이 향상되고, 검색 엔진 최적화(SEO)가 잘 이루어지며 완전하게 렌더링 된 html 페이지를 서버에서 빌드 시간에 생성할 수 있습니다.
각 렌더링 방식에 대한 자세한 내용은 이전 게시글을 참고해주세요.
[React] 웹 페이지 렌더링 방식(CSR, SSR, SSG)
[React] 웹 페이지 렌더링 방식(CSR, SSR, SSG)
🪴 웹 렌더링이란웹 렌더링이란 실시간으로 웹 페이지가 그려지는 과정으로, 웹 페이지를 사용자에게 보여주기 위한 과정을 의미합니다.- 요즘IT대부분의 웹 브라우저를 분해해보면, 그 안에는
dev-district.tistory.com
🌿 간편한 라우팅
리액트는 리액트 라우터(react router)와 같은 별도의 라이브러리를 사용하여 라우팅을 설정합니다.
따라서 아래 코드와 같이 개발자가 직접 경로와 보여질 컴포넌트를 관리해야 합니다.
넥스트는 파일 시스템 기반의 라우팅을 제공합니다.
기본적으로 생성되는 'pages'라는 폴더 안에 파일을 생성하면 자동적으로 해당 경로가 라우팅됩니다.
추가적인 코드로 경로를 지정해 줄 필요없이 간편하게 설정할 수 있습니다.
예를 들어 위와 같은 페이지들이 있을 때, '기본_경로/search'로 접속하면 search.js가 보여집니다.
🌿 기본으로 제공하는 기능들
넥스트가 기본적으로 제공하는 많은 기능들이 존재합니다.
설치 시에 타입스크립트/ESLint/Tailwind/alias를 사용할 것인지 선택할 수 있어 초기 설정이 매우 간단합니다.
또한,
링크가 화면에 보이면 해당 링크에 필요한 파일들만 미리 받아 놓는 코드 분할(code spiltting),
Image 컴포넌트를 활용한 이미지 최적화,
그리고 정적 파일을 제공하여 쉬운 성능 최적화가 가능합니다.
다양한 공식 플러그인과 API를 통해 기능을 확장할 수 있으며, 서버를 커스텀할 수 있습니다.
읽어주셔서 감사합니다:)
