Optimize Metadata Generation and Page Rendering to Avoid Duplicate API/DB Calls

[SH20RAJ]

Goals

1. Reduce the number of API/DB calls made by Next.js when generating metadata and rendering pages.
2. Improve load times and reduce server load by sharing fetched data between generateMetadata and the page component.
3. Enhance developer experience by providing a unified mechanism for data fetching.

Non-Goals

1. This feature request does not aim to change the existing API or data fetching methods already in use.
2. It does not address client-side data fetching or caching strategies.
3. It does not cover the implementation details of API rate limiting or server-side caching beyond the context of metadata generation and page rendering.

Background

Currently, Next.js makes separate API/DB calls in both the generateMetadata function and the page component. This leads to redundant data fetching, increasing load times and server load. There are no built-in alternatives in Next.js to share data between these functions, forcing developers to implement custom caching or memoization solutions. A built-in solution would streamline the process, improving performance and developer experience.

Proposal

Feature Request: Optimize Metadata Generation and Page Rendering to Avoid Duplicate API/DB Calls

Description

In the current implementation of Next.js, when using the generateMetadata function along with a page component, it often results in duplicate API/DB calls. This occurs because both generateMetadata and the page component make separate requests to fetch the same data, which can lead to increased load times and unnecessary server load.

Example

Consider the following example where we fetch product information:

import { Metadata, ResolvingMetadata } from "next";
import Product from "@/components/Product/product.component";

type Props = {
    params: { ean: string }
}

async function getProduct(ean: string) {
    const res = await fetch(process.env.API_URL + `/v1/products/${ean}`);
    return res.json();
}

export async function generateMetadata({ params: { ean } }: Props, parent: ResolvingMetadata): Promise<Metadata> {
    const product = await getProduct(ean);

    return {
        title: product.name,
    };
}

export default async function Page({ params: { ean } }: Props) {
    const product = await getProduct(ean);

    return <Product product={product} />;
}

In this setup, getProduct is called twice—once in generateMetadata and once in the page component, leading to two separate requests.

Proposed Solution

Introduce a built-in mechanism in Next.js to share data between generateMetadata and the page component, ensuring that the data is fetched only once and reused across both.

Potential API

1. Unified Data Fetching Context:

   • Allow fetching data in a shared context that can be used by both generateMetadata and the page component.

2. Caching Mechanism:

   • Implement a server-side caching mechanism to store the result of the data fetching function, making it accessible to both generateMetadata and the page component without additional requests.

Example Usage

import { Metadata, ResolvingMetadata, getSharedData } from "next";
import Product from "@/components/Product/product.component";

type Props = {
    params: { ean: string }
}

export async function getProduct(ean: string) {
    const res = await fetch(process.env.API_URL + `/v1/products/${ean}`);
    return res.json();
}

export async function generateMetadata({ params: { ean } }: Props, parent: ResolvingMetadata): Promise<Metadata> {
    const product = await getSharedData(() => getProduct(ean));

    return {
        title: product.name,
    };
}

export default async function Page({ params: { ean } }: Props) {
    const product = await getSharedData(() => getProduct(ean));

    return <Product product={product} />;
}

Benefits

• Performance Improvement: Reduces the number of API/DB calls, improving load times and reducing server load.
• Developer Experience: Simplifies the code and improves the developer experience by avoiding redundant code and handling data fetching in a unified manner.

Request for Implementation

We request the Next.js team to consider implementing this feature in a future release to optimize the process of metadata generation and page rendering.

Thank you for your consideration and for the excellent work on Next.js.

[SH20RAJ]

I found same problem as of mine on stackoverflow :- https://stackoverflow.com/questions/77842295/how-to-make-a-single-request-with-next-js-and-generate-metadata