NextJS 공식문서에서 App Router 살펴보기

 

React와 NextJS

프론트엔드 프레임워크 NextJS의 App Router

 이번에 프로젝트의 과업은 프론트엔드를 vue에서 react로의 마이그레이션이고, 프레임워크는 NextJS를 사용한다. 이를 위해 '실전에서 바로 쓰는 NextJS' 도서를 읽어봤고, app router 방식을 공부하기 위해서는 공식 문서를 참고했다.

The App Router is a newer router that allows you to use React's latest features, such as Server Components and Streaming.

 

앱 라우터는 새로운 라우팅 방식이기 때문에 개념 학습을 위해 공식 문서를 참고하는 것을 추천한다.

 

공식 문서에서 한국어를 지원하지 않는 경우에는 번역 github를 통해 한국어로 된 문서를 확인할 수 있다. 다만 항상 최신 문서는 아니라는 점과 전문 번역가가 한 작업이 아니기 때문에 번역체로 어색하게 느껴지는 문장들이 있어 이해가 어려운 경우가 있다. 그렇기 때문에 공식 문서와 번역 문서 둘 다 참고해야 한다고 생각한다.

https://github.com/Nextjs-kr/Nextjs.kr

 

NextJS 사용 이유

리액트는 기본적으로 클라이언트 사이드 렌더링(Client Side Rendering) 방식이다. 

 

렌더링이란, 브라우저가 서버로부터 받은 데이터를 화면(View)에 표시해주는 작업이다. HTML, CSS, JS 파일을 다운로드 하고 실행시키는 과정을 클라이언트에서 실행하면 클라이언트 사이드 렌더링이라고 한다. 이 과정에서 브라우저에서 다운로드 및 실행이 되기 때문에 최초에 사용자가 빈 화면을 보는 시간이 길어지는 단점이 있다. 또한 크롤링 봇에 대응이 불가능한데, 크롤러가 요청 시에는 다운로드 및 실행이 되지 않기 때문에 사이트 정보를 읽어갈 수 없다는 단점이 있다. 

 

이와 반대되는 개념이 서버 사이드 렌더링이다. 사용자 요청 시에 서버에서 DOM Tree를 그려서 HTML을 만들어 응답한다. 그러면 브라우저에서는 JS를 실행시켜 이벤트가 동작할 수 있도록 동적인 페이지를 만든다. 화면이 먼저 그려지고 JS가 실행되기를 기다려야 한다는 단점이 있다. 하지만 크롤링 상황에도 HTML은 이미 만들어져 있기 때문에 사이트 정보를 제공할 수 있다는 이점이 크다.

JAVA 진영에는 jsp, thymeleaf (자바 템플릿 엔진)과 같은 기술이 SSR 이다.

 

NextJS 프레임워크는 서버 사이드 렌더링(Server Side Rendering)을 위해 사용되는데 어떤 방식이 더 좋다기 보다는 클라이언트 컴포넌트와 서버 컴포넌트의 적절하게 사용해야 할 것 같다.

 

App Router란?

 

"Server Component, Streaming 과 같은 리액트의 최근 특징들을 사용할 수 있도록 하는 새로운 라우터" 라고 정의되어 있다.

app router와 page router는 디렉토리 구조가 다르다. app 혹은 pages 사용에 따라 라우팅 방식이 달라진다. 

 

Routing

 

1. Routing 기초

파일 시스템 계층 구조가 URL 경로가 된다. leaf 폴더에 반드시 page.js or page.ts가 존재해야 하며, 예를 들어 app > display > page.js 인 경우에 도메인주소/display 가 엔드포인트가 된다.

 

2. 중첩 라우트

중첩된 경로를 만들려면 폴더를 서로 중첩해야 한다.

 

3. 파일 규칙

중첩된 경로에서 특정 행위를 하는 UI를 생성하는 특수한 파일들을 제공한다.

layout

page

loading

not-found

error

global-error

route

template

default

 

특수 파일에 정의된 컴포넌트들은 계층 구조로 렌더링된다.

 

4. Colocation

* 단일 위치 내에 여러 개의 컴포넌트를 위치시킨다. app 하위 디렉토리의 단일 위치에 여러 컴포넌트를 위치시켜도 특정 라우트에 해당하는 page.js를 리턴하고 page.js가 없는 segment route일 경우 접근 불가하다.

page route 와 다르게 app > dashboard 하위에 component, lib, api 등 여러 폴더를 생성하더라도 그 하위에 page.js 혹은 route.js 가 없다면 라우팅 가능한 페이지가 아니다. 

 

(하지만 현재 진행하는 프로젝트의 구조에는 lib, component, api 등을 src 폴더 하위에 app 디렉토리와 동등하게 위치시켰다. 이런 방법도 있다는 점..)

 

5. page와 layout

page.js 파일명은 단위 위치 내에서 유일해야 한다.

layout.js는 해당 위치와 그 하위 디렉토리까지 공유된다.

 

root layout 필수임

nested layout 계층 구조가 중첩되는 경우 layout 또한 중첩된다. 가장 외부가 부모 layout, 내부가 child layout으로 렌더링된다.

layout과 template 차이
템플릿은 레이아웃과 비슷하게 child component를 감싸지만, 차이점은 라우트를 관통하여 존재하고, 상태를 유지하는 레이아웃과 다르게 템플릿은 매번 새롭게 생성된다.

 

아래의 케이스들은 레이아웃보다 템플릿 사용이 권장된다.

- useEffect/useState에 의존하는 기능

- 프레임워크의 기본적인 동작을 변경할 때

 

(두 번째 케이스가 무슨 말인지 모르겠음)

 

6. Linking and Navigating

<a> 태그 대신 <Link> 태그를 사용한다.

<Link>의 기본 동작은 라우트 세그먼트의 최상단으로 스크롤하는 것이다. 이것을 방시하려면 <Link>의 href 속성 사용시 #(id) 값을 사용하여 라우트 이동 시에 특정 id로 스크롤 이동하도록 할 수 있다.

useRoute 훅을 사용하면 프로그래밍 방식으로 라우트를 변경할 수 있지만, 특별히 사용해야 하는 경우가 아니라면 <Link>를 사용하도록 권장한다.