2024-08-09
温故知新
00
请注意,本文编写于 61 天前,最后修改于 61 天前,其中某些信息可能已经过时。

目录

简介
小科普:什么是SSR?
SSR 的工作原理
SSR 的优点
SSR 的缺点
使用Nuxt-SSR的一个错误示例
错误代码示例
正确代码
如何检查SSR是否正常?
错误总结
易错点总结
赞助请求

简介

Nuxt 是新一代 Vue 框架,在海外市场已经有了一定的使用率,其官网说明是:

Nuxt 是一个开源框架,使 Web 开发变得直观且强大。 充满信心地创建高性能和生产级的全栈 Web 应用程序和网站。

英文原文:Nuxt is an open source framework that makes web development intuitive and powerful. Create performant and production-grade full-stack web apps and websites with confidence.

Nuxt 被前端圈视为对标 Next 的 Vue 框架,Next 是基于 React 的框架。问:Agauler被排挤了?

Nuxt3官网:https://nuxt.com/

使用 Nuxt 或 Next ,想必很大原因是想要使用 SSR 功能,但是你用对了吗?

  • 本文记一个老狗使用Nuxt SSR 时的错误案例。

小科普:什么是SSR?

SSR,全称:Server-Side Rendering,翻译:服务端渲染,是一种在服务器端生成网页内容的技术。与客户端渲染(Client-Side Rendering)相比,SSR 在服务器端生成 HTML 页面,然后将完整的页面发送到客户端进行显示。这个过程在用户请求页面时立即在服务器端完成。

SSR 的工作原理

当用户请求一个网页时,传统的客户端渲染方式通常会先发送一个基本的 HTML 框架,然后在客户端通过 JavaScript 加载和渲染动态内容。相比之下,SSR 直接在服务器端生成完整的 HTML 页面,包括所有动态内容,再将其发送到客户端。

SSR 的优点

  1. 更快的首屏渲染:由于页面内容在服务器端已经生成并且随同 HTML 一起发送,浏览器在加载页面时不需要等待 JavaScript 的执行就可以显示内容,这极大地提高了页面的首屏加载速度,尤其在网络较慢或设备性能较低的情况下。
  2. SEO 友好:搜索引擎爬虫通常会优先抓取静态 HTML 内容。通过 SSR,页面在服务器端就生成了完整的 HTML,这使得搜索引擎更容易抓取和索引页面内容,提升网站在搜索结果中的表现。
  3. 更好的社交媒体分享效果:许多社交媒体平台会抓取页面的 HTML 来生成分享预览。通过 SSR,可以确保这些平台获取到完整的页面内容,从而提供更好的分享效果。

SSR 的缺点

  1. 服务器负载增加:SSR 需要在服务器端生成完整的页面,这增加了服务器的计算负担,尤其是在访问量大的情况下。
  2. 开发复杂度提高:SSR 涉及服务器和客户端的共同开发,增加了代码的复杂性。开发者需要在服务器和客户端之间保持状态同步,并处理不同环境中的潜在问题。
  3. 可能的延迟:由于需要在服务器端生成页面,SSR 可能会导致整体响应时间增加,尤其是在网络延迟较高或服务器性能不佳的情况下。

总结:SSR 在提高页面加载速度、提升 SEO 和社交分享效果等方面具有明显优势,尤其适用于内容驱动的网站。然而,它也伴随着开发和部署的复杂性,需要权衡服务器负载和开发成本。

使用Nuxt-SSR的一个错误示例

简而言之,若想要使用 NuxtSSR 功能,则要谨慎使用 Vue 的生命周期函数,尤其是比较常用的 onMouted

错误代码示例

ts
// 查询数据 const softs = ref<SoftWare[]>(); const allSofts = ref<SoftWare[]>(); onMounted(() => { $fetch("/softs", { method: "POST", }).then((res) => { softs.value = res; allSofts.value = res; }); });

正确代码

ts
const softs = ref<SoftWare[]>(); const allSofts = ref<SoftWare[]>(); allSofts.value = await $fetch("/softs", { method: "POST" }); softs.value = allSofts.value;

看了正确代码和错误代码,你能想出错误代码为什么错吗?如果你猜不出来,想必你对 Vue 或 SSR 还没有很好的理解,先看看如何检查SSR是否正常?

如何检查SSR是否正常?

根据 SSR 的定义,我们可以找到一个简单的校验 SSR 是否生效的方法:

  • 在浏览器中右键--查看网页源码,如果代码结构与网页结构几乎一致,则可以认为SSR已正常生效,反之则可能没生效。

注意:不是在F12中看的Element源码哦!如果F12中的代码和右键的代码相同,也可以认为SSR已经生效

一个常见的例子,使用 v-for 生成的多个元素,如:

html
<ItemCard v-for="item in items" :key="item.id" :item="item" ></ItemCard>

这段代码,在渲染完成后(SSR后),页面显示了几个 ItemCard 内容,则查看网页源码中就应该有几个 ItemCard 相关的 div。如果能对应起来,则说明 SSR 已生效。

现在你能想到为什么使用 onMounted 会有问题了吗?onMounted 是什么时候会执行的钩子函数?

错误总结

不查阅任何资料,以基础知识思考,老狗认为错误代码的问题:主要是因为 onMounted 钩子仅在客户端执行,导致在服务端渲染期间没有及时获取数据,无法完成 SSR 渲染。

另外,正确代码中的 await 也很关键,在 SSR 模式下,页面的初始渲染是在服务端完成的,然后将渲染后的 HTML 返回给客户端。这意味着在服务端渲染过程中,所有需要的数据应该在页面渲染之前获取到。如果数据是通过异步请求获取的,那么在服务端渲染期间,这些数据也应该是同步获取并渲染的。

易错点总结

基于此次问题,老狗总结了几个容易犯且会导致 SSR 失效的细节:

  1. 避免直接执行客户端专属代码:前端开发中常用的 windowdocument 等常用的浏览器专属对象,要避免在编译过程中直接使用这些对象,否则可能会导致 SSR 失效,因此如果你需要使用这类对象时,建议放在Vue的客户端钩子中,比如上面提到的 onMounted,如:onMounted(() => { window.addEventListener("scroll", handleScroll);});
  2. 避免在客户端钩子中获取页面渲染所需数据,即onMounted这类钩子。
  3. 避免异步调用:如果在 SSR 中异步数据没有正确处理,可能会导致页面在服务端渲染时缺乏必要的数据,进而出现不完整的 HTML
  4. 注意状态管理:在 SSR 中,因为状态管理在服务端和客户端都可能需要使用,所以需要确保在服务端渲染时,状态被正确初始化,并且在客户端重新挂载时,状态不会被覆盖。Nuxt3 提供了 SSR 友好的状态管理工具,如 useState
  5. 注意配置CSS样式:要按照 Nuxt 的配置方式,正确配置css相关样式表,避免在进行 SSR 时导致页面异常。

赞助请求

建站因为热爱,生活需要Money,本站非常需要屏幕前的大佬动动您发财的小手,点击一次以示鼓励,祝您生活愉快!

PS:如果看不到广告,可能是网络原因或被拦截了。再次祝您生活愉快~~ 🥰

如果对你有用的话,可以打赏哦
打赏
ali pay
wechat pay

本文作者:DingDangDog

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!