nicolashemonic / typescript-react-loadable-server-rendering Goto Github PK

A React example project to demonstrate how to achieve code splitting plus server rendering using TypeScript 😍😍😍.

Its main goals are:

• Implement React code splitting
• Implement React server rendering
• Use Redux with server rendering
• Use React Router in both case
• Build all this features

And the last but not the least, this project demonstrate and explain how to make compatible and take advantage of TypeScript in all this features 💪.

Install
npm install

Build
npm run build-dev

Run
npm run serve

This project implements the minimal requirement to demonstrate its purpose.

• TypeScript v2.8

Universal

• React v16.3
• React Loadable v5
• React Redux v5
• React Router v4

Server

• Express v4
• Express es6 template engine

Build tools

• Webpack v4
  • ts-loader
  • babel-loader
• Babel v6
  • babel-preset-env
  • babel-preset-react
  • babel-plugin-syntax-dynamic-import
  • babel-plugin-dynamic-import-node
  • react-loadable/babel

Source code is under source folder.

Server code is built into server folder.

Client code is built into client folder.

Both Client and Server application are built through Webpack.

Code splitting is made possible using React Loadable and Webpack dynamic imports.

Server rendering is dependent on build step below.

TypeScript type check and emit JavaScript es2015 (TypeScript without types) consumable by Babel.

babel-preset-react transform React jsx and babel-preset-env es2015 syntax into code understandable by the browser.

Babel apply plugins to make code splitting compatible with server rendering:

On server build dynamic-import-node transpile import() to a deferred require() for node.

On client build syntax-dynamic-import allow babel to parse dynamic import syntax but not transform it. Then Webpack split code via dynamic import.

On both build react-loadable/babel declare wich modules are being loaded.

This sample project was made according to these documentations.

Code Splitting

• React
• React Loadable
• React Router
• Webpack

Server Rendering

• React
• React Loadable
• React Router
• Redux