如何从 NextJs 中的 dom 中删除 __NEXT_DATA__？

Question

由于 NEXT_DATA 元素的 dom 大小变得非常高，影响了性能。谁能帮我从 dom 中删除 NEXT_DATA 吗？ 我在下一个 Js 中使用带有动态路由的完整服务器端渲染。

Answer 1

TLDR：如果你想（/可以）删除 __NEXT_DATA__ 脚本标签，React 将无法删除 hydrate。您要么对页面中的数据进行硬编码，要么尝试减少从 getServerSideProps 返回的 pageProps 有效负载。

我最近也遇到了这个问题，我问自己，为什么需要 将内容包含在 HTML 中2次。。 p>

1. 作为内容本身 - 当您的 NextJS 呈现适当的 HTML 并将其发送到客户端时
2. 作为 <script> 标记中的 JSON - 这是因为客户端需要 补水。

“解决方案”

• 仅从数据获取方法返回必要的数据 - 我可以推荐阅读这篇文章 Reducing HTML payload with NextJS，其中讨论了格式化/加重必要数据并仅返回所需的字段。
• 不使用数据获取方法和硬编码静态内容 - 如果不使用 revalidate 选项，使用 static 数据获取背后的想法是内容不应该是改变（也许永远）。所以在那种情况下，为什么我们不能硬编码页面本身的数据。当然，这样做的缺点是，必须手动将其全部写出来/将所需的内容下载到某个 JSON/对象，然后像这样在页面中使用它。

阅读

1. 这是您可能感兴趣的github link with related discussion in next。
2. Blog post about reducing the size of __NEXT_DATA__ - Liran Cohen。