- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
如何防止 SSR 内容在 React.hydrate(...)
上的客户端浏览器中重新呈现?
我的工作流程
在我当前的项目中,我在构建过程中通过 ReactDomServer.renderToString(...)
渲染了一堆 React 组件。 .此渲染的结果将用作 Thymeleaf 片段。 SSR DOM 包含几个 th:text
内化的属性:
简要示例
这是我的组件:
import React from "react";
class WdbThym extends React.Component {
constructor(props) {
super(props);
}
shouldComponentUpdate() {
return false;
};
render() {
return (
<span {...{ 'th:text': `#{${this.props.i18n}}` }}>
{this.props.i18n}
</span>
);
}
}
export default WdbThym;
这是
WdbThym
的示例用法:
<WdbThym i18n="general.hello_world" />
这就是
ReactDomServer.renderToString(...)
创建:
<span th:text="#{general.hello_world}">general.hello_world</span>
这是 Thymeleaf 呈现并分发给客户端的内容:
<span>Hello World!</span>
这就是
React.hydrate
呈现:
<span th:text="#{general.hello_world}">general.hello_world</span>
如何防止
React.hydrate(...)
上的初始渲染对于上述
Component
?
最佳答案
正如@estus 报道的那样,https://github.com/facebook/react/issues/8017解决了这个问题。
我创建了一个稍微复杂的示例来重现给定的建议:
DOM
<div id="root">
<div class="App">
<h1>THIS IS SSR CONTENT</h1>
<p>Current Time: 2019-01-27T08:00:00.000Z</p>
<p>Hello World from Thymeleaf (SSR)</p>
</div>
</div>
class CsrComponent extends React.Component {
state = { currentTime: "" };
componentDidMount = () => {
setInterval(() => {
this.setState({ currentTime: new Date().toISOString() });
}, 1000);
};
render() {
return <p>Current Time: {this.state.currentTime}</p>;
}
}
class SsrComponent extends React.Component {
render() {
return (
<p
dangerouslySetInnerHTML={{ __html: "" }}
suppressHydrationWarning
{...{ "th:text": `#{${this.props.i18n}}` }}
/>
);
}
}
class App extends React.Component {
render() {
return (
<div className="App">
<h1>THIS IS SSR CONTENT</h1>
<CsrComponent />
<SsrComponent i18n="general.hello_world" />
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.hydrate(<App />, rootElement);
关于reactjs - 防止 React 在 hydrate 上重新渲染部分 SSR 内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54382054/
是否可以在 Next.js 中强制执行仅 SSR 模式并且仅部分 hydration 页面?假设我有这个应用程序: 组件/dynamic.jsx export default () => ( c
我想扩展 ObjectHydrator 以受益于我的 ManyToOne 关系的 hydration 并向实体添加额外的字段。 这是我的 Hydrator :StatisticsDataHydrato
我想知道是否有人可以解释什么是计时指标 Next.js-before-hydration和 Next.js-hydration均值,以及它们与 FCP 的关系。这是针对服务器端渲染并在客户端使用钩子(
我需要以一种形式对多个对象进行 hydration 。这是我使用的: 产品表格 - 我有一个表格,我称之为三个字段集 产品字段集 促销字段集 类别字段集 我有所有必要表格的模型,这是产品模型的示例:
我有可以执行的下一个代码,但是需要太多时间...有什么办法可以使我用createQueryBuilder和update方法来优化它? 这是当前功能: private function getCsv(
来自 React 16 docs关于ReactDOM.Hydrate(), Same as render(), but is used to hydrate a container whose HTM
有几个线程讨论了数据 hydration 的含义。 但我找不到数据 dehydration 的任何定义。 我可以看出三种可能的含义 1) Extracting the current state of
我创建了几个共享 Bundle 的模块化应用程序。其中一个包负责处理所有实体/存储库相关的逻辑(我们称之为 MyBundle)。 这个 MyBundle 包含几个自定义 Hydrator 。鉴于教义配
将Vue异步组件与SSR一起使用会导致页面刷新时重新补水。有没有一种方法可以不导致组件无故更新?来自SSR和客户端的标记是相同的。 https://vuejs.org/v2/guide/compone
我有一个为许多客户端提供数据的持久层。我还有一个规范化的表结构,这意味着值分布在各个表中。我想设计我的持久性服务以确保依赖于它的服务进行最少的往返:如果可能,不超过一次。 鉴于此,我应该关注什么以获得
Angular Universal 用于服务器端渲染。 我有一个功能齐全的 Angular 应用程序。增加FCP。我需要与服务器端渲染相结合。 Angular 是否通用允许动态 SSR。在服务器端加载
编辑 2018-05-22:没有答案完全固定的问题 - 无法再复制问题,因为不再具有访问权限。不删除基于 this meta discussion 请不要花时间/精力来创建答案 @Wilt 的回答中的
我有一个关于重新整理推文文字的问题。任何帮助,将不胜感激。 这是我的数据来源;关于电晕鸣叫: source of data set 我从照片中下载了一个数据集(名为2020年2月1日) 然后,我将过滤
我正在尝试将 hydration 数据插入Google Fit。但是我无法插入数据。 这是我的代码: BuildFitnessClient: private void buildFitnessClie
我有2个实体:User,Article和具有属性的多对多关系,用于描述User与Articles的交互。该属性描述了交互的类型(例如书签...)。 在这种情况下,我需要一个从Article到UserA
我正忙着查看 elasticsearch 以寻找我正在着手的新项目。我目前正在运行 Symfony2.5,带有最新的 FOSElasticaBundle 等等。我正在对 bundle 的性能进行一些基
我有以下 JSON: { "users": [ {"id": "1", "name": "John Doe"}, {"id": "2", "name": "Bi
我有 3 个实体: 1. /** * @ORM\Entity */ class Product { /** * @ORM\Id * @ORM\Column(type="
我正在努力尝试找出如何使用单一表单编辑多个模型。 我有一个名为 Teams 的数据库表和一个与该表关联的学说实体。我创建了一个表单,如下所示: 我的团队现场集: class TeamFieldset
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我是一名优秀的程序员,十分优秀!