1. not-found.tsx
최상위 또는 해당 폴더에서 라우트를 찾을 수 없다면 notFound() 함수가 호출되고 이에 따라 해당하는 위치에서 not-found.tsx가 실행됨.
따라서 [...post] 를 하지 않은 상태에서 products/s/s 이렇게 두번 더 연결하면 최상위 폴더의 not-found로 연결됨.
export default function PostPage({ params }: Props) {
if (params.post === "nothing") {
notFound();
}
return <div>{params.post} Post</div>;
}또는 특정한 상황에서 notFound()를 직접 호출해도 됨
=> 페이지별로 다른 not found UI를 보여줄 수 있음
2. layout.js
- header, navbar, menu, sidebar 등
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>
<header className={styles.header}>
<h2>Demo Note App</h2>{" "}
<nav className={styles.nav}>
<a href="/contact">Contact</a>
<a href="/about">About</a>
</nav>
</header>
{children}
</body>
</html>
);
}
/app 폴더의 layout.tsx 파일에서 골격이 보여짐 -> 이후 라우팅되는 contact, about 페이지에서도 동일하게 보여짐
3. Link로 최적화
Link태그가 사용자에게 보여지는 정적인 페이지가 있다면
해당 페이지에 필요한 데이터를 pre-fetching한다.
이렇게 nav bar에서 Link 태그를 3개 사용하고 있다면, 이 메인 페이지를 로드할 때
Link 태그를 사용하는 products, contact, about 페이지를 미리 패칭한다.
그래서 이후에 About이나 Contact를 클릭했을 때 별도의 요청을 하지 않고도 페이지가 화면에 보여진다.
+ docs에서 추가
그리고 Link 태그의 기능 중 props => Scroll 이 포함되어있다.
Scroll to the top of the page after a navigation. Defaults to true
4. Loading
In the same folder, loading.js will be nested inside layout.js. It will automatically wrap the page.js file and any children below in a <Suspense> boundary.
+ Suspense와 Streaming
https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming
- streaming : 서버에서 데이터 전체를 fetch 할 때 까지 기다렸다가 HTML을 보여주면 TTV도 느려짐 -> 그래서 split해서 모든 데이터가 페치될 때 까지 다 기다리지 않고 일부분만 먼저 보냄.
따라서 Hydration까지의 시간을 줄일 수 있다.
suspense 사용의 이점!
By using Suspense, you get the benefits of
1. Streaming Server Rendering - Progressively rendering HTML from the server to the client.
2. Selective Hydration - React prioritizes what components to make interactive first based on user interaction that doesn't rely on data (ex. layout).
'Computer Programming > Next' 카테고리의 다른 글
| Next.js - fetch를 이용한 SSG, ISR, SSR, CSR 구현 옵션 (0) | 2023.08.01 |
|---|---|
| Next.js - Server Component/ Client Components (0) | 2023.08.01 |
| Next.js - Metadata (0) | 2023.08.01 |
| Next.js - Static/Dynamic Routing (0) | 2023.08.01 |
| Next.js 장점과 렌더링 종류 (0) | 2023.08.01 |
