Tips for preventing duplicate data fetching in Next.js version 13

Question

Tips for preventing duplicate data fetching in Next.js version 13

I am currently in need of retrieving information from the database, generating metadata, and displaying the page content. The current method I am using is as follows:

export const generateMetadata = async ({
  params: { questionSlug },
}: Props): Promise<Metadata> => {
  const sql = await connectToPostgres();

  const question = await findQuestion(sql, questionSlug);

  if (!question) {
    return {};
  }

  return {
    alternates: {
      canonical: `https://ray.run/questions/${question.slug}`,
    },
    title: question.question,
  };
};

const Page = async ({ params: { questionSlug } }: Props) => {
  const sql = await connectToPostgres();

  const question = await findQuestion(sql, questionSlug);

  if (!question) {
    return notFound();
  }

  // ...
};

However, this approach requires querying the database twice to render the same page.

Is there a more efficient way to retrieve data once and utilize it in both functions?

typescript next.js next.js13

Answer 1

Answer №1

It may not be the most visually appealing solution, but the recommended approach is to utilize the cache function:

import { cache } from 'react';

const findQuestionWithCache = cache(async (questionSlug: string) => {
  const sql = await connectToPostgres();

  return await findQuestion(sql, questionSlug);
});

export const generateMetadata = async ({
  params: { questionSlug },
}: Props): Promise<Metadata> => {
  const question = await findQuestionWithCache(questionSlug);

  if (!question) {
    return notFound();
  }

  return {
    alternates: {
      canonical: `https://ray.run/questions/${question.slug}`,
    },
    title: question.question,
  };
};

const Page = async ({ params: { questionSlug } }: Props) => {
  const question = await findQuestionWithCache(questionSlug);

  if (!question) {
    return notFound();
  }

  // ...
};

The findQuestionWithCache function will only be executed once per request.

One drawback of this method is that the cache wrapped function cannot be used outside of React/Next.js. If you need to use the same function elsewhere in your codebase, you'll have to wrap it locally like demonstrated in the example above. However, if you're only using this function within your React.js code, you can simply wrap the original implementation without any additional steps.

Answer 2

It may not be the most visually appealing solution, but the recommended approach is to utilize the cache function:

import { cache } from 'react';

const findQuestionWithCache = cache(async (questionSlug: string) => {
  const sql = await connectToPostgres();

  return await findQuestion(sql, questionSlug);
});

export const generateMetadata = async ({
  params: { questionSlug },
}: Props): Promise<Metadata> => {
  const question = await findQuestionWithCache(questionSlug);

  if (!question) {
    return notFound();
  }

  return {
    alternates: {
      canonical: `https://ray.run/questions/${question.slug}`,
    },
    title: question.question,
  };
};

const Page = async ({ params: { questionSlug } }: Props) => {
  const question = await findQuestionWithCache(questionSlug);

  if (!question) {
    return notFound();
  }

  // ...
};

The findQuestionWithCache function will only be executed once per request.

One drawback of this method is that the cache wrapped function cannot be used outside of React/Next.js. If you need to use the same function elsewhere in your codebase, you'll have to wrap it locally like demonstrated in the example above. However, if you're only using this function within your React.js code, you can simply wrap the original implementation without any additional steps.

Answer 3

Answer №2

When it comes to Next.js, fetch requests for generateMetadata are deduplicated, but there might be some uncertainties regarding your database connection. Explore the helpful information section for more details.

Answer 4

When it comes to Next.js, fetch requests for generateMetadata are deduplicated, but there might be some uncertainties regarding your database connection. Explore the helpful information section for more details.

Answer 5

Answer №3

Here's a suggested approach: Embed the cache object at the top.


let cache = {};

export const generateMetadata = async ({
  params: { questionSlug },
}: Props): Promise<Metadata> => {
// Utilize this conditional statement to retrieve data from cache instead of making a server request.
if (cache) return cache;
  const sql = await connectToPostgres();

  const question = await findQuestion(sql, questionSlug);

  if (!question) {
    return {};
  }
  cache = question;
  return {
    alternates: {
      canonical: `https://ray.run/questions/${question.slug}`,
    },
    title: question.question,
  };
};

const Page = async ({ params: { questionSlug } }: Props) => {
  
  if (!cache) {
    await connectToPostgres();
    
    const question = await findQuestion(sql, questionSlug);
    if (!question) return notFound();
  }
  
  const response = cache;

  // ... utilize the response variable as cached data.
};

Answer 6

Here's a suggested approach: Embed the cache object at the top.


let cache = {};

export const generateMetadata = async ({
  params: { questionSlug },
}: Props): Promise<Metadata> => {
// Utilize this conditional statement to retrieve data from cache instead of making a server request.
if (cache) return cache;
  const sql = await connectToPostgres();

  const question = await findQuestion(sql, questionSlug);

  if (!question) {
    return {};
  }
  cache = question;
  return {
    alternates: {
      canonical: `https://ray.run/questions/${question.slug}`,
    },
    title: question.question,
  };
};

const Page = async ({ params: { questionSlug } }: Props) => {
  
  if (!cache) {
    await connectToPostgres();
    
    const question = await findQuestion(sql, questionSlug);
    if (!question) return notFound();
  }
  
  const response = cache;

  // ... utilize the response variable as cached data.
};

Tips for preventing duplicate data fetching in Next.js version 13

Answer №1

Answer №2

Answer №3

Similar questions

Angular 16 routing not loading content

Custom server not required for optional dynamic routes in NextJS version 9.5.2

What is the best way to switch a boolean state in React using TypeScript?

What are the steps to ensure a successful deeplink integration on iOS with Ionic?

Do you need to incorporate 'next-redux-wrapper' into a 'Next.js + Redux Toolkit' project if you are solely using 'static generation'?

When running jest unit tests, an error is thrown stating that includes() and toLowerCase are not functions

Angular 1.5 Karma unit test causes duplicate loading of ng-mock library

Oh no! It seems like the build script is missing in the NPM

Nested HTTP requests in Angular using RxJS: Triggering component update after completion of the first HTTP request

Is there a way to prevent IntelliJ from creating .js files when working with .ts source code?

Combining Axios with repeated promises

Oops! Looks like there's an unexpected error with the module 'AppRoutingModule' that was declared in the 'AppModule'. Make sure to add a @Pipe/@Directive/@Component annotation

Error in Directive: NgControl Provider Not Found

Instructions for creating a function that can receive an array of objects containing a particular data type for the value associated with the key K

Tips for avoiding a form reload on onSubmit during unit testing with jasmine

When trying to access the "form" property of a form ElementRef, TypeScript throws an error

Is there a way to determine the specific child property types of a custom Generic type extension?

Steps to configure Visual Studio Code to automatically open the original TypeScript file located in the "src" folder when a breakpoint is hit in a Node.js application

Unit testing the error function within the subscribe method in Angular

Certain Material-UI components appear to lack proper styling