Question

我是React的新手。我正在构建一个具有反应，反应路由器4，反应还原等的站点，其中很少的组件在服务器上呈现（主要是使用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相结合，以防止在初始安装后进行任何渲染。

Answer 2

您可以使用'react-dom'中的水合物

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

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

2 个答案: