Next.jsのメタタイトルを動的に取得したい

どうもこんにちは。Itsumoarigatoneです。

今回は技術系の話

やりたいこと

徐々にSEOを意識してこのサイトを整理しているところです。

そこで今回はブログのメタタイトルをブログのタイトルにしようとしました。

やろうとしたこと

import BlogDetail from '@/app/_components/_blog/BlogDetail'
import { BlogDetailMeta } from '@/app/_components/_blog/BlogDetailMeta'
import { Metadata } from 'next';

export const metadata: Metadata = BlogDetailMeta()


export default function Page({ params }: { params: { id: string } }) {
  return (
    <>
      <BlogDetail id={params.id} />
    </>
  );
};

BlogDetailMeta.ts

export const BlogDetailMeta = () => {
  // ここでDBにアクセスとかやる
  return {
    title: 'たいとる',
    description: 'せつめい',
  }
}

ここのBlogDetailMetaでfindUniqueとか使ってブログのタイトルを取得しようかなーと思っていました。

問題点

このサイトはvercelの無料版を使って構築しているのですが、

無料のせいか、ボクのせいか分からないのですが、データのリクエストからレスポンスまで2秒ぐらいかかるので非同期処理でごまかしています。

つまり、ブログを開く⇢とりあえず枠とローディングを表示⇢DBへリクエスト（ここから2秒）⇢レスポンス取得の流れ

なので、メタタイトルを設定しようとするとローディングが使えなくなり、いきなり2秒かかるのでユーザー体験が落ちてしまいます。

どうすればいいか？

これ、スペック上げる以外どうしようもなくね？

ってなってます。

いやー、くまったくまった（・(ｪ)・）

いくら趣味とはいえ赤字でしかないね。
なので、レザー製品いかがですか！

あと、server actionってPOSTでリクエストするようですね。

これってGETにしたりできないのかな？まだまだNext.jsの理解は浅い。。