Hi @woven tangle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#Route API does not take dynamic data
subtle crystalBOT
Based on the information provided in the knowledge sources, it seems like your issue might be related to how Next.js handles caching. By default, Next.js caches the rendered result of a route on the server. This applies to statically rendered routes at build time, or during revalidation. This means that the render output is cached across user requests. On subsequent navigations or during prefetching, Next.js will check if the React Server Components Payload is stored in the Router Cache. If so, it will skip sending a new request to the server (source (https://nextjs.org/docs/app/building-your-application/caching#2-nextjs-caching-on-the-server-full-route-cache)).
In your case, it seems like the data fetched by your API route is being cached, and therefore not updated until the server is restarted. One solution suggested in the knowledge sources is to set export const revalidate = 0; in your API route (source (https://github.com/vercel/next.js/issues/43879)). This should force Next.js to revalidate the data at every request, effectively disabling the cache for this route.
Here's how you could modify your code:
"use server";
import prisma from "@/lib/prisma";
import { NextResponse } from "next/server";
export const revalidate = 0;
export const GET = async () => {
const blocksAttr = await getBlocksWithAttributes();
const blocksElem = await getBlocksWithElements();
const response = NextResponse.json({
blocksAttr,
blocksElem,
});
response.headers.set("Access-Control-Allow-Origin", "*");
response.headers.set("Access-Control-Allow-Methods", "*");
response.headers.set("Access-Control-Allow-Headers", "*");
return response;
};
const getBlocksWithAttributes = async () => {
...
};
const getBlocksWithElements = async () => {
...
};
Please note that this solution might increase the load on your server, as it will have to fetch the data at every request. If you find that this is causing performance issues, you might want to consider implementing a different caching strategy.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
Let me check the knowledge base for you. One moment! :books:
If you want the data to be revalidated every 10 seconds, you can set the revalidate option to 10 in your fetch request. This will tell Next.js to keep the fetched data in cache and revalidate it every 10 seconds.
Here's how you can modify your code:
"use server";
import prisma from "@/lib/prisma";
import { NextResponse } from "next/server";
export const GET = async () => {
const blocksAttr = await getBlocksWithAttributes();
const blocksElem = await getBlocksWithElements();
const response = NextResponse.json({
blocksAttr,
blocksElem,
});
response.headers.set("Access-Control-Allow-Origin", "*");
response.headers.set("Access-Control-Allow-Methods", "*");
response.headers.set("Access-Control-Allow-Headers", "*");
return response;
};
const getBlocksWithAttributes = async () => {
const res = await fetch('<https://.../blocksAttr',> { next: { revalidate: 10 } });
const data = await res.json();
return data;
};
const getBlocksWithElements = async () => {
const res = await fetch('<https://.../blocksElem',> { next: { revalidate: 10 } });
const data = await res.json();
return data;
};
In this example, getBlocksWithAttributes and getBlocksWithElements are fetching data from some API endpoints. The next: { revalidate: 10 } option tells Next.js to revalidate the data every 10 seconds (source (https://nextjs.org/docs/app/building-your-application/routing/route-handlers#examples)).