Does any of the following sentences describe your SSR adventures?
You've got what it takes to implement SSR yourself, yet the sheer awareness of the amount of work needed makes you procrastinate.
You're looking for a good SSR example on the web yet they're all either overly complex (half of the code being webpack configuration mess), or oversimplified (a crappy demo).
It does? You're in the right place. Keep on reading.
Surprise, surprise - this example implements a well-known, "todo app" concept. Nothing interesting, you say? Well, I say it's got some pros:
- no domain knowledge required (how many todo apps have you built so far? 10? 20?)
- a fair amount of implicit complexity (sync stuff, async stuff, routing, storage, race conditions)
- once you familiarize yourself with the SSR implementation, you can use it to plan implementing yours; how cool is that?
- @rss/app - This is the core package. It holds components (used both on the client and on the server), routes and services.
- @rss/client - The client-side package. It encapsulates all the code needed to render (match routes, resolve dependencies, handle errors) the app in the browser.
- @rss/server - A simple Express-based server. Apart from routing, resolving dependencies and putting together HTML responses, it also exposes API for the client.
- @rss/state - All the state-related code resides here as it's shared between client and server. Types, redux-related boilerplate, store utils - it's all there.
- @rss/db - A database server. This sounds like computer science, yet we're just talking about a JSON Server instance. More than enough for an example app.
- @rss/shared - Remaining common chunks. Utility functions and types. Stuff that's shared across, yet doesn't really belong into any of the aforementioned packages.
- @rss/prettier - Shared Prettier configuration. Read more on sharing configuration here.
Running the app
- Clone the repository.
yarnfrom the root directory to install all dependencies.
.env(the defaults will work just fine but feel free to tweak them if needed)
yarn allthethings. This is gonna clean, build, lint and start the app.
- In your web browser, navigate to
http://localhost:<port>(you'll find the port number under
.env; it defaults to