react服务端渲染(五)同构
- 在服务端渲染出来的react组件,绑定的click事件没有执行,所以可以在浏览器端再执行一遍绑定事件
- 同构:同一套react代码在服务端和浏览器端执行两次
- 我们客户端的代码也得是用webpack进行打包,以js的方式放在服务端返回的html模板
- 使用express提供的静态文件方法为我们打包的js提供服务
- 在客户端使用hydrate替代render方法进行渲染,添加一个id节点作为客户端渲染的根节点
- 服务端节点之间不要有空格
//client/index.js import React from 'react' import ReactDom from 'react-dom' import Home from '../containers/Home'; ReactDom.hydrate( <Home/>, document.getElementById("root") )
//server/index.js
const express = require('express');const app = express(); import React from 'react'; import { renderToString } from 'react-dom/server'
import Home from '../containers/Home' app.use(express.static('public')); var home = renderToString(<Home />); app.get("/",(req,res)=>{ res.send(`<html> <head> <title>服务端渲染</title> </head> <body> <div id="root">${home}</div> </body> <script src="./index.js"></script> </html>`) }) app.listen('3000',()=>{ console.log("服务器已经启动"); })
- webpack-merge 合并webpack的配置项:相同的配置可以提取出来 使用webpackMerge(conf1,conf2)的方式合并两个配置项为一个新的配置项。配置规则为后面覆盖前面的内容,除了数组以外,对于数组会进行拼接
拼接结果如下:
项目地址:git@github.com:longlongdan/Reactssr.git