Next.js 13 Paradigm

Next.js 2022 Conference를 바탕으로 정리한 내용입니다.

 

Index.
- Next.js가 무엇인지
- Next.js가 개발된 이유
- Being dynamic의 한계
- Next.js 혁신의 3가지 주요 카테고리

 

What is Next.js?

Next.js 공식 홈페이지 첫 화면에 "The React Framework for the Web"이라고 소개하고 있습니다.
그리고 Next.js 2022 컨퍼런스에서는 "Next.js had its origins as a React Framework for dynamic server under sites"라고 소개합니다.

이를 종합해보면 Next.js는 사이트 아래 동적인 서버를 위해 시작된 풀스택 웹 어플리케이션을 제작하기 위한 리액트 프레임워크라고 이해할 수 있습니다.

 

---

 

What is Next.js is for?

Vercel 팀은 SPA(Single Page Application)를 최적화 하는 대신, 복잡한 어플리케이션을 제작하는 개발팀을 지원하기 위해 개발하였습니다.

 

개발자가 웹 사이트를 개발할 때는 항상 동적이게 만들고 싶어한다.
그러나 Being dynamic을 구현할 때 여러 한계가 존재한다.
- Vercel

 

---

 

Being dynamic의 한계

1. Always on Infrastructure
2. Two runtime APIs
3.  Single-region origin

 

1. Always on Infrastructure

인프라와 관련된 한계
인프라를 수동으로 구축하고, 광범위한 운영을 하는 데 많은 시간과 비용이 들게 됩니다. 더불어, 프로젝트를 개발하기에 앞서 DB, 서버, 클라우드 서비스 등 여러 설정과 규약에 신경을 많이 쓰게 된다는 어려움이 있습니다.

2. Two runtime APIs

실행환경에서 동작하는 두 개의 API를 신경써야 한다는 한계
서버에서 동작하는 Node.js API와 브라우저에서 동작하는 Web APIs 두 가지 런타임 API를 동시에 효율적으로 조작해야 한다는 어려움이 있습니다.

3. Single-region origin

단일 지역 기반 내에서 프로젝트를 수행하고 확장하려고 한다.
단일 지역 기반 내에서 레거시, 정적인 파일, CDN 캐싱에만 의존하여 확장하려고 한다면, 동적인 웹사이트를 정적이게 다운그레이드 하는 방법밖에 없습니다. 그리고 이러한 캐시되거나 정적인 파일은 동적인 요구사항을 맞닥뜨렸을 때, 사용자 개개인의 요청에 대해 대량의 자바스크립트 파일을 전송하는 문제를 낳게 됩니다.

따라서, Vercel 팀에서 말하는 Next.js 13의 새로운 패러다임은

To enable you to be dynamic without limits

 

dynamic함을 제한 없이 구현이 가능하도록 해주는 것입니다.

 

---

 

Next.js 13 혁신의 3가지 주요 Categories

1. Compiler Infrastructure
2. Rendering Infrastructure
3. Component Toolkit

 

1. Compiler Infrastructure

컴파일 인프라
Next.js는 설정이 필요 없는 적절한 디폴트를 기본 제공합니다. 따라서 개발팀의 생산성 향상을 위한 최고의 도구를 안내할 의무를 가지고 있습니다.
이전 Next.js는 Webpack 위에서 개발되었습니다. 그러나 Webpack과 같은 JavaScript Tooling은 프론트엔드 영역이 커지고 복잡해짐에 따라 유지보수하기 어려워졌고, 이에 Vercel팀은 Webpack 마이그레이션에서 벗어나 새로운 후속작을 개발하였습니다.
이렇게 탄생한 새로운 웹팩 후속작이 Turbopack 입니다. Turbopack은 바벨보다 빠른 트랜스파일링, Terser보다 빠른 축소화, 웹팩보다 빠른 번들링을 가능하게 합니다. 그리고 이 속도는 프로젝트 규모가 커짐에 따라 더욱 극명하게 차이나게 됩니다.
(23.09.04기준으로 Beta 버전이며 프로덕트 사용은 어렵습니다.)

 

2. Rendering Infrastructure

• 전체 레이아웃을 위한 쉬운 데이터 Fetching
• 컴포넌트, 스타일, 테스트를 쉽게 같은 영역에 배치
• nested 레이아웃과 같이 쉽게 빌드하는 복잡한 UI 패턴

렌더링 인프라
Vercel팀은 개발자들이 복잡한 어플리케이션을 만드는 데 극적인 양의 클라이언트 사이드 자바스크립트를 제공하고자 하는 목적을 가지고 있습니다. 따라서, Next.js와 React.js에서 사랑받는 기능들을 더 단순하게 만들었습니다.

Next.js의 훌륭한 기능 중 하나인 router 기반의 파일 시스템은 폴더 아래에 page 파일을 놓음으로써 추가 설정 없이 바로 새로운 route를 생성합니다. 그리고 이런 router 기반의 파일 시스템은 리액트 팀의 동시 기능(Concurrent Features)에 대한 투자 덕분에 발전할 수 있었습니다.
먼저, 새로운 Next.js router는 app 폴더에서 시작합니다. 페이지 속에 상세 페이지를 만들 때는 이전 버전에서 사용했던 nesting과 dynamic routes를 사용합니다. 이 때, 상세페이지에서 다른 페이지에 있던 UI를 동일하게 배치하고 싶다면 layout 파일을 통해 UI를 공유할 수 있습니다. 이는 편리할 뿐만 아니라 화면이 navigate 되는 동안 상세 부분의 화면만 리렌더링하여 클라이언트와 서버의 부하를 줄일 수 있습니다.
그리고 사용자 동작에 따라 쏟아지는 자바스크립트를 방지할 새로운 Data Fetching API는 아래와 같습니다.

새로운 data fetching의 특징은 어플리케이션 코드 내에 굉장히 단순하게 작성할 수 있다는 것이고, 가장 큰 장점은 데이터 fetching의 흐름을 레이아웃, 컴포넌트, hook과 같이 전체 앱에 뿌릴 수 있다는 점입니다.
결론적으로 공유된 UI 사이에서는 데이터 재사용이 가능하다는 것을 의미합니다.

이외에도 Next.js에서 많은 사용자들이 좋아하던 유연성과 확장성 유지를 위해 내장된 캐싱, 요청 중복 제거, 프로그래밍 방식의 유효성 검증, 세분화된 데이터 삭제와 같은 추가 기능을 통해 런타임을 확장하고 있습니다.

지금까지 설명한 내용을 종합하면, ISR, 정적인 data fetching, 그리고 SWR까지 모든 장점이 하나의 하이브리드 솔루션에 담긴 것을 의미합니다. 이 결과가 가능한 이유는 Next.js의 router가 리액트 서버 컴포넌트 위에서 개발되었기 때문입니다. 지금까지 정의했던 모든 프로덕트들은 모드 서버렌더링이 우선입니다.

 

3. Component Toolkit

컴포넌트 Toolkit
Web SDK는 이미지, 폰트, 스크립트 및 장바구니와 같은 웹에서 가장 흔하게 볼 수 있는 것들을 처리하지 않으면 완전해질 수 없습니다. 이를 위해 Third Party Assets을 올바르게 가져오는 것도 중요합니다.

먼저 이미지를 살펴보면, Next.js 13 버전 이전에 제공하던 이미지도사용자 웹 경험을 향상 시켰지만, Next.js 13에서는 더 적은 양의 클라이언트 자바스크립트를 사용하여 향상된 수행능력과 익숙한 인터페이스를 유지하도록 개선하였습니다.

다음으로 폰트는, 개발자가 커스텀 폰트를 사용하였을 때 실제 웹 페이지에서 폰트가 깨지거나 레이아웃이 밀리는 현상을 개선하기 위해 크롬팀과 함께 새로운 폰트 시스템을 도입하여 폰트 사용 방식을 완전히 바꿨습니다.
개발자가 등록한 커스텀 폰트 또는 구글 폰트를 사용하였을 때, 최적화 뿐만 아니라 외부의 어떤 네트워크 요청도 차단하고, 레이아웃 쉬프트 현상 99% 방지, 폰트 사라짐으로 인한 시각적인 방해 100% 방지, 레이아웃 밀리는 현상 제거와 같은 효과도 얻게 되었습니다.

마지막으로 오픈 그래프 이미지와 같이 사용자가 엄청난 수의 클릭을 하는 소셜 이미지 미디어를 구현할 때 ImageResponse를 사용하면 동적인 이미지를 생성할 때 유용합니다.
이는 새로운 코어 라이브러리를 사용하기 때문에 기존 솔루션보다 5배가 빠릅니다. (아래와 같이 import 하여 사용 가능합니다.)

import {ImageResponse} from 'next/server';

 

---

 

총정리.

1.
Webpack 후속작으로 Turbopack을 출시하였고, Turbopack은 Vercel romote caching을 통해 한 번 수행한 일은 다시 수행하지 않음으로써 엄청난 빌드 속도 단축 효과를 얻게 되었습니다.

2.
새로운 app directory를 통해 내장된 레이아웃과 강력한 새로운 컨벤션을 제공합니다. 이를 Vercel을 사용하여 배포하게 된다면 React 페이지가 최적의 서버리스 및 엣지 인프라가 되어 빠른 속도의 동적인 긴으과 정적인 가용성 및 비용 효율성을 제공합니다.

3. 
toolkit 확장을 통해 웹 플랫폼 기본 원칙에 대한 확신을 재확인 하고 개개인의 브랜드를 위한 단순한 리액트 컴포넌트 추상화를 통해 강력한 개인화를 가능하게 하였습니다.

 

 

---

Reference.
https://www.youtube.com/watch?v=NiknNI_0J48&t=173s