Ryan Toronto

Ryan Toronto

@ryantoron.to

242 followers32 following64 posts

Ryan Toronto
@ryantoron.to

This post explores how components that read impure data can end up with inconsistent trees, and how React's cache function easily fixes that for you.

Ryan Toronto
@ryantoron.to

If you're running an RSC server how do handle the react-server condition? 1. start node with --conditions=react-server? 2. run node without conditions, but start a worker with the react-server condition? 3. Something else, like a bundle time thing? I've been doing 1, but I'm not sure it's best

Ryan Toronto
@ryantoron.to

Completed this! Ended up releasing it as an open source library: github.com/twofold-rsc/... My first RSC OSS tool, feels good :)

Ryan Toronto@ryantoron.to

One of the areas where I've changed my mind recently is with server actions + closures. In the past I believed it was too dangerous to close over variables during render because it creates an implicit client param and therefore devs would be better off being explicit with hidden form inputs. but...

Ryan Toronto
@ryantoron.to

One of the areas where I've changed my mind recently is with server actions + closures. In the past I believed it was too dangerous to close over variables during render because it creates an implicit client param and therefore devs would be better off being explicit with hidden form inputs. but...

View full thread
Ryan Toronto
@ryantoron.to

This weekend I'm going to try implementing this. A plugin that turns a function defined in render into one that automatically encrypts/decrypts anything it closes over.

Ryan Toronto
@ryantoron.to

One of the areas where I've changed my mind recently is with server actions + closures. In the past I believed it was too dangerous to close over variables during render because it creates an implicit client param and therefore devs would be better off being explicit with hidden form inputs. but...

Ryan Toronto
@ryantoron.to

If you encrypt (or sign) those closed over variables before giving them to the client, then by the time they make it back to the server you know you can trust them. The server can skip auth/validation because if params decrypt they are 100% valid. It's like CSRF for every single hidden form input.

View full thread
Ryan Toronto
@ryantoron.to

Step 3: Layer useOptimistic on top of useActionState. Now you're back to being able to immediately update the UI without having to wait for the server, but you still get to sync action state between server and client.

Ryan Toronto
@ryantoron.to

Beautiful thing here is that you can go from step 1, to step 2, to step 3 without having to rearchitect your app. In each step you're just thinking about deriving UI from state.

Ryan Toronto
@ryantoron.to

Step 2: Add in server actions and useActionState. Now data lives on the server, but the UI is "slow". Actions queue and there's no UI update until the server responds.

You are up to date.