React SSR：防止客户端呈现在服务器上呈现的组件

Question

我是 React 新手。我正在构建一个带有 React、React router4、React redux 等的站点，其中很少有组件在服务器上呈现（主要是使用 API 调用获取数据并显示它们）。现在我的问题是，如果我在服务器上呈现组件并将呈现的 HTML 发送到客户端，它会再次在客户端呈现（进行 API 调用），我需要防止这种情况。

如果组件已经在服务器上呈现，我不想再次呈现它。我怎样才能做到这一点？

谢谢

萨蒂什

Answer 1

您可以使用 'react-dom'

的水合物

https://reactjs.org/docs/react-dom.html#hydrate

Answer 2

我也有类似的问题。我在服务器上呈现了一个大 table（5000 行）。我不想将数据发送给客户端两次（以 HTML 和 JSON 形式）我想出了这个 solution/hack.

在呈现 table 行之前，组件首先检查 DOM 以查看是否存在具有相同 id 的组件（如果预呈现服务器端将存在），如果它然后它提取 HTML 并直接通过 dangerouslySetInnerHTML.

使用它

 renderTable() {
    debug('render table');
    const id = 'table-body';
    const html = this.getExistingHtml(id);

    if (html) {
      return <tbody id={ id } dangerouslySetInnerHTML={{ __html: html }} />;
    }

    return <tbody id={ id }>{ this.renderItems() }</tbody>;
  }

  getExistingHtml(id) {
    if (typeof document === 'undefined') return;
    const node = document.getElementById(id);
    return node && node.innerHTML;
  }

  renderItems() {
    debug('render items');
    return this.props.items.map(({ name, url }) => {
      return (
        <tr>
          <td>
            <a href={ url }>
              <div>{ name }</div>
            </a>
          </td>
        </tr>
      );
    });
  }

  shouldComponentUpdate() {
    return false;
  }

我还将其与 shouldComponentUpdate 结合使用，以防止在初始安装后出现任何渲染。

React SSR：防止客户端呈现在服务器上呈现的组件

React SSR: Prevent client side rendering of components which are rendered on the server

reactjs

server-side-rendering

react-redux

react-router-v4