[미라클 TIL 20일차] Next.js
TIL 24. 01. 23
섹션 1. 왜 Next.js를 배우는가?
클라이언트 사이드 렌더링(CSR) 초기에 웹 페이지를 그리는데 필요한 JavaScript 번들이 크고
Next.js 서버 사이드 렌더링.
React가 가진 한계를 해결하기 위해 NextJS 등장.
섹션 2. Next.js 기본 배우기
2-1. Next.js는 무엇인가?
2-2. Next.js 13
Next.js는 파일 시스템 기반의 라우팅을 지원한다. 디렉토리 구조를 어떻게 짜냐에 따라 라우팅이 달라진다는 의미이다.
13버전 이전에는 pages라는 디렉토리 아래의 디렉토리들을 기준으로 라우팅을 제공했다. 어떤 경로로 페이지에 접근할 수 있는지 pages 아래의 파일과 디렉토리를 보고 판단했다.
Next 13버전에서는 pages라는 디렉토리를 app 디렉토리를 바꾼다. APP Directory 방식 -> App Route
App Router는 Hydration을 컴포넌트 단위로 할 수 있게 만들어준다. 원래는 페이지 단위로 해야 했다. App router에서 기능이 추가되면서 컴포넌트 단위로 부분적인 Hydration이 가능해졌다. 이러한 패턴을 Streaming이라 부른다.
계속 부분적으로 필요할 때마다 그 리스소를 계속 Hydration 하는 것. 유저가 처음에 받아야 하는 리소스의 양이 현저히 줄어들게 된다.
### 2-3. 서버 컴포넌트
이를 가능하게 하는 기술이 서버 컴포넌트(React Server Component)이다. React 18 버전에 도입된 기술로 NextJS에서 사용할 때 서버 컴포넌트라고 부른다.
서버 컴포넌트가 필요한 이유
- 데이터 페칭 상의 이점: 서버에서 데이터를 가져오니까 물리적으로 DB와 가까우므로 빠르다
- 보안 이점: 브라우저에서 보여지면 안 되는 민감한 정보를 서버에서만 두니까
- 캐싱: 렌더링된 값을 캐싱해두고 있다가 재사용하니까 여러 번 요청이 와도 이미 만들어진 결과를 내려주면 되니 성능 이점
- JavaScript 번들 크기 감소: 서버 컴포넌트의 경우에는 서버에서 렌더링까지 다 된 컴포넌트를 내려주면서 Hydration에 필요한 자바스크립트 파일이 줄어들게 된다.
서버 컴포넌트 혹은 클라이언트 컴포넌트
Next.js 13에서 기본은 서버 컴포넌트. 클라이언트 컴포넌트를 사용하려면 ‘use clinet’라고 명시해야 한다.클라이언트 컴포넌트가 되는 순간 클라이언트 컴포넌트에 서버 컴포넌트를 import 할 수 없다. 클라이언트에서 서버 컴포넌트를 사용하고 싶을 떄는 props로 넘겨줘야 한다.
클라이언트 컴포넌트는 CSR 컴포넌트가 아니다. 기존의 Next.js가 Pre-rendering이라는 방식으로 렌더링된다. 클라이언트 컴포넌트도 SSR, SSG 방식으로 렌더링 가능하다. 서버에서 컴포넌트를 미리 렌더링 해 둘 수 있는 것.
클라이언트 컴포넌트가 SSR이 된다면 RSC랑 뭐가 다른거지?
서버 컴포넌트의 장점이 서버 컴포넌트와 클라이언트 컴포넌트를 가르는 지점
서버 컴포넌트가 좋으니까 늘 서버 컴포넌트를 쓰면 되나, 굳이 클라이언트 컴포넌트를 쓸 필요가 있을까?
서버 컴포넌트가 참 좋지만 늘 사용할 수 있는 것은 아니다. 서버 컴포넌트에서는 hook과 event를 사용할 수 없다. 따라서 클라이언트 컴포넌트를 사용해야 한다.
컴포넌트 활용 패턴 - 클라이언트 컴포넌트는 트리의 끝으로 보내기
2-4. 라우팅
경로 지정하는 방식을 파일 시스템으로 한다. app이라는 디렉토리에 정의한다. 이런 방식을 App Router
Next.js에서는 파일 시스템 기반의 라우팅을 지원하기 때문에 폴더의 이름을 따라서 URL Path를 정의할 수 있다. app이라는 디렉토리 안에 폴더를 정의하고 규칙에 맞는 파일들을 정의하면 URL Path와 일치하는 형태로 사용될 수 있다.
app/dashboard/page.tsx
경로의 이름이 되는 폴더, 경로의 이름으로 사용되는 폴더를 segment라고 부른다. segment 내에는 파일이 필요하다.
page.tsx는 페이지가 렌더링 됬을 때 보여지는 UI를 그려준다. 로딩과 에러 발생, 레이아웃 등을 정의해야 할 때 그에 맞는 파일이 이미 정의되어 있다.
URL Path가 동적으로 바뀌어야 한다면 .. 동적으로 지정할 수 있는 방법 Dynamic Routes.
2-5. 페이지 간 이동
Link 컴포넌트 사용하기
Link 컴포넌트는 a 태그의 확장된 버전으로
useRouter 사용하기
버튼을 통해 이동해야 한다면 useRouter 사용. useRouter를 사용하는 경우는 클라이언트 컴포넌트로 정의해야 한다.
2-6. 스타일링
Next.js에서는 CSS Modules는 클래스 중복을 피하기 위한 지역 스코프
전역 스타일링 방식 - 여러 곳에서 동일한 패턴으로 사용되는 경우에 전역 스타일로 정의.
2-7. 데이터 페칭
다이나믹하게 어떤 아이디 값을 받아왔더라도 데이터를 동적으로 받아오지 않는다면 동적인 페이지를 그릴 수 없다. 데이터 페칭을 얼마나 미려하게 처리하느냐, 데이터 페칭에서 얼마나 속도를 줄일 수 있느냐가 유저 경험, 웹 애플리케이션 개발 자체에 많은 영향을 끼친다.
서버에서 페칭을 할 수 있도록 API를 제공하고 있다. Fetch API 역시 Next.js에서 확장하여 사용하고 있다.
async function getDate() {
const res = await fetch('...')
return res.json()
}
export default async functon Page() {
const data = await getData();
return <main>{data}</main>
}
댓글남기기