ReactJS 是否为服务器端渲染的应用程序渲染应用程序两次？（重复代码）答案

【问题标题】：Does ReactJS render the app twice for server side rendered app? ( DUPLICATE CODE)ReactJS 是否为服务器端渲染的应用程序渲染应用程序两次？（重复代码）
【发布时间】：2016-08-21 00:52:22
【问题描述】：

在服务器端渲染中，结构是否需要我们渲染应用程序两次？在如下所示的 server.js 文件中，应用程序结构被渲染并发送到客户端。虽然 Server.js 已经生成了完整的代码，但 Client.js 通过调用 render 函数再次生成。

因此，据我所知，该应用程序的最终结构是： SERVER.js（渲染 HTML，获取初始状态并将其设置在 PRELOADED_STATE 变量中，使用 renderFullPage 函数渲染页面） ==> CLIENT.js（使用 PRELOADED_STATE 变量呈现 App 结构

如果我错了，请纠正我。如果没有，我们不能只做一次吗？

Server.js

import path from 'path'
import Express from 'express'
import React from 'react'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import counterApp from './reducers'
import App from './containers/App'
import { renderToString } from 'react-dom/server'

const app = Express()
const port = 3000

// This is fired every time the server side receives a request
app.use(handleRender)

// We are going to fill these out in the sections to follow
function handleRender(req, res) { /* ... */ }
function renderFullPage(html, preloadedState) { /* ... */ }

app.listen(port)

function handleRender(req, res) {
  // Create a new Redux store instance
  const store = createStore(counterApp)

  // Render the component to a string
  const html = renderToString(
    <Provider store={store}>
      <App />
    </Provider>
  )

  // Grab the initial state from our Redux store
  const preloadedState = store.getState()

  // Send the rendered page back to the client
  res.send(renderFullPage(html, preloadedState))
}
function renderFullPage(html, preloadedState) {
  return `
    <!doctype html>
    <html>
      <head>
        <title>Redux Universal Example</title>
      </head>
      <body>
        <div id="root">${html}</div>
        <script>
          window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState)}
        </script>
        <script src="/static/bundle.js"></script>
      </body>
    </html>
    `
}

Client.js

import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import App from './containers/App'
import counterApp from './reducers'

// Grab the state from a global injected into server-generated HTML
const preloadedState = window.__PRELOADED_STATE__

// Create Redux store with initial state
const store = createStore(counterApp, preloadedState)

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')

【问题讨论】：

标签： javascript node.js reactjs server-side-rendering

【解决方案1】：

答案取决于两次渲染的含义。 React 会将服务器生成的节点的数据校验和与虚拟 DOM 中生成的节点进行比较，以验证它们与客户端生成的节点是否相同。这样就不需要修改 DOM，只需要修改虚拟 DOM。

来自official React documentation：

如果您在已经具有此服务器渲染标记的节点上调用 ReactDOM.render()，React 将保留它并仅附加事件处理程序，从而让您获得非常高效的首次加载体验。

编辑：我写错了要比较的数据是 reactId 而不是校验和。

【讨论】：