由于NEXT_DATA元素的DOM大小变得很大,影响了性能。有谁能帮我把NEXT_DATA从DOM中删除吗?我在Next Js中使用完整的服务器端渲染和动态路由。
kkbh8khc1#
**TLDR:**如果您想(/可以)删除__NEXT_DATA__脚本标记,Reaction将无法水化。您可以对页面中的数据进行硬编码,也可以尝试减少从getServerSideProps返回的pageProps有效负载。
__NEXT_DATA__
getServerSideProps
pageProps
我最近也遇到了这个问题,我问自己,为什么需要将内容包括在HTML中两次。1.作为内容本身-当您的NextJS呈现适当的HTML并将其发送到客户端时1.作为<script>标签中的JSON-这是因为客户端需要再水化。
<script>
revalidate
1.这里有一个GitHub链接,其中包含Next中的相关讨论,您可能会感兴趣。1.Blog post about reducing the size of __NEXT_DATA__-由Liran Cohen。
3ks5zfa02#
要从静态网站的所有页面中删除恢复消重数据数据regex: <script id="__NEXT_DATA__((.|n)*)script>,请在构建完成后运行以下命令:find out -name '*.html' | xargs perl -0777 -pi -e 's/<script id="__NEXT_DATA__.*?script>//sg;'
regex: <script id="__NEXT_DATA__((.|n)*)script>
find out -name '*.html' | xargs perl -0777 -pi -e 's/<script id="__NEXT_DATA__.*?script>//sg;'
vfh0ocws3#
您可以这样做以不显示NEXT_DATA,导出常量配置={unstant_runtime JS:FALSE,};但是所有的js功能都不能在前台工作。
3条答案
按热度按时间kkbh8khc1#
**TLDR:**如果您想(/可以)删除
__NEXT_DATA__
脚本标记,Reaction将无法水化。您可以对页面中的数据进行硬编码,也可以尝试减少从getServerSideProps
返回的pageProps
有效负载。我最近也遇到了这个问题,我问自己,为什么需要将内容包括在HTML中两次。
1.作为内容本身-当您的NextJS呈现适当的HTML并将其发送到客户端时
1.作为
<script>
标签中的JSON-这是因为客户端需要再水化。解决方案
revalidate
选项,使用静态数据抓取背后的想法是内容不应该改变(可能永远不会改变)。那么,在这种情况下,为什么我们不能将数据硬编码在页面本身中呢?当然,这样做的缺点是,必须手动将其全部写出来/将所需的内容下载到某个JSON/对象,然后像这样在页面中使用它。阅读
1.这里有一个GitHub链接,其中包含Next中的相关讨论,您可能会感兴趣。
1.Blog post about reducing the size of
__NEXT_DATA__
-由Liran Cohen。3ks5zfa02#
要从静态网站的所有页面中删除恢复消重数据数据
regex: <script id="__NEXT_DATA__((.|n)*)script>
,请在构建完成后运行以下命令:find out -name '*.html' | xargs perl -0777 -pi -e 's/<script id="__NEXT_DATA__.*?script>//sg;'
vfh0ocws3#
您可以这样做以不显示NEXT_DATA,
导出常量配置={unstant_runtime JS:FALSE,};
但是所有的js功能都不能在前台工作。