One clarification: client and server code are never mixed within the same file. "use server" can only be used in server files and marks code that the client can call back into.
Yes, they demo'd a component with an onClick callback that contained a 'use server' directive followed by serverside SQL query, right there in the onClick. So presumably that callback is automatically replaced at build time with some generated clientside code that posts to a dynamic endpoint generated from just that function, or something. Seems like a strange idea with lots of ways to go wrong, but I don't know enough about it to judge.
These conditional checks are an obvious sign that they’ve cleaved the rock in the wrong location.
These conditional checks on server state exist because they didn’t create the shared environment between web server and web browser at deep enough of a level.
The key is to replicate the server-side pattern of “user actions cause HTTP request”. That is, you make a version of express that runs in the browser. Then you make parallel middleware that runs in both the browser and the server. Then you make your React components fire off mock HTTP requests that are handled by the browser express router.
So you write the same route handlers and components for the browser and server to run but then you write environment specific middleware.
I’ve expanded beyond express in the above application to add controllers, a routes file, and views, all code that has no conditionals and runs in both the browser and server environment.
What NextJS demoed is poorly conceived. There’s no need to autogenerate a link to an API.
Instead, your frontend middleware has req.update() defined to make an API request and the server middleware has req.update() defined to make the SQL update. GraphQL pairs well with this approach, but so does something like Graphiti/Spraypaint for a more traditional ORM-like model.
And there you go, sane server and client side rendering.
In most cases, you don’t want to treat server and client code the same from the perspective of I/O since the performance characteristics are dramatically different.
