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

Question

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

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

谢谢

萨蒂什

Answer 1

我有一个类似的问题。我在服务器上呈现了一个大表（5000 行）。我不想将数据发送到客户端两次（以 HTML 和 JSON 形式），我想出了这个解决方案/hack。

在渲染表行之前，组件首先检查 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初始安装后的任何渲染结合起来。