There’s also a Preact version available in the preact branch if you prefer that over React.
There are several good example apps and boilerplates for universal React/Preact apps. This one borrows ideas from Milo Mordaunt’s great tutorial: Handcrafting an Isomorphic Redux Application (With Love) and the corresponding repository.
The interesting difference between the numerous universal React/Preact examples is the data fetching and the server communication. This example follows Milo Mordaunt’s approach. It declares the data dependencies in the React/Preact component. The static component property
needs lists Redux action creators.
These action creators directly talk to the database when called on the server, or make a request to the server when called on the client. It gets simpler if you use a separate HTTP REST API server that speaks JSON. Then you can use a universal HTTP library like axios or fetch to talk with the API server. In this simple example though, everything is mashed up on purpose.
Starting the server
$ yarn install $ yarn start
Then open http://localhost:3333 in your browser.
- react-redux-universal-hot-example by Erik Rasmussen: More complete but way more complex example, also no emphasis on Progressive Enhancement