Next.jsブログの性能改善：fetchの並列化とSuspenseの最適化

const post = await PostService().getPost({ post_id: id });
await PostService().viewIncrement({ post_id: id });

const [markdownsource] = await Promise.all([
    PostService().getPost({ post_id: id }),
  PostService().viewIncrement({ post_id: id }),
]);

<Suspense fallback={<Loading />}>
  <BreadCrumb params={markdownsource} />
</Suspense>
<Suspense fallback={<Loading />}>
  <MdxHeader props={...} />
</Suspense>
<Suspense fallback={<Loading />}>
  <Giscus />
</Suspense>

<Suspense fallback={<Loading />}>
  <>
    <BreadCrumb params={markdownsource} />
    <MdxHeader props={{ ... }} />
    <div className="ml-auto text-right">
      📅 <LocalizedDate isoString={markdownsource.init_date} />
    </div>
    <div className="prose mt-10 ...">
      <MdxBody content={markdownsource.posting} />
      <RightSidebarComp content={markdownsource.posting} />
    </div>
    <Giscus />
  </>
</Suspense>

const dateString = dayjs(markdownsource.init_date).locale("ko").format("YYYY년 MM월 DD일");

'use client';
import dayjs from 'dayjs';
import 'dayjs/locale/ko';
export const LocalizedDate = ({ isoString }: { isoString: string }) => {
    const [text, setText] = useState('');
  useEffect(() => {
      dayjs.locale('ko');
    setText(dayjs(isoString).format('YYYY년 MM월 DD일'));
  }, [isoString]);
  return <span>{text}</span>;
};

<LocalizedDate isoString={markdownsource.init_date} />

// metadata.ts에서 호출
const markdownsource = await PostService().getPost({ post_id: params.post });
// page.tsx에서도 또 호출
const markdownsource = await PostService().getPost({ post_id: params.post });

const getPostMeta = async (params: { post_id: string }) => {
  const response = await CustomFetch(`/post/meta${getParams(params)}`, {
    method: "GET",
  });
  return response.body.data;
};

export async function generateMetadata({ params }) {
    const meta = await PostService().getPostMeta({ post_id: params.post });
  return GenerateMeta({ meta, param: params.post });
}