React application with Streaming Server Side Rendering

Simple template for a website with SSR (with streams) and React 18 with a brand new API — https://github.com/reactwg/react-18/discussions 🔥🔥🔥

🚀 Just start with

npm i && make dev

If you want to see this project in action: http://158.101.223.0:5000/

🚧 🛠️ Work In Progress 🛠️ 🚧

Technologies

• typescript as the main language.
• Express.js as a server. I think about fastify as a replacement for Express.js.
• React as a view layer. Render to a stream is used for SSR.
• Redux as a state for the application context: current page, query string etc.
• React-query as a layer for working with external data.
• Own version of CSS-in-JS. Inspired by aphrodite. You can find an implementation here. I need my own implementation, cause there is no any other ready solutions in CSS-in-JS, which will work with new React SSR API.
• My own router, which was created to work with redux. Find more info here. Checkout tests, you will find all cases there.
• webpack + esbuild to build the project.
• pino as fast and light logger.
• mocha + chai + sinon + React testing library to work with tests.
• eslint to find mistakes in the code.
• prettier to forget about code style.

I've tried to add as many comments in the source code as I could. So, all interesting places have dozens of comments to describe, what's happening there. I do apologize for my english)

If you want to figure out, how it works, just start from:

• https://github.com/artem-malko/react-ssr-template/blob/main/src/applications/server/index.ts for a server-side part of the application.
• https://github.com/artem-malko/react-ssr-template/blob/main/src/applications/client/index.tsx for a client-side part of the application.

But I recommend you to start from https://github.com/reactwg/react-18/discussions cause, there a lot of useful information, which can help you to work with current repo.

Fell free to ask me anything in the issues.