next.js - 如何从 NextJs 的 dom 中删除 __NEXT_DATA__？

Question

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

Answer 1

TLDR:如果您愿意(/可以)删除 __NEXT_DATA__脚本标签，React 将无法 hydrate .您要么对页面中的数据进行硬编码，要么尝试减少您的 pageProps负载，从 getServerSideProps 返回.

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

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

“解决方案”

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

阅读

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