I am faced with a straightforward setup where a Next.JS server-side component is responsible for fetching and displaying a post. The challenge lies in setting the page title to reflect the title of the post, requiring me to call my posts API endpoint twice - once in the generateMetadata function and again within the component itself.
Despite Next.JS's documentation stating that fetch requests are memoized throughout the request cycle, local testing reveals otherwise as the API endpoint logs show multiple hits. How can I ensure proper memoization for the fetch requests? Below is a simplified version of my component code:
// posts/[slug]/page.tsx
import {Metadata} from "next";
import {PostResponse} from "@/service/model/api";
export async function generateMetadata(props: PostPageProps): Promise<Metadata> {
const response = await fetch(`${process.env.BASE_URL}/api/posts/slug?slug=${props.params.slug}`, {
method: "GET",
headers: {
"Authorization": `Bearer ${process.env.API_KEY}`
},
});
const posts: PostResponse = await response.json();
return {
title: posts.posts[0].title
}
}
export default async function PostPage(props: PostPageProps) {
const response = await fetch(`${process.env.BASE_URL}/api/posts/slug?slug=${props.params.slug}`, {
method: "GET",
headers: {
"Authorization": `Bearer ${process.env.API_KEY}`
},
});
const posts: PostResponse = await response.json();
return (<div>
<p>{posts.posts[0].title}</p>
</div>);
}
export interface PostPageProps {
params: PostPageParams;
}
interface PostPageParams {
slug: string;
text?: string;
}