Nuxt的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 的优点

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

SSR 的缺点

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

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

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

简而言之，若想要使用 Nuxt 的 SSR 功能，则要谨慎使用 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 失效的细节：

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

赞助请求

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

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

目录

简介