5 Hidden React Server Function TRAPS Beginners Fall Into

[@snsa_kscc]

This content is second to none, but man, the more I stick with react/next.js, the more I feel I'm in the world of pain and footgunning. Much love, Jack.

[@thesaintnoodle]

react is getting very confusing as of late and i feel more and more people are getting frustrated with it. how long before we all start using laravel or just raw-dogging php lol

[@aurorasofie]

Hi Jack! Nice video, I didn't know the part about the streaming, nice example there. I had some thoughts about a few of the terminologies. Server Actions didn't get completely renamed, they are now a subset of Server Functions, which is a more general term for functions defined with "use server" that allows server code to run from the client, behind the scenes using a post endpoint. The reasoning was also related to a gap in terminology and confusion between the term Action and Server Action (it didn't make sense as it was). In your demo, you actually create a Server Action from the Server Function when you call it from the form and also when you call it inside a transition. This is why useActionState still makes total sense for naming, because its calling a server function inside a transition, which means it is now a Server Action. And by the way, useActionState can be used to call not just Server Functions but also other functions i.e on the client. Another comment about the usage of "server-only". Server only will give you errors if you try to import the functions in the file inside client-code, for example if you try to call them using a useEffect. This is useful for preventing errors caused by calling ie. prisma in the browser, typically it is useful in files with functions quering the db. However, it has no effect on your code in the example because "use server" is already defining the functions as server-code. And it does not help with leaking data in this case because the post endpoints are still accessible from the client.

[@yzz9833]

You been posting some bangers lately Jack

[@whynot9963]

Awesome video, as always. Quick question, how do you get the terminal to show that LSP style autocomplete for commanda you can run?

[@avneet12284]

Is there a repo for this? Nice content

[@TheHoinoel]

nice video! I know you're advertising your course with it, but I would love to see how to cache server functions. I am totally confused as to when and what will be cached

[@kengreeff]

Streaming example was great!

[@armaandhanji2112]

Hi Jack. Love your content. Would love to see your take on Tanstack Start! (I've been loving it so far).

[@jherr]

Definitely planning on it. Please tell me what you like about it.

[@thesaintnoodle]

how much does it differ to remix, i've been using that the last few months and i'd like to hear how people think it compares

[@jherr]

@@thesaintnoodle Yeah, I'll be really interested in RR 7's approach when it integrates more of the React 19 functionality.

[@umavictor]

Thanks Jack. Your content is invaluable

[@couragic]

20:10 returning component from server action smells like htmx 😊

[@frostmichael8360]

Awesome content, Thanks !

[@AlainDuchesneau]

That was pretty fast! 😵‍💫

[@bogdanfilimon2486]

Maybe it’s something I’m missing but why would functions from “use server” directive files would leak into the client? Why we need to import “server-only” to ensure that? “use server” by it’s name and definition should ensure that none of that code is leaked into client side? Otherwise what is the purpose of it?

[@prashlovessamosa]

I was excited when server actions and other stuff were introduced now I am totally confused about the server function action wtf going on in the react ecosystem. I am all in for Svelte.

[@ivan.jeremic]

just use svelte why comment.

[@prashlovessamosa]

@@ivan.jeremic I have to learn react as no one pays me for writing Sveltekit as a lot of crackers still exsist you are one of them

[@MerthanMerter]

​@@ivan.jeremic because comments were invented to get feedback, thoughts and ideas from community? in fact why would you comment something like that?

[@thesaintnoodle]

I'm not sure how i feel about the direction of svelte, but then you could say generally that I'm just not sure how i feel about the future landscape of the web on javascript

[@prashlovessamosa]

@@thesaintnoodle yes

[@panoscool_]

Hi Jack, can you share the github for these examples pls?

[@jherr]

Yeah, I'm on the road and away from the machine that had the final code. I'll post it tomorrow (wednesday) morning.

[@panoscool_]

@jherr thanks a lot!

[@Fuzbo_]

Still don’t see the value prop for server functions specifically other than type-safe return types, co-locating data fetches / mutations, and ability to submit forms without JS. For every benefit they offer it feels like it comes with 10x as many gotchas or footguns.

[@yzz9833]

Personally, I would say a large value prop for server functions is actually being able to return entire components as html instead of rendering them on client. This also seems like a more graceful way of handling state changes in the dom versus doing it programmatically and risking re-renders.

[@LehmannMr]

Maybe you give next-safe-action a try. The code looks so much cleaner.

[@mpiorowski]

This is like the perfect advertisement to not touch React, even with the longest stick. 😄

[@brianllllll]

Lol

[@cafelutsa_]

Don't touch it, no need for more mediocre React devs to join the soup of bad code

[@AdamK3l]

What do you recommend instead?

[@m12652]

@@AdamK3l SvelteKit

[@LehmannMr]

​@@m12652Hm. If you look at the numbers of react applications compared to svelte I don't think it is a good choice. Also if you look how many good react tutorials are out ther for react compared to svelte.

[@MerthanMerter]

J.H: god of react

[@LehmannMr]

Whoever wants to work with server actions should take a look at the next-safe-action package which includes things like validation. Also be aware that server actions are an api endpoint which can be accessed via http directly and always should be checked for authentication and authorisation.

[@rusting_in_peace]

🎯🧐👍

[@Niksorus]

Next.js and React did a terrible job at implementing this pattern. Even MORE footguns in React ... In the meantime, all the other frameworks find more elegant solutions, like Astro server actions.

[@aveshlutchman8573]

Server functions being unable to run in parallel is such a bummer. I have an app that uses a lot of Promise.all since i have many asynchronous tasks running. It sucks that i can't realistically use server functions for some tasks because of this. For example i have a transcript editor which has multiple segments, each segment having their own start and stop times. I would use server actions to load all of the data for each segment, but based on this info, i guess I'll have to use route handlers.

[@vitorfigueiredomarques2004]

You Just need to call Promise.all in another sever function.

[@aveshlutchman8573]

@@vitorfigueiredomarques2004 That feels like such an unnecessary thing, needing to make a proxy server function just so that I can do that. The simpler approach is just porting the server functions to route handlers imo.

[@vitorfigueiredomarques2004]

@@aveshlutchman8573 This wouldn't be a problem if this server function contains all your business logic. So clients just consume functions implemented by the server. The problem is when you need client logic in the middle of the procedure, you would need to return those callbacks from the server function, which can make things complicated.

[@adambickford8720]

That concurrency model will cost the industry billions.

[@Tay74514]

React IS the trap 🕳️😂

[@macccu]

We are literally back to PHP returning parts of template from backend lol. Soon there will be tons of low quality React tutorials that will teach newcomers to mix backend and frontend code creating all famous "spaghetti code". Then will we will go "hmm there must be a way to split front and back!"

[@vitfirringur]

It's not the same, friend. You are just demonstrating your ignorance here. You're not returning a "template".

[@yzz9833]

@@vitfirringurthis

[@adambickford8720]

@@vitfirringur Might want to brush up on your history. This is a very, very old idea.

[@o_glethorpe]

The best not so hidden mistake is to actually put react on the server.