한입 -3

App Router

• App 폴더 기반으로 Routing을 설정한다.
• 'page.tsx' 파일 내에 페이지 코드가 작성되어야하며, index 페이지에서 경로를 만들어줄 경우 우선 폴더를 만들고 그 안에 'page.tsx' 파일을 작성해야한다.
• 동적 경로 또한 기존 폴더 아래에 '[id]' 폴더를 만들고 그 안에 'page.tsx' 파일을 작성해야한다.
  ex) book/1, book2, ... book/100 의 경우, book 폴더 내에 [id] 폴더를 만들어야 한다.
• 공통 레이아웃을 작성할 때, 어떤 폴더 내에 'layout.tsx' 이름으로 작성할 경우 주소창에서 해당 폴더 이름으로 시작하는 경로 뒤에 어떤 것이 붙든 같은 레이아웃을 가지게 된다.
• 레이아웃 내에 Page의 요소들을 어디에 배치할건지 설정해주어야 한다.

search 페이지 내 쿼리스트링(search?q=) 사용법

export default async function page({
  searchParams,
}: {
  searchParams: Promise<{ q: string }>;
}) {
  const { q } = await searchParams;
  return (
    <div>search page : {q}</div>
  )
}

Route Group

• 폴더명을 소괄호로 묶어서 만든다.
• 장점: 경로상 아무런 영향을 주지 않으면서, 레이아웃만 적용이 가능하다.
• 어느 레이아웃을 모든 페이지가 아닌, 몇 페이지만 적용해야할 때 사용

React Server Component

• 서버측에서만 한 번만 실행되는 컴포넌트(브라우저에서 실행X)
• 사전 렌더링 과정 중 Hydration(JS를 심어주는 과정)이 불필요한 페이지에 해당 과정을 생략함
• 페이지의 대부분을 서버 컴포넌트(console을 터미널로 확인)로 구성할 것을 권장, 클라이언트 컴포넌트(console을 브라우저 창에서 확인)는 상호작용이 필요할 경우에만 사용.
• 브라우저에서만 사용 가능한 React Hooks는 사용이 불가하다.
• 클라이언트 컴포넌트로 만들고 싶다면, 파일 최상단에 "use client" 를 추가해주면 된다.

주의사항

• 서버 컴포넌트에는 브라우저에서 실행될 코드가 포함되면 안된다.
• 클라이언트 컴포넌트는 클라이언트에서만 실행되지 않는다.
• 클라이언트 컴포넌트에서 서버 컴포넌트를 import 할 수 없다.
  → 서버 컴포넌트가 클라이언트 컴포넌트로 변경된다.
  만일, 클라이언트 컴포넌트에 꼭 서버 컴포넌트를 import 해야한다면, children 으로 props 를 받아서 사용하면 된다.
• 서버 컴포넌트에서 클라이언트 컴포넌트에게 직렬화 되지 않는 Props는 전달 불가하다.
  → 직렬화: 객체, 배열, 클래스 등의 복잡한 구조의 데이터를 네트워크 상으로 전송하기 위해 아주 단순한 형태(문자열, Byte)로 변환하는 것 / 함수는 불가능

Navigating

• JS Bundle을 전송할 때 RSC payload도 같이 전송된다.

Pre-Fetching

• 이동이 가능한 모든 페이지를 불러놓는 것
• 개발자 모드로는 가동이 불가능

Data Fetching

Fetching data where it's needed(데이터는 필요한 곳에서 직접 불러와라)

// app/page.tsx
async function AllBooks() {
  const response = await fetch(`${process.env.NEXT_PUBLIC_API_SERVER_URL}/book`);
  if(!response.ok) {
    return <div>오류가 발생했습니다 ...</div>
  }
  const allBooks: BookData[] = await response.json();

  return (
  <div>
    {allBooks.map((book) => (
        <BookItem key={book.id} {...book} />
      ))}
  </div>
  );
}

types.ts
export interface BookData {
  id: number;
  title: string;
  subTitle: string;
  author: string;
  publisher: string;
  description: string;
  coverImgUrl: string;
}

Data Cache

• fetch 메서드를 활용해 불러온 데이터를 Next 서버에서 보관하는 기능
• 영구적으로 데이터를 보관하거나, 특정 시간을 주기로 갱신 시키는 것도 가능
• 불필요한 데이터 요청의 수를 줄여서 웹 서비스의 성능을 크게 개선할 수 있음

{ cache: "force-cache" }; - 단1회 호출
{ cache: "no-store" }; - 캐싱x
{ next: { revalidate: 10 } }; - 특정 시간을 주기로 업데이트, like ISR
{ next: { tags: ['a'] } }; - 요청이 들어왔을 때 최신화, On-Demand Revalidate

Request Memoization

• 중복적으로 발생하는 요청을 caching 해서 데이터 페칭을 최적화하는 기능
• 하나의 페이지를 렌더링하는 동안에 중복된 API 요청을 캐싱하기 위해 존재함
• 렌더링이 종료되면 모든 캐시가 소멸된다.