如何在 NextJs 中从 dom 中删除 __NEXT_DATA__？
How to remove __NEXT_DATA__ from dom in NextJs?
因为 NEXT_DATA 元素 dom 大小变得非常大并且影响了性能。谁能帮我从 dom 中删除 NEXT_DATA？
我在下一个 Js 中使用带有动态路由的完整服务器端渲染。
TLDR： 如果你愿意（/可以）删除 __NEXT_DATA__ 脚本标签，React 将无法 hydrate。您要么硬编码页面中的数据，要么尝试减少从 getServerSideProps.
返回的 pageProps 负载
我最近也遇到了这个问题，我问自己，为什么 内容需要包含 在 HTML 2次.
- 作为内容本身 - 当您的 NextJS 呈现适当的 HTML 并将其发送给客户端时
- As JSON in
<script> tag - 这是因为客户端需要rehydration。
“解决方案”
- 仅从数据获取方法返回必要的数据 - 我可以推荐阅读这篇文章 Reducing HTML payload with NextJS，他们在其中讨论格式化/加重必要的数据并只返回需要的字段。
- 不使用数据获取方法和硬编码静态内容 - 使用静态数据获取背后的想法，如果不使用
revalidate 选项，是内容不应该改变（也许永远）。所以在那种情况下，为什么我们不能在页面本身中对数据进行硬编码。虽然这样做的缺点当然是，必须手动将其全部写出来/将所需内容下载到某个 JSON / 对象，然后像这样在页面中使用它。
阅读
因为 NEXT_DATA 元素 dom 大小变得非常大并且影响了性能。谁能帮我从 dom 中删除 NEXT_DATA？ 我在下一个 Js 中使用带有动态路由的完整服务器端渲染。
TLDR： 如果你愿意（/可以）删除 __NEXT_DATA__ 脚本标签，React 将无法 hydrate。您要么硬编码页面中的数据，要么尝试减少从 getServerSideProps.
pageProps 负载
我最近也遇到了这个问题，我问自己，为什么 内容需要包含 在 HTML 2次.
- 作为内容本身 - 当您的 NextJS 呈现适当的 HTML 并将其发送给客户端时
- As JSON in
<script>tag - 这是因为客户端需要rehydration。
“解决方案”
- 仅从数据获取方法返回必要的数据 - 我可以推荐阅读这篇文章 Reducing HTML payload with NextJS，他们在其中讨论格式化/加重必要的数据并只返回需要的字段。
- 不使用数据获取方法和硬编码静态内容 - 使用静态数据获取背后的想法，如果不使用
revalidate选项，是内容不应该改变（也许永远）。所以在那种情况下，为什么我们不能在页面本身中对数据进行硬编码。虽然这样做的缺点当然是，必须手动将其全部写出来/将所需内容下载到某个 JSON / 对象，然后像这样在页面中使用它。