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
npm i && make dev
If you want to see this project in action: http://158.101.223.0:5000/
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.