when calling a server action on a server component, is this treated as a server action or just a regular function? I have a function which fetches an external API, and as next.js states, fetch cache doesn't work when used in a server action, so im wondering if calling this function has the same effect or not
#is server actions a regular function in server components
flat cedar
midnight spireBOT
Hi @flat cedar. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Server actions in Next.js are asynchronous functions that are executed on the server. They can be used in both Server and Client Components to handle form submissions and data mutations in Next.js applications. They are not regular functions, but rather special functions that can be invoked from event handlers, useEffect, third-party libraries, and other form elements like <button>. They use the POST method, and only this HTTP method can invoke them. The arguments and return value of Server Actions must be serializable by React[^1^].
A Server Action can be defined with the React "use server" directive. You can place the directive at the top of an async function to mark the function as a Server Action[^2^].
If you call a server action from a server component, it will be treated as a server action, not a regular function. This is because server actions are server-only functions you can pass to client components. When these functions are called they generate an rpc call towards your server which then responds with the return from your server action function[^3^].
As for the fetch cache, it's worth noting that using React.cache together with Server Actions will not cache anything[^7^]. Also, it seems that it is impossible to keep cached versions of fetches on a page using a server action[^8^].
^1^]: [Next.js Docs - Server Actions and Mutations - Behavior (https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#behavior)
^2^]: [Next.js Docs - Server Actions and Mutations - Convention (https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#convention)
^3^]: [Github Issue Comment (https://github.com/vercel/next.js/issues/62800)
^7^]: [Github Issue Comment (https://github.com/vercel/next.js/issues/62926)
^8^]: [Github Issue Comment (https://github.com/vercel/next.js/issues/61542)
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
flat cedar
@midnight spire how can i make an asynchronous function which i call on the server and it isnt a server action so that i can cache the data from the fetch
midnight spireBOT
Let me check the knowledge base for you again. Give me one moment! :books:
You can create an asynchronous function in your server component and use the fetch API to fetch data from an external source. The response from fetch will be automatically cached by Next.js. Here's an example:
// This function can be named anything
async function getData() {
const res = await fetch('<https://api.example.com',> { cache: 'force-cache' })
const data = await res.json()
return data
}
export default async function Page() {
const data = await getData()
return <div>{/* Render your data here */}</div>
}
In this example, the getData function is not a server action, but a regular asynchronous function that fetches data from an external API[^4^]. The fetch function is extended by Next.js to allow each request on the server to set its own persistent caching semantics[^2^]. By setting the cache option to 'force-cache', the fetched data will be cached until manually invalidated[^2^].
If you want to ensure that the data fetching only happens on the server, you can use the server-only package[^1^]. This package ensures that server data fetching functions are never used on the client[^1^].
Please note that the cache option in the fetch function indicates how a server-side fetch request will interact with the framework's persistent HTTP cache[^2^].
^1^]: [Next.js Docs - Using React cache and server-only with the Preload Pattern (https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#using-react-cache-and-server-only-with-the-preload-pattern)
^2^]: [Next.js Docs - Fetch (https://nextjs.org/docs/app/api-reference/functions/fetch)
^4^]: [Next.js Docs - Fetching Data on the Server with fetch (https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching-data-on-the-server-with-fetch)
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
midnight spireBOT
Let me check the knowledge base for you again. Give me one moment! :books:
The function getData in the provided example is not a server action because it does not have the "use server" directive at the top of the function. In Next.js, a server action is specifically marked with the "use server" directive at the top of an async function[^2^].
Here's an example of a server action:
export default function Page() {
async function create() {
'use server'
// ...
}
return (
// ...
)
}
In this example, the create function is a server action because it has the 'use server' directive at the top of the function body[^2^].
Server actions in Next.js are special functions that are executed on the server and can be invoked from event handlers, useEffect, third-party libraries, and other form elements like <button>. They use the POST method, and only this HTTP method can invoke them[^1^].