| 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. Browser middleware: https://github.com/williamcotton/williamcotton.com/tree/mast... Server middleware: https://github.com/williamcotton/williamcotton.com/tree/mast... 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. |