한 입 크기로 잘라먹는 Next.js(15+)

#section5

4. 라우트 세그먼트 옵션

특정 페이지의 유형을 강제로 Static or Dynamic 페이지로 설정

export const dynamic = 'force-dynamic'

1. auto
   기본값, 아무것도 강제하지 않음

2. force-dynamic
   페이지를 강제로 Dynamic 페이지로 설정

3. force-static
   페이지를 강제로 Static 페이지로 설정
   페이지 내부에서 사용한 동적함수는 undefined 이 반환되도록 자동 설정
   검색 기능이 제대로 작동하지 않을 수 있다

4. error
   페이지를 강제로 Static 페이지로 설정
   Static으로 설정하면 안되는 이유가 있다면 (동적함수, 캐싱되지 않는 데이터 페칭) 빌드 오류를 발생

5. 클라이언트 라우트 캐시

• 브라우저에 저장되는 캐시로 Next에서 자동으로 설정된다
• 페이지 이동을 효율적으로 진행하기 위해 페이지의 일부 데이터를 보관한다
  (ex. 중복된 레이아웃)
• 단, 새로고침 또는 재접속시 클라이언트 라우트 캐시는 사라지게 된다

브라우저 측에 보관되는 캐시는 한 번 접속한 페이지의 레이아웃을 따로 보관해둔다

페이지 이동이 일어날 경우 공통된 레이아웃을 서버로 부터 다시 불러오지 않고
클라이언트 라우터 캐시에서 가져온다

# section6

1. 스트리밍이란?

• 서버에서 클라이언트로 데이터를 넘겨줄때
  데이터가 너무 크거나 데이터 로딩이 오래 걸리는 경우
  데이터를 잘게 쪼개어 클라이언트에게 데이터를 연속적으로 전송하는 기술
• 빨리 렌더링 할 수 있는 컴포넌트들을 우선적으로 보여주는 기술
• 스트리밍 기술은 Next.js에서 자체적으로 제공한다
• 주로 Dynamic 페이지에서 사용된다
• 느리게 렌더링 되는 부분은 로딩바 같은 대체 UI를 나타낼 수 있다

2. 스트리밍1) 페이지 스트리밍 적용하기

대체 UI 설정하기

1. 스트리밍을 적용하려는 페이지와 동일한 레벨에 loading.tsx 파일 생성
   

2. 로딩바 역할을 할 코드 작성 → 스트리밍이 자동으로 적용된다

// 📄 src/app/(with-searchbar)/search/loading.tsx
export default function Loading() {
  return <div>Loading ...</div>;
}

로딩 UI 확인해보기

데이터를 불러오는 속도가 너무 빠르게 때문에
강제로 데이터를 불러오는 과정을 지연 시켜서 확인해볼 수 있다

1. src아래에 util 폴더 생성, delay.ts 파일 생성

// 📄 src/util/delay.ts
export async function delay(ms: number) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('');
    }, ms);
  });
}

2. 데이터를 불러오는 파일에서 await delay(1500) 코드 추가

📄 src/app/(with-searchbar)/search/page.tsx

결과

주의할 점

1. 동일한 경로만 스트리밍 되는 게 아니라
   layout 파일처럼 해당하는 경로 아래에 있는 모든 페이지 컴포넌트들이 전부 스트리밍 되도록 설정된다

2. async 키워드가 붙어 비동기로 작동하도록 설정된 페이지 컴포넌트에만 스트리밍을 제공한다

3. page.tsx 파일에만 스트리밍을 적용할 수 있다

4. 브라우저에서 쿼리스트링이 변경될 때에는 스트리밍이 트리거링되지 않는다