Reboil dynamic is educational purpose project that have simple easy to understand setup for SEO friendly React. Contain this feature:
- Client Side Rendering
- SEO Friendly (dynamic rendering using puppeter for screen reader user agent)
- Fast Refresh!
- New JSX Transform (no need to import React manually)
- React Router V5
- React Helmet to manage document head
- Fastify as a web server
- Tools configured: ESLint, Prettier, Typescript, Husky and Lint Staged.
- Testing with Jest and React Testing Library
- CSS Support with vanilla-extract!
How the dynamic rendering work:
- Fastify check for user agent and type of the request (if its requesting document or assets) on every request.
- If its crawler, access the webpage with headless chrome via puppeter and send the html. Some key point that need to take a note when we access our page in puppeter:
- we only request for resource that help DOM production (document, script, fetch, xhr)
- we do not load analytic script as it could produce unintended pageviews and prevent executing unnecessary code. The list can be extend if we have other script that does not help for DOM production
- If its regular user, serve as regular static client rendered page
If we ever want to change status code for server response to crawler. e.g: You have 404 page and does not want crawler to index because you return status code 200. With react-helmet, add meta tags:
<meta name="render:status_code" content="4xx" />
server will check for this status code and replace default 200 code when you serve error page.
Run this script and start modify the code inside /src/client
.
yarn server:dev
There is no hmr installed for server code development currently, so everytime we update code, we need to run this. Codes is inside /src/server
.
yarn server:build && yarn server:start
Lists of script you can run within this project.
Command (yarn or npm) | Description |
---|---|
lint |
Lint all files |
prettier:format |
Format all files with prettier |
prettier:check |
Check codes format only without emmitting |
client:test |
Run test for client (frontend) codes |
client:dev |
Run client code in development mode with hmr and fast refresh |
client:build |
Build client codes for production to /dist/client |
client:build:analyze |
Build client and analyze bundle size |
client:check-types |
Client type checking |
server:build |
Build server codes for production to /dist/server |
server:start |
Start server, ideally run this after build |
server:check-types |
Server type checking |
validate |
Validate all code with type checking, prettier check and linter |