当另一个网站使用我的 Next.js 页面作为包装器时，如何防止水合错误？

Question

我正在使用名为 IDX Broker 的（对我来说新的）服务为房地产客户创建一个网站。他们的服务的工作方式是从我的网站（例如 example.com/listings）获取一个页面，并通过查看我网站上的 DOM 并找到两个 div 标签，将其用作页面的包装器。在这种情况下，他们的页面只是要搜索的建筑物地址的一组输入。

<div id="idxStart"></div>
<div id="idxStop"></div>

它似乎加载了他们的页面，然后加载了它周围的包装器。因此，当我转到他们的页面时，我可以看到他们的页面（搜索输入框和按钮）加载，但随后包装器加载并且他们的页面消失。

预期的行为是用户可以转到 IDX 站点并查看 IDX 页面（搜索页面），其中包含我站点中的我的页面，有效地将上述 div 替换为 IDX 页面中的 HTML。

目前充当包装器的页面只是简单的页眉和页脚。 IDX 站点还使用 CNAME 将其从 IDX Broker 站点更改为Listings.example.com。我认为这个问题与此无关，但它可能相关，所以我将其包括在内。

我尝试过使用 useEffect 更改网站加载方式，但我可能使用不正确。

以下是当前页面上控制台的一些错误：

69-9ea0f23f80313f55.js:1 Failed to fetch RSC payload for https://listings.example.com/. Falling back to browser navigation. TypeError: Failed to fetch

Access to fetch at 'https://example.com/' (redirected from 'https://listings.example.com/?_rsc=1ws4l') from origin 'https://listings.example.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Uncaught Error: Minified React error #423; visit https://reactjs.org/docs/error-decoder.html?invariant=423 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Answer 1

我解决了。在测试了 React 中的一些无 SSR 选项后，我决定使用

dangerouslySetInnerHTML

。

如果有人有不涉及使用该属性的建议，我很乐意实现它。