Should server-side functions (not server actions) be not async if it does not contain await despite being server-side and consumed in server components?
#NextJS App Router - Server-Side Functions
proven olive
weary idolBOT
Hi @proven olive. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Based on the knowledge sources provided, I can address your question about server-side functions in Next.js App Router.
In the App Router, server-side functions should be async when used for data fetching in Server Components, even if they don't contain an await statement. This is the recommended pattern shown in the documentation.
According to the migration guide, the App Router uses "a simpler API built on top of fetch() and async React Server Components." The examples consistently show async functions:
export default async function Page() {
const data = await fetch('<https://api.vercel.app/blog'>)
const posts = await data.json()
return (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
)
}
The data fetching documentation also demonstrates this pattern, where Server Components are turned into asynchronous functions to fetch data.
However, it's important to note the distinction between Server Functions (which include Server Actions) and general server-side helper functions. According to the updating data documentation, "A Server Function is an asynchronous function that runs on the server" and must be async.
For regular helper functions that don't need the 'use server' directive and are simply used within Server Components, the async requirement is less strict. But for any function that performs data fetching or is marked with 'use server', it should be async.
In summary: While not strictly required for all server-side code, making your server-side functions async is the recommended pattern in the App Router, especially for data fetching operations.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
proven olive
I mean in a .ts server-side file of numerous exported functions, should those functions be unanimously async or no?
I mean in a .ts server-side file of numerous exported functions, should those functions be unanimously async or no? @weary idol
weary idolBOT
Let me check the knowledge base for you again. Give me one moment! :books:
Based on the knowledge sources provided, no, not all exported functions in a .ts server-side file need to be async - only those that are specifically Server Functions/Server Actions.
The key distinction comes from the 'use server' directive documentation. When you use the 'use server' directive at the top of a file, it designates that file's functions to be executed on the server side, and in that case, all exported functions must be async.
However, there's an important caveat from the GitHub issue discussion: "It's a requirement that only async functions are allowed to be exported and annotated with 'use server'". This means:
- Files with
'use server'directive: All exported functions must be async - Regular server-side utility files without
'use server': Functions don't need to be async unless they perform asynchronous operations
The GitHub issue about enum exports further clarifies this: "This is expected, every exports have to be server function in file with 'use server' directive." Users encountered errors when trying to export non-async items (like enums or synchronous helper functions) from files marked with 'use server'.
In summary:
- If your
.tsfile has'use server'at the top, all exported functions must be async - If it's a regular server-side utility file without
'use server', you can mix async and non-async exported functions as needed - For non-async utilities used in Server Actions files, consider moving them to a separate file without the
'use server'directive