Next.js 14 - z.com(2)

template.tsx

• 템플릿은 각 하위 레이아웃 또는 페이지를 래핑한다는 점에서 레이아웃과 유사하다.
• 사용자가 템플릿을 공유하는 경로 사이를 탐색할 때 컴포넌트의 새 인스턴스가 마운트되고, DOM 요소가 다시 생성되며, 상태가 유지되지 않고, 효과가 다시 동기화된다.
• useEffect(ex: 페이지 보기 로깅) 및 useState(ex: 페이지별 피드백 양식) 에 의존하는 기능은 template가 적합하다.

💡 layout과 template는 공존해서는 안된다. 둘 중 하나를 택하도록 하자.
layout.tsx의 경우 라우팅간에 리렌더되지 않지만, template.tsx는 컴포넌트가 새로 마운트되므로 특정 동작이 필요할 경우 채용한다.

---

<Link>

• <Link>는 HTML <a> 요소를 확장한 route 간 prefetching 및 client-side navigation을 제공하는 React 컴포넌트다.

💡 prefetching
사용자가 route를 방문하기 전에 백그라운드에서 route를 미리 로드하는 방법
프리페칭은 개발 환경에서는 활성화되지 않으며 프로덕션 환경에서만 활성화된다.

route prefetch 방법 2가지
1. <Link> 컴포넌트: Route가 사용자의 뷰포트에 표시될 때 자동으로 prefetching 
2. router.prefetch(): useRouter hook으로 route prefetch 사용 가능

---

<Image>

• Next/Image에서 제공하는 <Image> 컴포넌트는 이미지 최적화를 지원한다. 
• dist 폴더의 cache/images 폴더에 최적화된 이미지를 생성, 동일한 요청에 대해서는 캐싱된 이미지를 재사용함.

---

redirect

import { redirect } from 'next/navigation'

redirect(path, type)

• redirect는 사용자를 다른 URL로 리디렉션할 수 있다.
• 서버 컴포넌트, 라우트 핸들러, 서버 액션에서 사용 가능
• server action default type parameter - 브라우저 히스토리 스택에 리다이렉트 URL push
• 그 외 default type parameter - 브라우저 히스토리 스택에 현재 URL을 replace 

---

참조

https://www.inflearn.com/course/next-react-query-sns%EC%84%9C%EB%B9%84%EC%8A%A4/

Next + React Query로 SNS 서비스 만들기 | 조현영 - 인프런