what is going on under the hood
#next 14. server action
ashen quartz
sharp galeBOT
Hi @ashen quartz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Next.js 14 introduced a new feature called Server Actions. This feature allows you to define server-side functions that can be called directly from your client-side code. However, there have been several issues reported with this feature.
One issue is that server actions are not transforming or working correctly in Next.js 14.1.1. The problem seems to be related to the server action not being able to correctly identify and handle variables. This results in server console errors when the action is called from a page (source (https://github.com/vercel/next.js/issues/63603)).
Another issue is related to webpack. In Next.js 14.0.0, server actions seem to have problems when webpack is importing certain libraries. This issue was reported to be fixed in version 14.0.2-canary.11, but some users still experienced problems (source (https://github.com/vercel/next.js/issues/57622)).
There's also an issue with server actions being executed on the client when they are imported from an external package. This is contrary to the expected behavior, as server actions should be executed on the server (source (https://github.com/vercel/next.js/issues/61318)).
Lastly, there's a reported issue where the redirect() function inside a server action can't switch between root layouts in Next.js 14, even though this was working in Next.js 13 (source (https://github.com/vercel/next.js/issues/58263)).
These issues highlight some of the complexities and challenges that come with the new Server Actions feature in Next.js 14. The Next.js team and community are actively working on resolving these issues to improve the functionality and reliability of Server Actions.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
ashen quartz
is behaviour of server action fully dependant on bundler, in case of next on webpack?
is behaviour of server action fully dependant on bundler, in case of next on webpack?
@sharp gale is behaviour of server action fully dependant on bundler, in case of next on webpack?
sharp galeBOT
Let me check the knowledge base for you. One moment! :books:
Yes, the behavior of server actions in Next.js can be influenced by the bundler, which in this case is webpack. This is because the bundler is responsible for transforming and bundling your code, and this process can affect how server actions are handled.
For instance, one of the issues reported with server actions in Next.js 14.0.0 was related to webpack. Users reported problems when webpack was importing certain libraries in the context of server actions. This issue was later addressed in a canary release of Next.js (source (https://github.com/vercel/next.js/issues/57622)).
However, it's important to note that not all issues with server actions are related to the bundler. Some issues can be due to the way server actions are implemented in Next.js itself, or how they are used in your code. Therefore, while the bundler can influence the behavior of server actions, it's not the only factor.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
ashen quartz
@sharp gale are server actions executed sequentially even if they are called from different clients?
sharp galeBOT
Let me check the knowledge base for you. One moment! :books:
Based on the information provided in the knowledge sources, it appears that server actions in Next.js are executed sequentially, even when they are called from different clients. This behavior was reported in a GitHub issue, where a user noted that server actions are executed in a sequential fashion and there is no flag or option to allow them to be executed in parallel (source (https://github.com/vercel/next.js/issues/69265)).
This means that if multiple clients send requests to a server action at the same time, the server action will handle these requests one at a time, in the order they were received. This can potentially cause delays if a server action takes a long time to complete, as subsequent requests will have to wait for the previous ones to finish.
However, it's important to note that this behavior might not be ideal for all use cases, and it's possible that future versions of Next.js might introduce options to control the execution of server actions.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
ashen quartz
@sharp gale if i have a POST route handler how can i call server action sequentially?
sharp galeBOT
Let me check the knowledge base for you. One moment! :books:
To call server actions sequentially in a POST route handler, you would typically use async/await syntax in JavaScript. This allows you to wait for one server action to complete before starting the next one.
However, the knowledge sources provided do not include specific examples of how to do this in Next.js. The behavior of server actions being executed sequentially is mentioned in a GitHub issue (source (https://github.com/vercel/next.js/issues/69265)), but no code examples are provided.
Here's a general example of how you might do this in JavaScript:
async function handlePostRequest(req, res) {
// Call the first server action and wait for it to complete
await firstServerAction(req.body);
// Call the second server action and wait for it to complete
await secondServerAction(req.body);
// Send a response back to the client
res.status(200).json({ message: 'Success' });
}
In this example, firstServerAction and secondServerAction are hypothetical server actions that you would replace with your actual server actions. The await keyword is used to ensure that each server action is completed before the next one starts.
Please note that this is a general JavaScript example and might need to be adapted to fit the specifics of your Next.js application and your server actions.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
ashen quartz
@sharp gale imagine i have doSomeThingAction, doAnotherThingAction, it has a 5sec timer in it, if client calls doSomeThingAction consequently 2 times will second be resolved in ~10 seconds? and i have a post route handler where doAnotherThingAction is called, i want so that when client calls doSomeThingAction 2 times and then makes request to this route, next started processing doAnotherThingAction after 2 doSomeThingActions have finished
sharp galeBOT
Let me check the knowledge base for you. One moment! :books:
Based on the information provided in the knowledge sources, it appears that server actions in Next.js are executed sequentially, even when they are called from the same client (source (https://github.com/vercel/next.js/issues/69265)). This means that if a client calls doSomeThingAction twice in a row, the second call will not start until the first one has completed. If doSomeThingAction has a 5-second timer in it, the total time for the two calls would be approximately 10 seconds.
As for your second question, if you want to ensure that doAnotherThingAction is only called after two doSomeThingAction calls have finished, you would need to implement some form of synchronization in your code. However, the knowledge sources do not provide specific information on how to do this in Next.js.
In general, you might handle this by storing some state in your server that tracks whether the two doSomeThingAction calls have completed, and then check this state in your POST route handler before calling doAnotherThingAction. But please note that this approach would depend on the specifics of your application and might need to be adapted accordingly.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
ashen quartz
@sharp gale how many instances is run by npm start?
sharp galeBOT
Let me check the knowledge base for you. One moment! :books:
When you run npm start for a Next.js application, it starts a single instance of the Next.js server. This server can handle multiple incoming requests concurrently, but it is still a single process running on your machine (source (https://vercel.com/guides/npm-run-start-not-working)).
If you want to run multiple instances of your Next.js application (for example, on different ports), you would need to start each one separately. However, please note that running multiple instances of the same Next.js application on the same machine can lead to issues, such as port conflicts.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
ashen quartz
@sharp gale if i run multimple next server instances do they have same cache?
sharp galeBOT
Let me check the knowledge base for you. One moment! :books:
By default, each instance of a Next.js server maintains its own cache. This means that if you're running multiple instances of your Next.js application (for example, in a containerized environment like Kubernetes), each instance will have its own separate cache. This can potentially lead to issues with data consistency, as the cache is not shared between instances by default (source (https://nextjs.org/docs/pages/building-your-application/deploying#configuring-caching)).
However, you can configure Next.js to use a shared cache across multiple instances. This involves providing a custom cache handler in your next.config.js file. Here's an example:
module.exports = {
cacheHandler: require.resolve('./cache-handler.js'),
cacheMaxMemorySize: 0, // disable default in-memory caching
}
And then creating a cache-handler.js file in the root of your project:
const cache = new Map()
module.exports = class CacheHandler {
constructor(options) {
this.options = options
}
async get(key) {
// This could be stored anywhere, like durable storage
return cache.get(key)
}
async set(key, data, ctx) {
// This could be stored anywhere, like durable storage
cache.set(key, {
value: data,
lastModified: Date.now(),
tags: ctx.tags,
})
}
async revalidateTag(tag) {
// Iterate over all entries in the cache
for (let [key, value] of cache) {
// If the value's tags include the specified tag, delete this entry
if (value.tags.includes(tag)) {
cache.delete(key)
}
}
}
}
This custom cache handler can be configured to use a shared storage system (like Redis or AWS S3), allowing the cache to be shared across multiple instances of your Next.js application (source (https://nextjs.org/docs/pages/building-your-application/deploying#configuring-caching)).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
ashen quartz
@sharp gale what is incremental cache in next sources?
sharp galeBOT
Let me check the knowledge base for you. One moment! :books:
The term "Incremental Cache" does not appear in the provided knowledge sources. However, there is a concept in Next.js called "Incremental Static Regeneration" (ISR) which involves caching.
Incremental Static Regeneration allows you to update static content after you have built your Next.js application. When a request is made to a page that was pre-rendered at build time, the page is served from a cache. If the page has been marked for revalidation and the revalidation period has passed, Next.js will regenerate the page in the background while the stale (cached) page is served to the client. Once the page has been regenerated, the cache is updated and all future requests will be served the new version of the page until it's revalidated again (source (https://nextjs.org/docs/app/building-your-application/data-fetching/incremental-static-regeneration)).
The cache used in ISR is shared and by default, it is stored to the filesystem (on disk) on your Next.js server. This works automatically when self-hosting using both the Pages and App Router. You can configure the Next.js cache location if you want to persist cached pages and data to durable storage, or share the cache across multiple containers or instances of your Next.js application (source (https://nextjs.org/docs/app/building-your-application/deploying#caching-and-isr)).
If you're referring to a different concept or feature in Next.js, could you please provide more context or details?
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
ashen quartz
@sharp gale how many workers does next use
sharp galeBOT
Let me check the knowledge base for you. One moment! :books:
The number of workers that Next.js uses can depend on the specific configuration and usage of your application.
In the context of the worker strategy for the <Script> component, scripts that use the worker strategy are off-loaded to a web worker. This is an advanced use case and it's not guaranteed to support all third-party scripts. To use worker as a strategy, the nextScriptWorkers flag must be enabled in next.config.js (source (https://nextjs.org/docs/app/api-reference/components/script#worker)).
However, it's important to note that there was an issue reported where connections to workers started by the main Next.js server started to fail after 7-10s, and the server became unresponsive. This issue was reported to be resolved in Next.js 13.4.20-canary.28, which no longer uses child processes with jest-worker to run separate app and pages router (source (https://github.com/vercel/next.js/issues/50586)).
If you're referring to a different type of worker or a specific feature in Next.js, could you please provide more context or details?
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
ashen quartz
@sharp gale is register function inside instrumentation.ts guaranteed to be run once?
sharp galeBOT
Let me check the knowledge base for you. One moment! :books:
According to the Next.js documentation, the register function exported from instrumentation.ts is supposed to be called once when a new Next.js server instance is initiated (source (https://nextjs.org/docs/app/api-reference/file-conventions/instrumentation#exports)).
However, there have been reported issues where the register function is called multiple times or not called at all until a request is received. These issues were reported in the context of both standalone mode and normal operation (source (https://github.com/vercel/next.js/issues/49897), source (https://github.com/vercel/next.js/issues/51450), source (https://github.com/vercel/next.js/issues/59999)).
In some cases, users have reported that the register function is called more than once, even when the documentation states that it should be called exactly once in each environment. In other cases, the register function is not called until a request is received, which is not the expected behavior according to the documentation.
As a workaround, some users have suggested creating a flag variable in instrumentation.ts and checking if the register function has been called (source (https://github.com/vercel/next.js/issues/49897)):
let isHookRegisteredInNode = false;
let isHookRegisteredInEdge = false;
export async function register() {
if (process.env.NEXT_RUNTIME === 'nodejs' && isHookRegisteredInNode === false) {
// to do something...
isHookRegisteredInNode = true;
}
if (process.env.NEXT_RUNTIME === 'edge' && isHookRegisteredInEdge === false) {
// to do something...
isHookRegisteredInEdge = true;
}
}
This way, the register function will be called only once per environment on the first request. And when the bug is fixed, the code will still work.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
ashen quartz
<@&1089670008898080870> page doesn't call fetch or unstable_cache to get data, this page has button which onClick calls server action which calls revalidateTag, is page reloaded?