Next.js 13 - 블로그 프로젝트 | 성능 최적화

1. cache() - fetch를 사용하지 않는 api 비동기 함수

fetch()는 중복된 호출이 있다면 한번 캐싱하고 그 값을 자동으로 사용한다.

export const getPosts = cache(async () => {
const filePath = path.join(process.cwd(), "data", "posts.json");
return readFile(filePath, "utf-8")
.then<Post[]>(JSON.parse)
.then((posts) => posts.sort((a, b) => (a.date > b.date ? -1 : 1)));
});

cache -> request 인자가 동일한 인자라면 한번 호출이 되면 캐시된 값을 반환한다. 한번 렌더링 될 때 유지되며 (= 한번 렌더링 될 때 3개의 컴포넌트에서 같은 함수를 호출한다면 한번만 호출되고, 나머지 두번은 캐시된 값을 사용함), 다시 다른 페이지를 렌더링한다면 캐시된 데이터를 사용하지는 않는다.

 

https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating

Data Fetching: Fetching, Caching, and Revalidating | Next.js

근데 docs에는 관련 내용이 없음..뭐지?

 

 

 

2. generateStaticParams() 

원하는 페이지를 미리 static으로 만들어둠

 

import AdjacentPostCard from "@/components/post/AdjacentPostCard";
import MarkdownViewer from "@/components/post/MarkdownViewer";
import { getFeaturedPosts, getPostData } from "@/service/post/posts";
import { Metadata } from "next";

type Props = {
  params: { slug: string };
};

export async function generateMetadata({
  params: { slug },
}: Props): Promise<Metadata> {
  const post = await getPostData(slug);
  const { title, description } = post;
  return {
    title,
    description,
  };
}

export default async function PostPage({ params: { slug } }: Props) {
  const post = await getPostData(slug);
  return (
    <div className="flex flex-col p-20 items-center mb-10 ">
      <article>
        {post && (
          <section>
            <h1>{post.title}</h1>
            <MarkdownViewer content={post.content} />
          </section>
        )}
      </article>
      <section>
        {/* {post.prev && <AdjacentPostCard post={post} type="prev" />} */}
        {/* {post.next && <AdjacentPostCard post={post} type="next" />} */}
      </section>
    </div>
  );
}

export async function generateStaticParams() {
  const posts = await getFeaturedPosts();
  return posts.map((post) => {
    slug: post.path;
  });
}