reactjs - react SSR : Prevent client side rendering of components which are rendered on the server

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 结合起来，以防止初始安装后出现任何渲染。