Question

我正在使用React + Redux SPA模板在VS2017中创建ASP.NET Core SPA，因为我了解SSR理念，服务器完全呈现页面内容，客户端应该只显示它。我在浏览器网络选项卡中看到服务器发送initialReduxState和呈现的内容，但是如果我在任何渲染函数的客户端上放置断点，我看到它被调用。我不明白为什么客户端再次运行渲染周期，如果我们在客户端上重写该内容，SSR的原因是什么。我做了一个小实验并删除了 html：renderToString（app）从

params.domainTasks.then(() => {
        resolve({
            html: '',
            globals: { initialReduxState: store.getState() }
        });
    }, reject);

并没有改变。客户端成功显示没有SSR内容的页面内容。那么，如何在SSR之后阻止客户端渲染周期？

Answer 1

SSR主要用于SEO and performance purposes。您可以在this article中详细了解相关信息。

客户端实际上并没有重新绘制整个页面。 React期望服务器和客户端之间的呈现内容相同，因此，它会尝试修补客户端和服务器之间的差异。

从官方website引用：

ReactDOMServer.renderToString（element）将React元素呈现为其初始HTML。 React将返回一个HTML字符串。您可以使用此方法在服务器上生成HTML，并在初始请求时向下发送标记，以加快页面加载速度，并允许搜索引擎抓取您的页面以进行搜索引擎优化。

如果在已经具有此服务器呈现标记的节点上调用ReactDOM.hydrate（），React将保留它并仅附加事件处理程序，从而使您具有非常高性能的首次加载体验。

因此，页面实际上并未重新绘制。客户端正在重用服务器发送的HTML以提高性能。

在Microsoft.AspNetCore.SpaServices SSR之后调用客户端呈现

1 个答案: