How to make a pseudo "fetch" request dynamic on nextjs? | Next.js | Page 1

finite venture May 21, 2024, 7:18 PM

#

My page gets the result of the database from GetQuizzes() but it is not using fetch, it is directly getting the data from my mongoose model collection.

So when I first load the page it gets all the quizzes in my page, but when I refresh and if there are new quizzes, it doesn't get them, so it has cached the data already right?
How to make my pseudo fetch dynamic?

"use server";
import Home from "./Home";
import { getQuizzes } from "./actions/QuizzActions";

export default async function HomePage() {

const quizzes = await getQuizzes();

return <Home quizzes={quizzes}/>;
}

export async function getQuizzes() {
try {
await connect();
const res = await Quizz.find();
return JSON.parse(JSON.stringify(res));
} catch (err) {
console.log("error fetching the quizzes : ", err);
return [];
}
}

grand forgeBOT May 21, 2024, 7:18 PM

#

Hi @finite venture. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

In your case, you're directly fetching data from your database using a function getQuizzes(). This is not a fetch request, but a direct database query. However, you can still control the caching and revalidating behavior of these requests using Next.js's Route Segment Config Option and React's cache function.

To make your data fetching dynamic, you can use the unstable_cache API provided by Next.js. This API is experimental and allows you to control the caching behavior of your data fetching. However, please note that this API is experimental and may change in future versions of Next.js.

Here's an example of how you can use the unstable_cache API:

import { unstable_cache } from 'next/data-client'

export async function getQuizzes() {
  try {
    await connect();
    const res = await Quizz.find();
    unstable_cache('no-store'); // This will make the data fetching dynamic
    return JSON.parse(JSON.stringify(res));
  } catch (err) {
    console.log("error fetching the quizzes : ", err);
    return [];
  }
}

In this example, unstable_cache('no-store') will make the data fetching dynamic, meaning it will fetch new data on every request.

Please note that this is an experimental feature and may not be suitable for production use. For more information, you can refer to the Next.js documentation (https://nextjs.org/docs/app/api-reference/functions/unstable_cache).

#

Also, remember that the caching behavior will depend on whether the route segment is statically or dynamically rendered. If the segment is static (default), the output of the request will be cached and revalidated as part of the route segment. If the segment is dynamic, the output of the request will not be cached and will be re-fetched on every request when the segment is rendered. You can read more about this in the Next.js documentation (https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching-data-on-the-server-with-third-party-libraries).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@finite venture kapa.ai is still learning and improving, please let us know how it did by reacting below

finite venture May 21, 2024, 7:28 PM

#

Ok so note that my page is rendered statically by the server, so when i'm in development mode (i start the project with npm run dev) the issue is not present, but in production mode the issue is here.

how to make my page dynamic using something else than unstable_cache api

#

@grand forge Ok so note that my page is rendered statically by the server, so when i'm in development mode (i start the project with npm run dev) the issue is not present, but in production mode the issue is here.

how to make my page dynamic using something else than unstable_cache api

grand forgeBOT May 21, 2024, 7:28 PM

#

Let me check the knowledge base for you. One moment! :books:

#

In Next.js, you can control the rendering strategy of your page using the dynamic route segment option. This option allows you to specify whether the page should be rendered statically or dynamically.

To make your page dynamic, you can set the dynamic route segment option to 'force-dynamic'. This will force the page to be rendered dynamically, meaning it will fetch new data on every request.

Here's an example of how you can use the dynamic route segment option:

export const dynamic = 'force-dynamic';

export default async function HomePage() {
  
  const quizzes = await getQuizzes();

  return <Home quizzes={quizzes}/>;
}

In this example, export const dynamic = 'force-dynamic'; will make the page dynamic, meaning it will fetch new data on every request.

Please note that this will make the page dynamic, but it will not control the caching behavior of your data fetching. If you want to control the caching behavior of your data fetching, you will need to use the unstable_cache API or a similar feature.

For more information, you can refer to the Next.js documentation (https://vercel.com/docs/workflow-collaboration/conformance/rules/NEXTJS_REQUIRE_EXPLICIT_DYNAMIC).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@finite venture kapa.ai is still learning and improving, please let us know how it did by reacting below

finite venture May 21, 2024, 7:30 PM

#

@grand forge Only async functions are allowed to be exported in a "use server" file.

I got now this error

grand forgeBOT May 21, 2024, 7:30 PM

#

Let me check the knowledge base for you. One moment! :books:

#

The error message you're seeing is related to how Next.js handles files marked with the "use server" directive. In such files, only async functions can be exported. This is because these functions are intended to be used as server actions, which are expected to be asynchronous.

Here's an example of how you can define an async function in a "use server" file:

"use server";

export async function getQuizzes() {
  try {
    await connect();
    const res = await Quizz.find();
    return JSON.parse(JSON.stringify(res));
  } catch (err) {
    console.log("error fetching the quizzes : ", err);
    return [];
  }
}

In this example, getQuizzes is an async function that fetches data from a database. Because it's marked with the async keyword, it returns a Promise, which is what Next.js expects for server actions.

If you're seeing this error, it means you're trying to export a non-async function from a "use server" file. To fix the error, you should update your function to be async.

For more information, you can refer to these GitHub issues where similar problems were discussed: Issue 62926 (https://github.com/vercel/next.js/issues/62926), Issue 49378 (https://github.com/vercel/next.js/issues/49378).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@finite venture kapa.ai is still learning and improving, please let us know how it did by reacting below

finite venture May 21, 2024, 7:32 PM

#

@grand forge Yes but the "export const dynamic = 'force-dynamic';" too has to be async, it says

grand forgeBOT May 21, 2024, 7:32 PM

#

Let me check the knowledge base for you. One moment! :books:

#

I apologize for the confusion. The export const dynamic = 'force-dynamic'; statement doesn't need to be asynchronous. It's a constant declaration, not a function, so it doesn't have to be async.

The error you're seeing might be due to something else in your code. If you're still having trouble, could you please provide more details about the error message and the context in which it's occurring? That would help me give you a more accurate answer.

For more information about the `dynamic` route segment option, you can refer to the Next.js documentation (https://vercel.com/docs/workflow-collaboration/conformance/rules/NEXTJS_REQUIRE_EXPLICIT_DYNAMIC).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@finite venture kapa.ai is still learning and improving, please let us know how it did by reacting below

finite venture May 21, 2024, 7:33 PM

#

@grand forge Ok thanks, the thing was to delete the "use server" at the top of my page, whereas it was a server component still ! eslint error

grand forgeBOT May 21, 2024, 7:33 PM

#

Let me check the knowledge base for you. One moment! :books:

#

I'm glad you found a solution! Yes, the "use server" directive is used to mark a file or a function as a server action in Next.js. If you're not exporting any server actions from a file, you don't need to include this directive.

In your case, since your page is a server component but doesn't export any server actions, you don't need the "use server" directive. Removing it, as you did, is the correct solution.

For more information about the `"use server"` directive and server actions in Next.js, you can refer to these GitHub issues where similar topics were discussed: Issue 55154 (https://github.com/vercel/next.js/issues/55154), Issue 50550 (https://github.com/vercel/next.js/issues/50550), Issue 59890 (https://github.com/vercel/next.js/issues/59890), Issue 60045 (https://github.com/vercel/next.js/issues/60045), Issue 53065 (https://github.com/vercel/next.js/issues/53065), Issue 49557 (https://github.com/vercel/next.js/issues/49557), Issue 49378 (https://github.com/vercel/next.js/issues/49378).

#How to make a pseudo "fetch" request dynamic on nextjs?

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

For more information, you can refer to the Next.js documentation (https://vercel.com/docs/workflow-collaboration/conformance/rules/NEXTJS_REQUIRE_EXPLICIT_DYNAMIC).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

For more information, you can refer to these GitHub issues where similar problems were discussed: Issue 62926 (https://github.com/vercel/next.js/issues/62926), Issue 49378 (https://github.com/vercel/next.js/issues/49378).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

For more information about the dynamic route segment option, you can refer to the Next.js documentation (https://vercel.com/docs/workflow-collaboration/conformance/rules/NEXTJS_REQUIRE_EXPLICIT_DYNAMIC).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

For more information about the `dynamic` route segment option, you can refer to the Next.js documentation (https://vercel.com/docs/workflow-collaboration/conformance/rules/NEXTJS_REQUIRE_EXPLICIT_DYNAMIC).