express+react+ssr静态页面实战

环境配置

1.package.json

{
    "name": "first_ssr",
    "version": "1.0.0",
    "scripts": {
        "server": "cross-env NODE_ENV=test nodemon --exec babel-node src/server.js"
    },
    "dependencies": {
        "babel-plugin-transform-decorators-legacy": "^1.3.5",
        "babel-preset-env": "^1.7.0",
        "babel-preset-react": "^6.24.1",
        "express": "^4.16.4",
        "react": "^16.6.3",
        "react-dom": "^16.6.3"
    },
    "devDependencies": {
        "cross-env": "^5.2.0"
    }
}

1>npm i

2>npm babel-cli -g

.babelrc

{
    "presets": [
        "env",
        "react"
    ],
    "plugins": [
        "transform-decorators-legacy"
    ]
}

至此，我们已经可以在src/server文件中import express和react了。

目录结构

RenderToString

renderToString能将组件转换成HTML字符串，生成的HTML会带有额外的属性，react15时data-react-id和data-checksum,16以后只保留data-reactroot,因为16的diff算法更加宽松，只对子树进行差异检查

renderToStaticMarkup:不会生成额外属性，其他作用和renderToString一样

src/server.js

import express from 'express'
import App from './components/App'
import React from 'react'
import {renderToString} from 'react-dom/server';
var app=express()
app.get('/',(req,res)=>{
    const arr=[0,1,2,4]
    const html=renderToString(<App list={arr}/>)
    res.send(html)
})
app.listen(5000,function(){
    console.log('server started!')
})

src/component/App.js

import React,{Component} from 'react'
export default class App extends Component{
    render(){
        return(
            <div>
            <ul>
                {
                    this.props.list.map(item=>{
                        return <li>{item}</li>
                    })
                }
            </ul>
            </div>
        )
    }
}