server-side rendering

isomorphism

Run the same code on server and client

Double-ended routing isomorphism

The front-end still continues to use the History or browser mode

The server uses staticRouter

 //客户端<BrowserRouter> <App/> </BrowserRouter> // 服务端<StaticRouter location={req.url} context={context}> <App/> </StaticRouter>

Double-ended data isomorphism

1. A static method for prefetching data for components
2. The server finds the component corresponding to the current route
3. Call the prefetch method to get the data
4. Pass the data into the component as a property render
5. The render in the component does the corresponding processing
6. Server-side direct component
7. The browser takes over the page and completes the rendering

Find the corresponding component

go to the routing table

If you encounter dynamic routes, use path-to-regexp to match

Data dehydration

Prevent data in output html, can be js script window.xxx = json

Or in some corresponding dom tags

data injection

When rendering the application in the front end, get window.xxx to initialize the entire component tree

Downgrade to CSR

 componentDidMount(){ if(!this.state.data){//判断是否有初始化数据//进行数据请求Index.getInitialProps().then(res=>{ this.setState({ data:res.data||[] }) }) } }

• Method isomorphism: Declare the getInitialProps static method for the component, which is an isomorphic method for data acquisition at both ends
• Data prefetching: find the target component through route matching on the server side, and then call the data prefetching method of the component to get the data
• Pass initialization data as properties to the component
• Data dehydration: serialize the data and return it to the browser together with the html string
• Data water injection: The browser side gets the data directly from the server side, and also passes the data to the component through attributes
• If the initialization data does not exist, you can request the data once during the componentDidMount lifecycle

hydrate

The role is to reuse the straight out dom structure

render

Do not use the DOM structure directly.

Dynamic TDK (document information)

isomorphic-style-loader

Get style tags and style sheets under isomorphism,

 //用于获得模块信息和样式内容exports._getContent = function() { return content; }; //获得css 内容exports._getCss = function() { return '' + css; }; //执行dom 操作，将css 动态插入到head 内exports._insertCss = function(options) { return insertCss(content, options) };

react-helmet

You can use the html header to do the rendering data string return

resource mapping table

Generate a resource mapping table for server use

This article is reprinted from: https://zwkang.com/?p=936
This site is for inclusion only, and the copyright belongs to the original author.