코딩을 시작하고 학원에 다니면서 여러 스킬들을 배우게 되었다. JavaScript를 배우고, React를 배우면서 Next.js라는 이름을 종종 접하게 되었다. React로 배포를 진행하는 과정에서 Next.js를 사용하면 더 편했을 것이다라는 이야기를 들었고, 리액트 프로젝트 과정에서 배포를 하는 과정에 많은 어려움을 겪은 경험이 있어 Next.js가 더더욱 궁금해졌고, 추천받은 인프런 강의를 들어 개념을 파악하고 직접 공식문서와 여러 자료들을 살펴보고 정리하고자 한다.
Next.js?
Next.js란 빠른 웹 어플리케이션을 만들 수 있는 필요한 도구를 제공하는 React 프레임워크이다.
간략하게 설명하자면, React는 사용자 인터페이스를 구축하는 라이브러리라고 할 수 있다.
라이브러리란, 개발자가 UI를 구축하기 위한 유용한 기능을 제공하며, 기능에 대한 코드는 개발자가 직접 제어할 수 있는 것을 의미한다.
여기서 Next.js는 React의 프레임워크라고 했다. 프레임워크란 Next.js가 React에 필요한 도구 및 구성을 처리하고 애플리케이션에 대한 추가 구조, 기능 및 최적화를 제공한다는 의미이다.
React를 사용해 UI를 구축한 뒤 Next.js로 라우팅(routing), 데이터 가져오기(data fetching), 성능, 검색 최적화(SEO) 등의 필요한 도구들을 제공해 React에 필요한 도구를 추상화하고 자동으로 구성해준다. 이로 인해 개발에 필요한 선택을 최소화하고 최적화하는데 도움을 줄 수 있게 된다.
Next.js는 페이지의 빠른 로딩을 위해서 코드를 자동으로 분할하는 특징이 있다. 웹 애플리케이션의 성능을 최적화하기 위해 사용된다. 애플리케이션을 여러 페이지로 나누고, 각 페이지에 필요한 JavaScript 및 CSS 코드만 로드되어 페이지 로딩이 빠르다는 장점이 있다. 이 특징은 프리 렌더링 기능에 관련한 특징 중 하나이다.
다른 특징으로는 사용자가 다음 페이지로 이동할 가능성이 높은 경우에 해당 페이지의 사전 로드(프로 페칭)을 자동으로 처리해 사용자의 경험에 최적화 시킨다는 장점이 있다.
Next.js는 확장성이 뛰어나며, 큰 규모의 웹 애플리케이션을 구축하고 확장하는 데 적합한 프레임워크이다. 필요한 경우 서버 사이드 렌더링(SSR), 데이터베이스 통합, 상태 관리 및 다른 고급 기능을 통합할 수 있다. Next.js는 이러한 기능을 통해 웹 애플리케이션을 빠르게 빌드하고 최적화하는 것이 가능하다.
Next.js의 특징 중, 프리 렌더링과 서버리스 함수를 통한 API구축에 대해 좀 더 자세히 알아보았다.
Pre-rendering(프리렌더링)
기본적으로 Next.js는 모든 페이지에서 프리 렌더링을 한다. 프리 렌더링이란, 클라이언트 단에서 브라우저가 코드를 해석하기 전에 각각의 페이지의 리액트 컴포넌트를 HTML로 미리 생성해두는 것을 의미한다. 유저가 이렇게 생성한 UI를 볼 수 있는 타이밍을 TTV(Time to View)라고 한다. 이렇게 생성된 화면은 최소한의 자바스크립트 코드만 HTML로 변환되어 보여지기 때문에 사용자 기능을 수행하기 어렵다.(HTML로는 화면을 보여줄 순 있으나, 화면에 대한 기능은 모두 자바스크립트로 이루어져 있다.)
어떤 페이지가 브라우저에 의해 로드되면, 그 페이지의 자바스크립트 코드들이 적용되어 동적으로 만드는 과정을 하이드레이션(Hydration)이라 한다. 서버에서 렌더링한 HTML을 매말라 있던 상태로 본다면, 리액트로 작성한 Javascript 코드와 매칭해 동적으로 만들어 촉촉하게 해주는 과정이다. 이렇게 자바스크립트 인터렉션이 동적으로 동작하는 타이밍을 TTI(Time To Interact)라고 한다. 프리 렌더링은 HTML이 미리 생성되었기 때문에 초기 렌더링 시간이 빠르고 검색 최적화(SEO)에 유리하다는 장점을 가지고 있다.
Static Generation, Server side Rendering
프리 렌더링에는 두 가지 종류가 있다. Static Generation(정적 생성)과 Server Side Rendering(서버 사이드 렌더링)이다. 이 두 렌더링은 웹 페이지의 HTML을 언제 생성하느냐에 차이점이 있다.
Static Generation은 빌드 타임에 HTML을 생성하는 프리 렌더링 방식이다. 이렇게 렌더링된 HTML은 매 요청마다 재사용된다. 빌드 시에 이미 만들어진 파일을 모든 유저에게 같은 화면으로 보여지기 때문에 데이터 변동이 없는 페이지를 만드는데 적합하다. 하지만, 데이터가 유저마다 변동되는 페이지의 경우 재빌드와 재배포가 필요하기 때문에 해당 페이지에서는 적합하지 않다.
Server Side Rendering은 매 요청마다 HTML을 생성하는 프리 렌더링 방식이다. 유저의 요청(페이지에 처음 진입하는 경우, 창 포커싱이 바뀌는 경우)이 들어오면 서버에서 HTML을 생성한다. 서버에서 하는 일이 많아지기 때문에 서버에 부하가 생긴다는 단점이 있지만, 업데이트 되는 데이터를 반영해 빠른 TTV와 원활한 UX를 제공한다. 때문에 데이터가 자주 바뀌지 않고 유저마다 다른 페이지를 보여줘야 하는 마이페이지 등에 적합하다.
서버리스 함수를 통한 API라우팅
Next.js는 서버리스 함수를 통해 API 엔드포인트를 만들고 사용할 수 있도록 도와준다. 개발자는 서버 관리 없이 백엔드 로직을 구현하고 사용할 수 있다고 한다. 이런 설명으로는 아직까지 서버리스 함수라는 것이 구체적으로 어떤 것을 설명하고 있는지 와닿지 않는다. 서버리스 함수와 API 라우팅에 대해 조금 더 알아보고자 한다.
Next.js는 특정 디렉토리 안에서 API의 엔드포인트를 설정할 수 있다. 일반적으로 Next.js를 설치받으면 생성되는 디렉토리인 'pages' 디렉토리에 ‘api’ 폴더를 생성한 뒤 해당 디렉토리(pages/api)에 서버리스 함수를 작성할 수 있다.
서버리스 함수의 특징은 다음과 같다.
- HTTP 요청(GET, POST, PUT, DELETE 등)을 처리하고, 해당 요청에 따른 데이터를 생성 또는 반환할 수 있다.
- 이 함수들은 백엔드 서버가 필요하지 않고, 서버리스 환경에서 실행된다.
- 서버리스 함수는 URL 경로와 연결되며, 경로가 요청되면 경로에 해당하는 함수가 실행된다.
- 예를 들어, /api/user 경로가 요청되면 ‘pages/api/user.js’ 파일의 서버리스 함수가 실행하게 된다.
서버리스 함수를 사용하면 서버리스 컴퓨팅 환경을 사용하기 때문에 백엔드 서버 없이도 API라우팅을 구현할 수 있게된다. 서버리스 컴퓨팅이란, 클라우드 제공업체(예: AWS, Azure, Vercel, Netlify)가 제공하는 컴퓨팅 환경을 말한다. 서버리스 컴퓨팅을 사용하면 백엔드 서버를 직접 개발하거나 관리할 필요가 없다.
다음은 서버리스 함수로 API라우팅을 작동하는 예시이다.
- Next.js 프로젝트 내 ‘pages’ 폴더에서 'api' 디렉토리를 생성한다.
- ‘pages/api’ 디렉토리 내에서 서버리스 함수를 만든다.
- 예를 들어, pages/api/user.js 파일을 만들어 사용자 정보를 다루는 API 엔드포인트를 구현할 수 있다.
// pages/api/user.js
export default (req, res) => {
// 서버리스 함수 내에서 HTTP 요청(req)과 응답(res)을 처리합니다.
const userData = { name: 'John', email: 'john@example.com' };
res.status(200).json(userData);
};- 클라이언트에서 ‘/api/user’ 경로로 HTTP 요청을 보내면, 서버리스 함수가 실행되고 해당 요청을 처리한다.
- 서버리스 함수는 HTTP 요청을 처리하고 데이터베이스에 접근하거나 다른 서비스와 상호 작용하여 필요한 데이터를 가져온 뒤, 데이터를 JSON 형식으로 클라이언트에 응답으로 반환한다.
- 클라이언트는 이 API 엔드포인트에 HTTP 요청을 보내고, 서버리스 함수가 반환한 데이터를 처리한다.
- 이런 방식으로 클라이언트와 백엔드의 통신이 이루어지게 된다.
< 출처 >
- Next.js 공식문서
- [손에 익는 Next.js] 공식문서 훑어보기
- 프리렌더링
'개발일지 > Next.js' 카테고리의 다른 글
| [Next.js] Routing (상황에 따른 파일 이름, 파일 이름을 따르고 동적으로 변할 수 있는 URL Path) (0) | 2024.05.09 |
|---|---|
| [Next.js] Server/Client Component (서버 컴포넌트, 클라이언트 컴포넌트) - 장단점, 활용패턴, 사용해야 하는 경우 (1) | 2024.04.19 |
| [Next.js] Next.js / App Routing (0) | 2024.04.03 |
