Next.js, 새로운 라우팅 시스템으로 웹 개발 혁신!
by DD
4년 전
조회수 4
Next.js의 새로운 라우팅 시스템, Nested Layouts를 통해 복잡한 UI 구축 지원
React 18의 Server Components를 기반으로, 서버 중심 라우팅 방식 채택
데이터 페칭 개선 및 Client/Server Routing 지원으로 성능 향상 도모
Nested Layouts 아키텍처 심층 분석
app 디렉토리를 활용한 새로운 라우팅 시스템은 Nested Layouts를 지원한다. 구체적으로, layout.js와 page.js 파일 컨벤션을 통해 UI를 정의한다. 따라서 계층적 구조를 쉽게 구성하고, 코드 재사용성을 높일 수 있다.
Server Components와 데이터 페칭 최적화
새로운 라우팅 시스템은 React Server Components를 기본으로 사용한다. getStaticProps 및 getServerSideProps를 활용하여 데이터 페칭을 최적화한다. 반면, 병렬 데이터 페칭을 통해 페이지 로딩 속도를 개선하고, Client-Side JavaScript 번들 크기를 줄인다.
Server-Centric Routing의 장점과 활용
Next.js는 Server-Centric Routing 방식을 채택하여 Client-Side Routing의 단점을 보완한다. 서버 컴포넌트를 활용하여 DOM 업데이트를 최소화하고, JavaScript 번들 로딩을 줄인다. 따라서 초기 로딩 속도 향상과 사용자 경험 개선을 기대할 수 있다.
