Server action works locally (npm run dev) but not on vercel deployment
Unanswered
American Bobtail posted this in #help-forum
American BobtailOP
Title says it all, i have a bunch of server actions and locally they all work.
When deployed they work, except one that vercel logs say it's not found anywhere.
The one that breaks is supposed to fetch data from DB and return it to a client component, while the others only perform DB writes, no return values.
What could be the reason? Are server actions supposed to not return anything on vercel? Even though locally they work
When deployed they work, except one that vercel logs say it's not found anywhere.
The one that breaks is supposed to fetch data from DB and return it to a client component, while the others only perform DB writes, no return values.
What could be the reason? Are server actions supposed to not return anything on vercel? Even though locally they work
8 Replies
technically server actions can return values. However, server actions are made for client side mutations on the server. Not for data fetching
American BobtailOP
Understood. Still see no reason why this should be broken.
Closest thing i found is
https://github.com/vercel/next.js/pull/69178
but even with
It doesn't work on my end.
Also i'm on "next": "^14.2.8" so i think this shouldn't affect me. Not sure how to make sure what version is being used on vercel though.
EDIT: the correct setting was experimental.optimizeServer
Closest thing i found is
https://github.com/vercel/next.js/pull/69178
but even with
const withNextIntl = require('next-intl/plugin')('./i18n.js');
module.exports = withNextIntl({
optimizeServerReact: false,
});It doesn't work on my end.
Also i'm on "next": "^14.2.8" so i think this shouldn't affect me. Not sure how to make sure what version is being used on vercel though.
EDIT: the correct setting was experimental.optimizeServer
you might want to share more details like errors, code, ...
American BobtailOP
Found the issue. but it doesnt make sense lol:
i was defining a function inside use effect that called the server action so:
When i moved the function definition outside it worked, like this
Perhaps a bug in nextjs build optimizations like tree shaking too much
i was defining a function inside use effect that called the server action so:
useEffect(() => {
async function fetch() {
const data = await server_action();
setState(data);
}
fetch();
}, [x]);When i moved the function definition outside it worked, like this
async function fetch() {
const data = await server_action();
setState(data);
}
useEffect(() => {
fetch();
}, [x]); Perhaps a bug in nextjs build optimizations like tree shaking too much
you don't want to fetch data inside a use Effect... you want to use a clientside fetching library when you already fetching data from the client. You can use swr and I like to use react query.
Keep in mind, that fetching stuff from the server instantly when the component renders can cause waterfalls of fetches. Like that your page can take very long to render
Keep in mind, that fetching stuff from the server instantly when the component renders can cause waterfalls of fetches. Like that your page can take very long to render
American BobtailOP
Agreed. But the code has no reason to break when defined inside useEffect instead of outside.
you should worry about what weird things are possible in javascript 💀
American BobtailOP
Just curious if this is expected behaviour or a bug in nextjs build optimization. I think the latter but i'm not quite sure.