react服務端渲染（五）同構

時間 2020-06-21

標籤 react 服務渲染同構欄目 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("服務器已經啓動"); })