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

Tips on configuring HTTP headers for numerous messages within Node-RED?

Incorporating a feature that displays one show at a time and includes a sliding animation into an

Having trouble retrieving the ID of the clicked element in AngularJS?

Tips for saving and accessing the value of an md-select ng-model in an AngularJS dialog?

Sort an array using another array as the reference in JavaScript

By setting up a keydown event listener, I am unable to inspect HTML elements by using the F-12 key shortcut in Chrome

Steps to resolve the Angular observable error

Can you define the "tab location" in an HTML document using React?

Retrieve data from a URL using Angular 6's HTTP POST method

HTML - Transforming JSON data into a table

Exploring nested arrays of objects and applying value constraints

`Loading CSS files in Node.js with Express``

Button with a Jquery icon design

Navigating views with ReactJS using ES5

Occasionally, the function XMLHttpRequest() performs as expected while other times it may

What could be the reason for the handleOpen and handleClose functions not functioning as expected?

Steps for implementing a reset button in a JavaScript slot machine game

Creating Visuals from Text with ReactJS/NextJS

AngularJS directive facing a callback problem

Challenges Associated with Promises in JavaScript