코드 기반 라우팅, 파일 기반 라우팅
전통적인 React app은 React-router 라이브러리를 사용해 Routing을 구현했다.
Code-based Routing 방식으로 JSX, JS code를 작성해 routes를 정의하고, 페이지 구조를 만든다.
Nestjs에서는 File-based Routing 방식을 채용하고, react 컴포넌트 파일을 만들면 Nextjs가 폴더 구조(pages)로부터 route를 유추해서 구현한다.
CSR(Client-Side-Rendering)
클라이언트 브라우저에서 애플리케이션 렌더링을 진행하는데, 애플리케이션 구동에 필요한 HTML, JavaScript, CSS 파일 등을 모두 다운로드한 뒤에 뷰가 구성된다.
SSR(Server-Side-Rendering)
브라우저가 서버에 페이지를 요청하면 서버가 필요한 데이터로 HTML을 구성하여 브라우저에 전송한다. 브라우저에서 응답으로 받은 HTML을 렌더링 한다.
유저의 데이터에 따라 다르게 보여주는 페이지의 경우 매번 서버에서 동적으로 생성할 필요가 있지만, 모든 유저에게 항상 같은 내용을 보여주는 페이지는 매번 동적으로 생성할 필요가 없다 -> SSG
SSG(Static-Site-Generation)
다른 말로, Static-Rendering이라고도 하는 해당 방식은 클라이언트에서 필요한 페이지들을 사전에 미리 준비해뒀다가 요청을 받으면 이미 완성된 정적 파일을 단순히 반환하여 페이지를 유저에게 빠르게 제공한다.
Next.js의 장점
-
Dynamic Routing
pages 폴더에 파일을 구성하면 알아서 라우팅 처리를 해준다.
react-router-dom을 사용해 일일이 해주던 라우팅 처리를 하지 않아서 편리하다. -
Autoamtic Code Splitting
코드에 리소스 임포트 여부를 파악해 필요한 JS파일만 로드해준다.
그래서 초기 페이지 로드시간이 빠르다. -
SeverSide Rendering
빠른 렌더링과 SEO 최적화가 가능하다.
Next.js 기본 구조
Nextjs를 사용할 때 pages 폴더에는 파일 이름과 구조에 _document.js, _app.js 등과 같이 컨벤션이 존재한다.
_document.js
React LifeCycle과 Data Fetching이 불가능하다.
<head>태그 안에 작성될 CDN이나 공통으로 추가될 meta 태그를 작성한다.
_app.js
모든 페이지의 공통 페이지 역할을 수행한다.
로직, 전역 스타일 등 컴포넌트에 공통 데이터를 다룬다.
_error.js
에러 페이지에서 공통으로 사용되고, 작성하지 않을 경우 Nextjs에서 디폴트 값을 알아서 사용한다.
next.config.js
웹팩 플러그인과 Nextjs 라우팅 설정을 작성한다.
