parcel-react-ssr

Simple example of how to do streaming server-rendering. You will not believe how easy it is!

Using:

• parcel-bundler
• react
• react-router-dom
• react-helmet-async (SEO)
• react-imported-component (Code Splitting)
• styled-components (Streaming CSS-in-JS)

Handy Extras

• gzip compression
• eslint
• favicon example
• Code split example
• Relative Typography scale based on em's
• CSS Reset
• "system" font-family
• differential bundling - automatically serve modern bundles to modern browsers

How to run

• npm run dev - Run the development server with hot reload but no server-rendering
• npm run dev-server - Run the server with nodemon to rebuild with every change
• npm run build - Build for production, required before running
• npm start - Start the production server

How does it work?

To do proper server-rendering, the code is bundled in two version: one for the browser and one for Node.js.

The browser version is in the dist/client folder and the Node.js version is in dist/server. However, they both share the same public path for their files: /dist and it points to the browser version. Go read the code, it's pretty straightforward!

Read the code!

1. package.json - Start by reading the scripts section to understand how the build process works. Yes it's that dead simple!
2. app/index.html - Your client-side HTML file (for development)
3. server/template.js - Your server-side HTML file template (for server rendering)
4. app/client.js - Entry point for your browser version
5. app/App.jsx - Your main application component shared between your browser and Node.js version
6. app/pages/HelloWorld.jsx - Dead simple hello world
7. app/pages/HelloWorld2.jsx - A fun code split example
8. app/codeSplitAssets/NyanCat.scss - Example of SCSS
9. app/styles.js - Global Styles for styled-components - renders in stream - fast! Don't overuse - only put critical styles here!
10. server/index.js - Entry point for your Node.js version
11. server/ssr.js - Middleware taking care of server-side-rendering
12. server/pageData.js - Gets generated bundle links from dist/index.html as the template with cheerio. Exports a singleton to as an optimization.