Next app router 학습

server component

• 컴포넌트 네이밍 앞에 async도 추가할 수 있다.
• use~ hook을 사용할 수 없다. (e.g. useState, useEffect)
• 파일 최상단에 'use client' 를 추가하면 client component가 된다.
  • client component도 서버에서 렌더링되며, ssr도 가능하다.

layout.tsx & template.tsx & Parallel Routes(병렬 라우트)

• layout.tsx는 캐싱되서 리렌더링되지 않는다.
• 레이아웃 리렌더링을 하고싶으면 template.tsx를 사용한다.
• layout.tsx 뎁스에 @로 시작하는 폴더를 생성하면, layout 컴포넌트의 props로 사용할 수 있고, 파일 디펜던시없이 동시에 ui를 노출할 수 있다.

default.tsx

• 병렬 라우트에서 기본값이 필요없을 때 사용
  • export default function Default(){ return null }

Intercepting Routes

• 클라이언트에서 라우팅할 때만 적용가능

Route Groups

• (폴더명) 규격을 사용하면 되고, 이하 파일은 url 경로에 포함되지 않습니다.

Private Folders

• 폴더명 앞에 _를 붙이면 private folder가 되고, 이하 파일은 url 경로에 포함되지 않습니다. 폴더 정리용으로 사용

middleware

• matcher에 해당하는 router에 한해서 middleware의 함수가 실행된다
  

  Server Actions

• 서버에서 실행되는 asynchronous(비동기) 함수

• 함수 안 최상단에 'use server' 작성 후, api 호출같은 로직을 작성한다

• 서버 코드라서 브라우저에 노출되지 않음