[Next.js] Page Router - prefetch, API Routes

Prefetching

프리패칭이란?

Pre : 사전에, 미리 + fecth : 불러온다

빠른 페이지 이동을 위해 제공되는 기능으로, 현재 사용자가 보고 있는 페이지에서 이동할 수 있는 모든 페이지를 미리 불러오는 것이다.

프리패칭을 통해 페이지 이동 속도를 높일 수 있다.

네비게이팅 방법 3가지(a, Link, useRouter) 중, 기본적으로 Link 컴포넌트를 사용한 경우에만 프리패칭이 이루어진다.

개발 모드(npm run dev)로 실행하면 프리패칭이 동작하지 않으니, 프로덕션 모드(npm run build -> npm run start)로 실행하여 확인해볼 수 있다.

useRouter를 사용한 경우 프리패칭

useEffect를 사용하여 페이지가 마운트될 때 router에 prefetch할 링크를 전달한다.

useEffect(() => {
  router.prefetch("/page1");
  router.prefetch("/page2");
  ...
}, []);

Link 컴포넌트의 프리패칭 해제

Link 컴포넌트의 prefetch props를 false로 전달하면 된다.

<Link href={"/book/1"} prefetch={false}>
  book
</Link>

---

API Routes

API Routes란?

Next.js앱에서 API를 구축할 수 있게 해주는 기능

API 요청을 보내면 마치 서버에서 응답하는 것처럼 JSON 형태의 데이터를 반환한다.

살펴보기

srt/pages/api 디렉터리에 기본적으로 hello.ts 파일이 만들어져 있다.

import type { NextApiRequest, NextApiResponse } from "next";

type Data = {
  name: string;
};

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>,
) {
  res.status(200).json({ name: "John Doe" });
}

.../api/hello요청을 보내면 json 파일이 응답된다.

만들어보기

현재 시간을 반환하는 api

import type { NextApiRequest, NextApiResponse } from "next";

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const date = new Date();
  res.json({ time: date.toLocaleString() });
}