在这个页面上，我需要缓存我的API函数，因为我在Page和generateMetadata函数中需要相同的数据。
由于我使用的是Axios，而不是fetch，因此重复数据删除不会自动发生，我必须将API调用 Package 到React的cache函数中。
问题是，如果我导航到另一个页面，然后返回到这个页面，我接收到的是相同的旧状态数据。我想要的是与getServerSideProps相同的行为，我们总是从服务器加载新的数据。

import * as UsersApi from "@/network/api/users";
import { notFound } from "next/navigation";
import { NotFoundError } from "@/network/http-errors";
import UserProfilePage from "./UserProfilePage";
import { Metadata } from "next";
import { cache } from "react";

interface PageProps {
    params: { username: string; }
};

// TODO: How can I dedupe requests without getting stale data on page navigation?
const getUser = cache(UsersApi.getUserByUsername);

export async function generateMetadata({ params: { username } }: PageProps): Promise<Metadata> {
    try {
        const user = await getUser(username);
        return {
            title: `${user.username} - Flow Blog`,
        };
    } catch (error) {
        if (error instanceof NotFoundError) {
            notFound();
        } else {
            throw error;
        }
    }
}

export default async function Page({ params: { username } }: PageProps) {
    const user = await getUser(username);
    return <UserProfilePage user={user} />;
}