logo标签列表

ReactJS在服务器端渲染应用程序时会渲染两次吗？（重复代码）

javascriptnode.jsreactjsserver-side-rendering
3
在服务器端渲染中，是否需要我们将应用程序结构渲染两次？在下面的 server.js 文件中，应用程序结构被渲染并发送到客户端。虽然完整的代码已经由 Server.js 生成，但是 Client.js 通过调用 render 函数再次进行渲染。
所以，根据我的理解，应用程序的最终结构是： SERVER.js（呈现 HTML、获取初始状态并将其设置在PRELOADED_STATE变量中，使用 renderFullPage 函数呈现页面） ==> CLIENT.js（使用PRELOADED_STATE变量呈现应用程序结构）
如果我理解错误，请指出。如果没有问题，我们不能只做一次吗？ 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')
1个回答
1
答案取决于你所说的“渲染两次”的含义。React会将服务器生成的节点的数据校验和与虚拟DOM中生成的节点的数据校验和进行比较，以验证它们是否与客户端生成的节点相同。这样就不需要修改DOM，只需修改虚拟DOM。
来自官方React文档：

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

编辑： 我错误地写成了reactId而不是checksum。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接