prevent unnecessary duplicate database queries for generating metadata in the upcoming 13 or 14 instances

Question

prevent unnecessary duplicate database queries for generating metadata in the upcoming 13 or 14 instances

In the latest updates, version 13 and 14 of Next introduced the usage of the generateMetadata function as the preferred method to define all page metadata.

However, a drawback of this approach is that because of the separation of logic, fetching data based on backend fields now requires making two separate calls instead of just one.

Let's look at the example below in the file page.tsx:

export default async function ProfilePage(props){
    try{
        const profile = await prisma.users.findUnique({
            // ... fetch user data
        });

        return <div>Profile page</div>;
    } catch(err){
        notFound();
    }
}

export async function generateMetadata(params){
    const profile = await prisma.users.findUnique({
        // ... fetch user data
    });

    return {
        title: `${profile.name}'s Profile`,
    };
}

This leads to redundant data fetching, meaning I have to retrieve the same information twice.

Is there a way to achieve the same outcome without having to duplicate the fetch process? Instead of resorting to using document.title, which can result in a disruptive experience when applied to nested pages. How should I go about resolving this issue?

javascript next.js

Answer 1

Answer №1

One challenge with this approach is that when the logic is separated, data obtained from backend fields necessitates two calls instead of one.

Resolution :

To address this issue, place your await prisma.users.findUnique within an asynchronous function enclosed in the cache() function provided by react on that specific page & return the data from there. Then simply invoke that function using const profile = await Function(). By caching the function and calling it twice on the same page, NextJS prevents duplicate calls.

Sample Code Structure :

projectName
├── src
│   └── app
│       ├── api
│       ├── favicon.ico
│       ├── globals.css
│       ├── layout.js
│       └── user
│           ├── page.js
│           └── [id]
│               └── page.js
└── tailwind.config.js

Explanation :

There exists a page called /user which displays all users, and upon clicking on a user, it directs you to the details page /user/user_id where server-side metadata is generated and user data is set on the page through an API call.
Two different calls are made, one employing caching while the other is commented out. Uncomment each one separately to observe the outcomes.

Users Page projectName\src\app\user\page.js (this page solely retrieves user list) :

import Link from "next/link";

const AllUsers = async () => {
    let tmp = await fetch('https://dummyjson.com/users')
    let data = await tmp.json()
    return data.users
}

export default async function Page() {

    let AllUserData = await AllUsers();
    return (
        <div>
            <h1>Users Page</h1>
            <ol>
                {
                    AllUserData.map((u, i) => (
                        <li key={i}>
                            <Link href={'/user/' + u.id}> {u.firstName}</Link>
                        </li>
                    ))
                }
            </ol>
        </div>
    )
}

export async function generateMetadata() {

    let UserDetails = await AllUsers()
    return {
        title: UserDetails.length.toString() + " Users",
    };
}

User details page

projectName\src\app\user\[id]\page.js

:

import React from 'react'
import { cache } from 'react'

const GetUserByID = cache(async (ID) => {
    console.log(ID);
    // VISIBLE IN TERMINAL
    console.log("GetUserByID HIT (cached) : ", new Date().toLocaleTimeString());
    let tmp = await fetch('https://dummyjson.com/user/' + ID)
    let data = await tmp.json()
    return data

})


// TO RUN BELOW CODE & COMMENT THE ABOVE CODE
// WITHOUT ANY CACHING , THIS CODE RUNS TWICE


// const GetUserByID = async (ID) => {
//     console.log(ID);
//     console.log("GetUserByID HIT : ", new Date().toLocaleTimeString());
//   // VISIBLE IN TERMINAL

//     let tmp = await fetch('https://dummyjson.com/user/' + ID)
//     let data = await tmp.json()
//     return data
// }

export async function generateMetadata({ params }) {

    let UserDetails = await GetUserByID(params.id)
    return {
        title: UserDetails.firstName + " " + UserDetails.lastName,
    };
}

const UserDetailsPage = async ({ params }) => {
    let UserDetails = await GetUserByID(params.id)
    return (
        <div>
            <h1>UserDetailsPage </h1>
            <p>ID Received from params :{params.id} </p>
            <hr />
            <p>ID from data : {UserDetails.id}</p>
            <p>FirstName : {UserDetails.firstName}</p>
            <p>LastName : {UserDetails.lastName}</p>
            <p>Age : {UserDetails.age}</p>
            <p>Birth Day : {UserDetails.birthDate}</p>
        </div>
    )
}

export default UserDetailsPage

Output :

Access http://localhost:3000/user, where the metadata title reflects the number of users determined from API data. It provides user links – click to view individual user details, involving 2 API calls, one utilizing cache and the other not.
On the details page at
```
http://localhost:3000/user/user_id
```
, you will notice that the cached API call wrapped in cache executes only once in the terminal, while the uncommented code runs twice.

Please Refer To :

Data Fetching, Caching, and Revalidating : https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating
Caching in Next.js : https://nextjs.org/docs/app/building-your-application/caching
Cache function : https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#example
Caching Data : https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#caching-data
cache : https://react.dev/reference/react/cache

If you still have any doubts, feel free to comment (I will update the answer if required)

Answer 2

One challenge with this approach is that when the logic is separated, data obtained from backend fields necessitates two calls instead of one.

Resolution :

To address this issue, place your await prisma.users.findUnique within an asynchronous function enclosed in the cache() function provided by react on that specific page & return the data from there. Then simply invoke that function using const profile = await Function(). By caching the function and calling it twice on the same page, NextJS prevents duplicate calls.

Sample Code Structure :

projectName
├── src
│   └── app
│       ├── api
│       ├── favicon.ico
│       ├── globals.css
│       ├── layout.js
│       └── user
│           ├── page.js
│           └── [id]
│               └── page.js
└── tailwind.config.js

Explanation :

There exists a page called /user which displays all users, and upon clicking on a user, it directs you to the details page /user/user_id where server-side metadata is generated and user data is set on the page through an API call.
Two different calls are made, one employing caching while the other is commented out. Uncomment each one separately to observe the outcomes.

Users Page projectName\src\app\user\page.js (this page solely retrieves user list) :

import Link from "next/link";

const AllUsers = async () => {
    let tmp = await fetch('https://dummyjson.com/users')
    let data = await tmp.json()
    return data.users
}

export default async function Page() {

    let AllUserData = await AllUsers();
    return (
        <div>
            <h1>Users Page</h1>
            <ol>
                {
                    AllUserData.map((u, i) => (
                        <li key={i}>
                            <Link href={'/user/' + u.id}> {u.firstName}</Link>
                        </li>
                    ))
                }
            </ol>
        </div>
    )
}

export async function generateMetadata() {

    let UserDetails = await AllUsers()
    return {
        title: UserDetails.length.toString() + " Users",
    };
}

User details page

projectName\src\app\user\[id]\page.js

:

import React from 'react'
import { cache } from 'react'

const GetUserByID = cache(async (ID) => {
    console.log(ID);
    // VISIBLE IN TERMINAL
    console.log("GetUserByID HIT (cached) : ", new Date().toLocaleTimeString());
    let tmp = await fetch('https://dummyjson.com/user/' + ID)
    let data = await tmp.json()
    return data

})


// TO RUN BELOW CODE & COMMENT THE ABOVE CODE
// WITHOUT ANY CACHING , THIS CODE RUNS TWICE


// const GetUserByID = async (ID) => {
//     console.log(ID);
//     console.log("GetUserByID HIT : ", new Date().toLocaleTimeString());
//   // VISIBLE IN TERMINAL

//     let tmp = await fetch('https://dummyjson.com/user/' + ID)
//     let data = await tmp.json()
//     return data
// }

export async function generateMetadata({ params }) {

    let UserDetails = await GetUserByID(params.id)
    return {
        title: UserDetails.firstName + " " + UserDetails.lastName,
    };
}

const UserDetailsPage = async ({ params }) => {
    let UserDetails = await GetUserByID(params.id)
    return (
        <div>
            <h1>UserDetailsPage </h1>
            <p>ID Received from params :{params.id} </p>
            <hr />
            <p>ID from data : {UserDetails.id}</p>
            <p>FirstName : {UserDetails.firstName}</p>
            <p>LastName : {UserDetails.lastName}</p>
            <p>Age : {UserDetails.age}</p>
            <p>Birth Day : {UserDetails.birthDate}</p>
        </div>
    )
}

export default UserDetailsPage

Output :

Access http://localhost:3000/user, where the metadata title reflects the number of users determined from API data. It provides user links – click to view individual user details, involving 2 API calls, one utilizing cache and the other not.
On the details page at
```
http://localhost:3000/user/user_id
```
, you will notice that the cached API call wrapped in cache executes only once in the terminal, while the uncommented code runs twice.

Please Refer To :

Data Fetching, Caching, and Revalidating : https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating
Caching in Next.js : https://nextjs.org/docs/app/building-your-application/caching
Cache function : https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#example
Caching Data : https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#caching-data
cache : https://react.dev/reference/react/cache

If you still have any doubts, feel free to comment (I will update the answer if required)

prevent unnecessary duplicate database queries for generating metadata in the upcoming 13 or 14 instances

Answer №1

Similar questions

What is the best way to display only li elements that possess a specific class utilizing javascript / jquery?

Struggling to understand the javascript snippet "requiring the passport file and passing in passport as a parameter."

Can icons with an external path be utilized as a src in the manifest.json file within an Angular application?

Navigating directories and file locations in a Node/Express application

Issues with ontimeupdate event not triggering in Chrome for HTML5 audio files

The file type stored in Firebase storage is identified as 'octet-stream' rather than the expected 'png/jpg' format

Blank YouTube Popup Modal

encountering a loading issue with angular2-modal in rc1 version

Execute a Vue.js script once all Axios calls have been resolved

Creating dynamic grid data based on various filter criteria using JavaScript (AngularJS)

Unable to access the website's source code

What steps should be taken to activate eslint caching?

Ensure that every route is prefixed with /api

When the user hits the enter key, automatically submit a form without the need for

How can JavaScript be utilized for connecting to CSS files?

Troubleshooting: TailwindCSS issues in Next.js 13 (with app directory)

Strange interaction observed when working with Record<string, unknown> compared to Record<string, any>

How to send parameters to Bootstrap modal using a hyperlink

I am encountering an undefined error with crypto.subtle while working with http://localhost:3000

What is the best way to include an attribute to an object in a knockout observable array and ensure a notification is triggered?