Nuxt3: 强制删除__NUXT_DATA__的一种方式

一、问题描述

环境:Node 18.14.0,Nuxt 3.12.2 with Nitro 2.9.6

后台粉丝提问,能否在Nuxt3的页面中不要生成__NUXT_DATA__,因为里面包含了接口返回的数据,感觉数据暴露并且加大了页面的html内容的大小:

<script type="application/json" id="__NUXT_DATA__" data-ssr="true">
...
</script>

二、解决方案

其实在之前的文章《Nuxt3:探索useFetch是如何做到避免客户端重复请求》提到了__NUXT_DATA__与Nuxt payload有关,所以是不建议将这个机制破坏的,在《How do I remove NUXT data in script tags from html pages in Nuxt.js 3?》一文的讨论中也提到不应该将它删除。

但如果既想要SSR,也真想删了它有没有办法呢?这里想到了一个办法可以尝试一下,那就是在服务端渲染出html的时候,对其进行修改。

这里就要提到Nuxt的生命周期钩子:服务器钩子,一起看一下:

在这里插入图片描述
这里简单做个试验:

通过打印,可以发现__NUXT_DATA__的节点代码就在html.bodyAppend数组中,所以先直接将其设置为空数组:

在这里插入图片描述
运行结果如下:

在这里插入图片描述
可以看到页面上没有再出现__NUXT_DATA__节点,但报了一些js错误,同时在Network中也没有发现重复请求数据接口:

在这里插入图片描述

为了解决上述报错,直接对html.bodyAppend做一点修改:

// server/plugins/modifyHtml.jsexport default defineNitroPlugin((nitroApp) => {nitroApp.hooks.hook('render:html', (html, { event }) => {// html.bodyAppend.push('<hr>由自定义插件追加的内容')html.bodyAppend = ['<script>window.__NUXT__={};window.__NUXT__.config={public:{BASE_URL:"/",BASE_API_URL:"https://xxxx.com"},app:{baseURL:"/",buildId:"dev",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>']})nitroApp.hooks.hook('render:response', (response, { event }) => {// console.log('render:response', response)})
})

在这里插入图片描述

运行结果没有报错,但会有一个新的问题,就是Network会重新请求数据接口:

在这里插入图片描述

但对于SEO来说,爬虫访问页面肯定是能拿到完整的html了,只是在客户端浏览器显示时,会有一种一闪而过的感觉(因为客户端会重新发送请求更新视图)。

以上只是在开发环境下的一种试验,如果真有这种需求,可能还需要进一步完善代码,在生产环境中要多验证,避免产生副作用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/35463.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Core ML 简介:构建简单的图像识别应用程序

在 2017 年的 WWDC 上&#xff0c;苹果发布了许多令人兴奋的框架和 API 供我们开发人员使用。在所有新框架中&#xff0c;最受欢迎的框架之一肯定是Core ML。Core ML 是一个可用于将机器学习模型集成到您的应用程序中的框架。Core ML 最好的部分是您不需要有关神经网络或机器学…

mac配置修改host文件

1command 空格 输入 terminal 选中回车进入终端控制台. command 空格 2 sudo vi /etc/hosts 输入密码,进入vi编辑器修改文件 sudo vi /etc/hosts3修改内容,:wq保存退出,重启项目即可 :wq

linux中Sticky粘滞位

对于一个多人可写的目录&#xff0c;如果设置了sticky&#xff0c;则每个用户仅能删除和改名自己的文件或目录&#xff1b;只能作用在目录上.普通文件设置无意义,且会被linux内核忽略&#xff0c;用户在设置Sticky权限的目录下新建的目录不会自动继承Sticky权限 权限设定方法&a…

自动抓取cpu消耗率高java 线程dump信息

# 设置参数 $DumpDir "C:\gcDump\dump" $CpuThreshold 80 $LogFile "C:\gcDump\log\monitor_log.txt" # 循环监控 Java 进程 while ($true) { # 获取当前时间 $CurrentTime Get-Date -Format "yyyy-MM-dd HH:mm:ss.fff" Write-…

InVEST实践及在生态系统服务供需、固碳、城市热岛、论文写作等实际项目中应用

白老师&#xff08;研究员&#xff09;&#xff1a;长期从事生态系统结构-格局-过程-功能-服务的变化与响应关系等研究工作,重点围绕生物多样性、生态系统服务与价值等&#xff0c;构建生物地球化学模型和评价指标体系&#xff0c;为城市、区域和自然保护区的可持续发展和生态环…

2024年【山东省安全员B证】最新解析及山东省安全员B证操作证考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年【山东省安全员B证】最新解析及山东省安全员B证操作证考试&#xff0c;包含山东省安全员B证最新解析答案和解析及山东省安全员B证操作证考试练习。安全生产模拟考试一点通结合国家山东省安全员B证考试最新大纲及…

一文读懂RSTP流媒体传输原理

什么是流&#xff1f; 流&#xff08;Streaming&#xff09;&#xff1a;近年在Internet上出现的新概念&#xff0c;定义非常广泛&#xff0c;主要是指通过网络传输多媒体数据的技术总称。 流式传输分为两种&#xff1a;顺序流式传输 (Progressive Streaming)和实时流式传输 (R…

Revit插件|建模助手「综合模块」30+个功能全面免费

噢~我的伙计们&#xff0c;快来猜猜是谁快满三岁了&#xff1f;没错&#xff0c;咱们的得力干将——Revit插件「建模助手」&#xff01;这三年里&#xff0c;【综合】模块就像那个超受欢迎的小兄弟&#xff0c;帮了大家大忙。说起来都激动&#xff0c;到今年5月底&#xff0c;它…

【微服务网关——Go令牌桶限流】

1. time/rate限速器使用 令牌桶限流算法rate.NewLimiter(limit,burst)产生一个新的限速器 limit表示每秒产生token数、burst表示最多存token数 Allow判断当前是否可以取到tokenWait阻塞等待直到取到tokenReverse返回等待时间&#xff08;预估的等待时间&#xff09;&#xff0…

如何很好的进入脑机接口行业(水)

了解脑机接口技术&#xff1a; 脑机接口&#xff08;Brain-Machine Interface&#xff0c;BMI&#xff1b;Brain Computer Interface&#xff0c;BCI&#xff09;是在人或动物大脑与外部设备之间创建的直接连接&#xff0c;实现脑与设备的信息交换1。 脑机接口技术的作用机制是…

浅谈业务开发与非业务开发

浅谈业务开发与非业务开发 软件开发业务开发非业务开发工作量的区别 软件开发 在谈及业务开发与非业务开发之前&#xff0c;首先他们都是软件开发&#xff0c;那么软件开发的流程是怎样的呢&#xff1f;我们先来了解一下软件开发的流程。通常情况下软件开发的流程是这样的 在…

python数据分析实训任务二(‘风力风向’)

import numpy as np import matplotlib.pyplot as plt # 数据 labelsnp.array([东风, 东北风, 北风, 西北风, 西风, 西南风, 南风, 东南风]) statsnp.array([2.1, 2, 0, 3, 1.5, 3, 6, 4]) # 将角度转换为弧度 anglesnp.linspace(0, 2*np.pi, len(labels), endpointFalse).toli…

excel实现下拉筛选(超简单)

excel实现下拉筛选 引言1、需求&#xff1a;预警状态下的列 实现下拉筛选2、实现2.1、数据验证2.2、下拉筛选内容2.3、去掉预警状态单元格的下拉筛选 引言 通常&#xff0c;我们会单独新建一张sheet表 专门存每个列的下拉内容。下面我将专门建立一张名为代码表的sheet表来存放…

13.项目拓展

智能网联系统接入平台(简称TSP) 专为解决车联网的复杂挑战而设计。无论是在海量的终端和车机系统接入,复杂网络环境下的消息实时性和可靠性, 还是在项目时间紧、任务重的背景下如何快速实现业务对接,该平台都能提供出色的解决方案。它支持大并发、高可用的消息通信,并能…

光模块市场受益于AI热潮同比增长45%,行业前景看好

近日&#xff0c;市场研究机构YOLE Group在最新的市场报告中指出&#xff0c;AI驱动的光模块市场将出现同比45%的增长。预计至2024年&#xff0c;数据通信领域的人工智能光收发器市场将实现高达45%的同比增长&#xff0c;展现出了强大的市场活力和广阔的发展前景。 光收发器市…

回购注销高管减持,东软集团的“大手笔”有意义吗?

文&#xff1a;互联网江湖 作者&#xff1a;刘致呈 作为老牌软件巨头&#xff0c;东软集团这两年的业绩着实有些不够看。 看财报数据&#xff0c;22年东软集团营收94.66亿&#xff0c;净亏损3.47亿&#xff0c;扣非净利利润-5.30亿。23年&#xff0c;集团营收105.44亿&#x…

煤安防爆手机为什么能在煤矿井下使用

煤安防爆手机之所以能在煤矿井下使用&#xff0c;是因为它们经过特殊设计&#xff0c;符合严格的防爆安全标准&#xff0c;能够防止电火花引发爆炸&#xff0c;同时具备防尘防水、抗冲击等特性&#xff0c;确保在恶劣的煤矿环境中稳定可靠地运行&#xff0c;为工作人员提供安全…

学习笔记(linux高级编程)5

4.chdir chdir ("/home/linux"); "../../" fopen("1.mp4") int chdir(const char *path);// /home/linux 功能: 改变当前程序的工作路径 参数: path:改变到的路径 返回值: 成功返回0 失败返回-1 /home/linux/Desktop/Music "file.tx…

前端 CSS 经典:图层放大的 hover 效果

效果 思路 设置 3 层元素&#xff0c;最上层元素使用 clip-path 裁剪成圆&#xff0c;hover 改变圆大小&#xff0c;添加过渡效果。 实现代码 <!DOCTYPE html> <html lang"en"><head><meta charset"utf-8" /><meta http-eq…

怎么在view销毁的时候 把bitmap recycle

在Android开发中&#xff0c;当一个视图&#xff08;View&#xff09;因为某些原因&#xff08;比如屏幕旋转、配置更改等&#xff09;不再被使用时&#xff0c;应当释放其所占用的资源&#xff0c;尤其是当这些资源是可变的&#xff08;mutable&#xff09;并且占用大量内存时…