How to load/mutate data in complex applications
Unanswered
Asian black bear posted this in #help-forum
Asian black bearOP
Hello,
I'm working on an application used to configure a complex use case. I have a page made of several configuration components. All the configuration is modelized in a configuration object containing all the sub elements (nested objects or arrays).
I call a server action to load the initial configuration when the page loads (server component). This global configuration is stored in a zustand state that is used in every child component (client components).
When the user edit a specific part, a server action is called to update the related part and the zustand state is updated to reflect the changes.
When running the application, every round-trip of a server action is slow and I can see that the response contains a huge payload (4-9Mb). It seems that all the data is sent back on every action call even if the action returns only a small part of the configuration state.
What is the good way to design this kind of application and which pattern should be used to load the data and mutate/update the data to avoid these huge round trips?
I'm working on an application used to configure a complex use case. I have a page made of several configuration components. All the configuration is modelized in a configuration object containing all the sub elements (nested objects or arrays).
I call a server action to load the initial configuration when the page loads (server component). This global configuration is stored in a zustand state that is used in every child component (client components).
When the user edit a specific part, a server action is called to update the related part and the zustand state is updated to reflect the changes.
When running the application, every round-trip of a server action is slow and I can see that the response contains a huge payload (4-9Mb). It seems that all the data is sent back on every action call even if the action returns only a small part of the configuration state.
What is the good way to design this kind of application and which pattern should be used to load the data and mutate/update the data to avoid these huge round trips?
16 Replies
Asian black bearOP
up
Asian black bearOP
up
Asian black bearOP
up
@gin 9mb of data or the whole response body
Asian black bearOP
An example with a 6mb response payload
what are u sending thats its so big?
Asian black bearOP
A lot of configuration data displayed in several components so the user can edit any part of the config
@Asian black bear A lot of configuration data displayed in several components so the user can edit any part of the config
so your configuration data is 6mb?
i dont believe that
Asian black bearOP
When a server action is called, it makes a POST request to server-action-reducer.js with the action parameters but the reponse seems to contains the whole page data for rendering, with all the data loaded by the server components.
Here is the first lines of the response as a sample
Here is the first lines of the response as a sample
So, as my page gets bigger, with more content and logic, every simple server actions triggers a full reprocessing of the page and all the content is sent back
Am I missing something? This is not the behaviour I expected from server actions.
Asian black bearOP
Wow, it seems to be triggered by the usage of the auth0 calls to check for an active user session.
const user = await getSession();
if (user) {
// do logic
} else {
// error
}
const user = await getSession();
if (user) {
// do logic
} else {
// error
}
Asian black bearOP
It seems related to https://github.com/vercel/next.js/issues/50163