React isomorphism – Synchronous learning

First, technology selection

A, use create-react-app

B. Configure two sets of webpack.config file monitor – watch

This method does not support and the hot update file will be repackaged after the update, and the page will be manually refreshed after the package

During local development, Nodemon starts the background service and listens to the code on both ends

The online run time webpack packages both ends of the code nodemon starts the background service

C. Start two node servers to listen to the Web port

This method solves the hot web and server respectively from the service server to do two processing

1. Monitor port data for cache update during local development

2, the formal environment when static file processing can be

2. Isomorphic framework

1. Questions about the Helmet header.

The address www.npmjs.com/package/rea…

A) using the react – helmet – async

B) Add the HelmetProvider layer to the routes layer

Context = {helmetContext}

d) helmetContext.helmet.tltle(link).toString()

2. Route lazy loading;

Address loadable-components.com/docs/api-lo…

A) the end of the service

The import loadable from ‘@ loadable – component’

Const Home = loadable (() = > import (/ * Home * / ‘/ Home’)})

B) the service side

import { ChunkExtractor } from ‘@loadable/server’

Const statsFile = path.resolve(__dirname, ‘loadable-stats.json file path ‘)

const extractor = new ChunkExtractor({ statsFile })

const jsx = extractor.collectChunks()

const content = renderToString(jsx);

const scriptTags = extractor.getScriptTags()

const linkTags = extractor.getLinkTags()

const styleTags = extractor.getStyleTags()

c) Webpack

const LoadablePlugin = require(‘@loadable/webpack-plugin’)

Plugins :[new LoadablePlugin()], // Generate loadable-stats.json file

d) Babel

Add “plugins” to.babelrc: [“@loadable/babel-plugin”]

3. StaticRouter is used for the server route and BrowserRouter is used for the client route

The address www.npmjs.com/package/rea…

E) The customer service end and the server end use the same routine

F) BrowserRouter is used in the customer service

G) The server uses StaticRouter and adds renderToString to the outer layer

import {matchRoutes, renderRoutes} from “react-router-config”;

MatchRoutes can get the following information about the component

H) React-router-config promises= matchRoutes routes; Promise. All (Promises) Implementation results using renderRoutes

4. Combined use of data processing and 3

The Server side

a) Store

The address www.npmjs.com/package/rea…

import {matchRoutes, renderRoutes} from “react-router-config”;

Const Promise = matchRouters(Router, req.path). Map (({route}) => {/* how to store */ Retuen Router})

Promise.all(promises).then(route)

b) Hook

The address www.npmjs.com/package/use…

import { createServerContext } from “use-sse”;

const { ServerDataContext, resolveData}=createServerContext();

Called after renderToString

const data = await resolveData();

Call renderToString this time

Data is automatically added to the string after the call

Web side

A) Store

renderRoutes(Routes)

The function that returns the store to be initialized in the routing component that accepts the store call action

b)Hook

In the routing

import { createBroswerContext } from “use-sse”;

const BroswerDataContext = createBroswerContext();

BroswerDataContext Package route

In the component

import { useSSE } from “use-sse”;

const [data, error] = useSSE(() => {

return axios.get(“”).then((res) => res.data)

} []);

5. Data dehydration and water injection

The data requested from the background is stored using the INITIAL_STATE global variable. When the client creates a store, use it as an initial state:

The Server side

export const getClientStore = ()=>{

const defaultState = window.INITIAL_STATE;

return createStore(reducer,defaultState,applyMiddleware(thunk));

}

Web side

window.INITIAL_STATE = ${JSON.stringify(store.getState())}

7, CSS,

The CSS resolution at both ends uses the same LADer configuration and can be shared by both ends

The end of the service

1. Use mini-CSs-extract-plugin (after WebPackage 4.0) or extract-text-webpack-plugin (before WebPackage 4.0) for external links.

The style of the common style-loader is used to inject code into the backend parameters

style-loader

this.props.staticContext.css.push(styles._getCss());

The service side

this.props.staticContext.css.push(styles._getCss());

1. Introduce links when loading on demand

const styleTags = extractor.getStyleTags()

2, the form of customer service injection

Isomorphic-style-loader is used together with the customer service terminal

Three, some common errors

Error when using Async awsit

Install the Babel-Polyfill dependency and import it in the entry file

import “babel-polyfill”

Node child processes can open an address

const cp = require(‘child_process’); // Automatically open the browser module

Cp. The exec (‘ open http://127.0.0.1:3000/ ‘); // Automatically opens the default browser

Four,