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` 时的错误案例。

<!-- more -->

## 小科普：什么是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的一个错误示例

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

## 赞助请求

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

<!-- 文章内嵌广告位 -->
<div class="article-ads"></div>

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