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

Question

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

Answer 1

TLDR：如果您愿意（/可以）删除__NEXT_DATA__script 标签，React 将无法Hydrate。您可以对页面中的数据进行硬编码，或者尝试减少pageProps从getServerSideProps.

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

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

“解决方案”

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

阅读

1. 这是一个github 链接，其中包含您可能感兴趣的接下来的相关讨论。
2. 关于减小尺寸的博客文章__NEXT_DATA__- 作者：Liran Cohen。