Nextjs(app router)

김장현·2025년 3월 4일
nextjs

Route Group

ex) 폴더명 (with-searchbar)
경로상에 영향을 미치지않으면서 레이아웃만 동일하게 적용 할 수 있다

Server Components

  1. 서버 컴포넌트는 사전 렌더링시 한번만 실행, 클라이언트는 사전 렌더링, 하이드레이션 두번 실행
  2. 페이지의 대부분을 서버 컴포넌트로 구성할 것을 권장
  3. 클라이언트 컴포넌트는 꼭 필요한 경우 에만 사용할 것 이유는 번들 크기 및 기타 등등...
  • 주의사항
    • 서버 컴포넌트에는 브라우저가 실행될 코드가 포함되면 안된다
    • 클라이언트 컴포넌트는 클라이언트에서만 실행되지 않는다
    • 클라이언트 컴포넌트에서는 서버 컴포넌트를 import 할 수 없다
      • nextjs 에서는 자동으로 서버컴포넌트를 클라이언트 컴포넌트로 변경해서 렌더링을 진행한다 왠만하면 피하는게 좋다 왜냐하면 클라이언트는 번들에 포함되기때문에 용량이 커지기때문에 하이드레이션이 길어 지게된다
        어쩔수없는 상황에서는 서버컴포넌트를 import 하지말고 children으로 받아서 사용하면된다
    • 서버 컴포넌트에서 클라이언트 컴포넌트에게 직렬화 되지 않는 prop는 전달 불가하다
      • 직렬화란 아주 단순한 형태로 변환하는것
      • 자바스크립트 함수는 직렬화 불가
  • Rsc Payload
    • 서버 컴포넌트가 먼저 rsc payload로 직렬화가된다 이후에 클리이언트 컴포넌트 렌더링
  • app router 변경점

app route 에서는
dynamic(ssr) 한 페이지는 rsc payload만 프리페칭 js 번들은 프리패칭이 안된다 왜냐하면 페이지 내부에 코드에서 빌드타임에 생성되면 안될거같은 코드가있을경우라서 , static(ssg) 페이지만 rsc payload, js번들 모두 프리페칭

Data Cache

  1. fetch 메서드를 활용해 불러온 데이터를 next 서버에서 보관하는 기능
  2. 영구적으로 데이터를 보관하거나, 특정 시간을 주기로 갱신 시키는 것도 가능
  • fetch cache 옵션

15 버전부터는 기본값이 노캐싱, 14 버전은 기본값이 캐싱

  • no-store

    • 데이터 페칭의 결과를 저장하지 않는 옵션
    • 캐싱을 아예 하지 않도록 설정하는 옵션

  • force-cache

    • 요청의 결과를 무조건 캐싱함
    • 한번 호출 된 이후에는 다시는 호출되지 않음

  • revalidate

    • 특정 시간을 주기로 캐시를 업데이트 함
    • 마지 page router의 isr 방식과 유사 함

  • tags

    • On-demand Revalidate
    • 요청이 들어왔을 때 데이터를 최신화 함

Request Memoization

중복된 api 요청을 자동으로 합쳐주는 기능

  • Request Memoization 과정

    어떠한 페이지에서의 요청 중복 과정 이미지

  • 주의사항

    • 데이터 캐시와는 엄연히 다르다
      1. 하나의 페이지를 렌더링 하는 동안에 중복된 api 요청을 캐싱하기위해 존재함
      2. 랜더링이 종료되면 모든 캐시가 소멸됨
      3. 리퀘스트 메모이제이션은 하나의 페이지를 렌더링하는 동안에만 존재
      4. 오직 중복된 api 요청을 방지하는데에만 목적
      5. 데이터 캐시는 거의 영구적으로 보관하기 위해 사용됨 서버 가동중에는 거의 영구적으로 보관된다

Full Route Cache

  • next 서버측에서 빌드 타임에 특정 페이지의 렌더링 결과를 캐싱하는 기능
  • page router ssg 와 유사하다(페이지 캐싱)

  • 어떠한 기능을 사용하느냐에 따라 자동으로 나뉜다

  • 분류하는 기준
    • dynamic page로 설정되는 기분
      1. 특정 페이지가 접속 요청을 받을 때 마다 매번 변화가 생기거나, 데이터가 달라질 경우

      2. 동적 함수(쿠키, 헤더, 쿼리스트링)을 사용하는 컴포넌트

      3. fetch 하나라도 revalidate옵션이 적용되어있다면풀 라우트 캐시 페이지도 페이지 라우터에 isr 처럼revalidate 옵션을 사용할수있다

  • 동적 경로에 적용하는 방법
    export function generateStaticParams() {
  return [{ id: "1" }, { id: "2" }, { id: "3" }];
 } 
 // page router getStaticPaths와 비슷하다
  • 주의사항
    1. 빌드 할때 서버에서는 절대 알수없는 값 ex)useSearchParams 같은 비동기 훅이있는
      컴포넌트때문에 빌드에러가날수있다
      해결하기 위해서는 해당 컴포넌트를 suspense컴포넌트로 감싸주면된다
    2. 문자열 데이터로만 명시를 해야한다
    3. 컴포넌트 내부에 데이터 캐싱이 설정되지 않아도 무조건 해당하는 페이지는 강제로 static page가 적용된다
    4. 명시되지 않은 동적 경로 페이지도 다이나믹하게 실시간으로 만들어준다

Route Segment Options

특정 페이지의 유형을 강제로 static, dynamic 페이지로 설정하는 것
정말 특별하지않으면 권장하지 않는 옵션
ex) export const dynamic = "auto"

  • 자주 사용되는 dynamic 옵션
    • auto
      • 기본값, 아무것도 강제하지 않음
    • force-dynamic
      • 페이지를 강제로 dynamic 페이지로 설정
    • force-static
      • 페이지를 강제로 static 페이지로 설정
      • 동적 함수는 undefined로 강제 반환하게된다
      • 데이터 페칭도 강제로 캐싱하게 변경된다
    • error
      • 페이지를 강제로 static 페이지로 설정하지만 (강제로 설정하면 안되는 코드(동적함수)가있으면 에러를 발생시킨다)

// 아래 코드를 적용하면 명시되지 않은페이지는 not found 페이지로 리다이렉션 이동시켜버린다
export const dynamicParams = false

Client Router Cache

  • 브라우저에 저장되는 캐시
  • 페이지 이동을 효율적으로 진행하기 위해 페이지의 일부 데이터를 보관함

레이아웃 rsc payload 의 경우에만 브라우저에 클라이언트 라우터 캐시를 저장해놓게 된다 rootLayout, userLayout 등등
추후에 중복되는 레이아웃이 요청된다면 클라이언트 라우터 캐시에서 꺼내쓴다
새로고침이 된다면 초기화된다

Streaming

특정 페이지를 렌더링할때 비동기 작업이
존재하지 않는 빠르게 렌더링할수있는 컴포넌트부터 브라우저에게 보내준 후
비동기 작업을 포함하고있는 비교적 오래걸리는 컴포넌트를 뒤늦게 브라우저에게 보내주는 것

  • 주의사항
    1. 동일한 루트에 loading.tsx 파일은레이아웃처럼 해당하는 경로 아래에 모든 파일들에적용된다
    2. 비동기 컴포넌트에만 적용된다
    3. 무조건 페이지 컴포넌트에만 적용할수있다
    4. 페이지의 경로(url)가 바뀔때만 적용된다

컴포넌트에도 스트리밍을 적용하려면
리액트에 suspense 컴포넌트를 이용하면된다
suspense컴포넌트는 최초에 한번만 내부컴포넌트에 로딩이 완료되더라도
내부컴포넌트에 변경이있더라도 로딩표시를 하지않는다
그래서 key값을 매번바꿔버려서 새롭게 인식을 시켜줘 loading 화면을 다시 보여줄수있다

Error Handling (error.tsx)

useRouter().refresh(); // 현재 페이지에 필요한 서버컴포넌트들을 다시 불러옴
reset(); // 에러 상태를 초기화하고 , 컴포넌트들을 다시 렌더링
useRouter.refresh 함수는 보이드 타입의 비동기 함수라 react 에 startTransiton함수를 사용해줘야한다

profile
김장현
이전 포스트

NextJS

다음 포스트

monorepo

0개의 댓글