请问 Nuxt3 服务端首次渲染返回时间过长 这是为什么呢?

新手上路,请多包涵

Nuxt3.6.1 首次服务端渲染返回页面内容这段TTFB时间很长是怎么回事呢?
首页接口基本上都使用了lazy 还是要4,5s左右
因为部署后和本地启动,都是在4,5s左右,猜测是Nuxt框架提供的内置服务端渲染花费的时间
image.png
试着进行打包优化 gzip 压缩和替换比较大的依赖,只减少了FCP的时间
image.png
服务器返回构建的html模板应该是在FCP之前,性能测试这里也是提示服务器返回有4s左右的时间
image.png
image.png
目前知道接口少的页面会加载更快,但是前后端分离,服务端首次渲染这段获取数据的时间不知道如何具体查看

琢磨几天了,希望大佬们帮忙看看,非常感谢。

阅读 2.4k
avatarAI BotBETA

你好,我看到你在询问关于 Nuxt3 首次服务端渲染(SSR)时间过长的问题。这个问题可能由多个因素导致,我会尽量提供一些可能的原因和解决方案。

  1. 接口数据获取时间过长:从你的截图来看,页面在服务器返回构建的html模板之前,有一个4秒左右的延迟。这个时间可能是由于你的接口调用的数据获取时间过长导致的。在 SSR 过程中,需要等待所有接口调用完成才能开始渲染页面,因此如果接口数据获取时间过长,会导致 SSR 时间增加。你可以尝试优化你的数据获取逻辑,例如使用缓存、减少数据获取的次数等。
  2. 依赖包过大:你已经尝试过使用 gzip 压缩和替换比较大的依赖包来减少加载时间,但是这只是减少了 FCP(First Contentful Paint)的时间,而对服务器返回构建的html模板的时间没有影响。你可能需要进一步检查你的项目依赖,找出那些不必要的或者过大的依赖包,并尝试替换或者移除它们。
  3. 服务器性能问题:服务器性能问题也可能导致 SSR 时间过长。你可以尝试升级你的服务器硬件或者优化你的服务器配置来提高性能。
  4. useFetch 配置问题:你已经提到,或许是你的 useFetch 配置存在问题。你可以检查一下你的 useFetch 配置,确保它们是正确和高效的。例如,你可能需要设置超时时间、重试次数等参数来确保接口调用不会因为等待过长时间而阻塞 SSR。

以上是一些可能的原因和解决方案,希望能对你有所帮助。如果你能提供更多关于你的项目的信息,我可能能提供更具体的建议。

1 个回答

首先要排除服务器本身的问题:

  1. 上传一个静态 HTML,测试打开时间
  2. 创建一个什么也没有的空白 nuxt 项目,测试打开时间

如果上面的测试没问题,就要检查 SSR 阶段网络请求的耗时。即使没有别的手段,用 JS 记录开始时间结束时间总是可以的,然后就输出到页面中不就能看到了。

最后,如果是首页这种用户身份无关的页面,可以考虑预渲染。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题