## 简介

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的一个错误示例

简而言之，若想要使用 `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：如果看不到广告，可能是网络原因或被拦截了。再次祝您生活愉快~~ 🥰

Nuxt的SSR你用对了吗？

## 简介

在使用 `Nginx` 时，如果你的 `Vue.js` 应用使用 `history` 模式了 `Vue Router`，`Nginx` 需要进行一些特别的配置，以确保前端路由能正确处理而不会返回404错误。



## 配置示例
下面是一个基本的配置示例，假设你的应用已经构建到 `/var/www/html/my-app` 目录：

```nginx
server {
    listen 80;
    server_name yourdomain.com;  # 替换为你的域名或IP

    root /var/www/html/my-app;  # 替换为你的应用构建目录
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # 可选：配置日志文件
    access_log /var/log/nginx/my-app_access.log;
    error_log /var/log/nginx/my-app_error.log;
}
```

### 解释：

- `root /var/www/html/my-app;`：设置你的应用目录。
- `try_files $uri $uri/ /index.html;`：尝试查找请求的文件或目录，如果找不到，则返回 `index.html`。这保证了 `Vue Router` 的 `history` 模式可以正常工作，所有路由请求都会重定向到 index.html，从而由前端路由处理。

Vue项目的Nginx部署配置

原推链接：https://x.com/rei_kamiki/status/1819888313421177024

> 本图为4K优化后版本，文件较大，请耐心等待。

![image](https://images.oldmoon.top/images/beauty/1722766912.png)

20240804欣赏：神木老师好美

## 简介

使用 Nuxt3 开发网站时，想要使用是sqlite作为数据存储方案，Nuxt3的服务端开发时基于 Nitro 的，而 Nitro 又默认支持 sqlite，这不是巧了吗，一拍即合开搞。

结果在写数据更新（`UPDATE`）的SQL时，出现了意料之外的问题，特此记录。



## 代码如下

以下代码就是为了动态拼装SQL，所以写了很多判断，并最终拼接到执行的申请了中，一切看似正常，但执行时却出现了报错，报错信息请向下看。

```ts
export default defineEventHandler(async (event) => {
  const body = await readBody(event);
  const db = useDatabase();

  if (!body.oldname) {
    return "not find oldname";
  }
  let updatesql = "";
  let fileNumber = 0;
  if (body.name) {
    fileNumber += 1;
    updatesql += `name='${body.name}'`;
  }
  if (body.author) {
    if (fileNumber >= 1) {
      updatesql += `,`;
    }
    fileNumber += 1;
    updatesql += `author='${body.author}'`;
  }
  if (body.avatar) {
    if (fileNumber >= 1) {
      updatesql += `,`;
    }
    fileNumber += 1;
    updatesql += `avatar='${body.avatar}'`;
  }
  // ···省略部分重复带啊吗
  const sql = `UPDATE softs ${updatesql} WHERE name = '${body.oldname}'`;
  await db.sql`UPDATE softs SET ${updatesql} WHERE name='${body.oldname}'`;
  return "ok";
});

```

## 报错

```
 ERROR  [nuxt] [request error] [unhandled] [500] near "?": syntax error
  at Database.prepare (E:\Code\github-soft\node_modules\.pnpm\better-sqlite3@11.1.2\node_modules\better-sqlite3\lib\methods\wrappers.js:6:21)
  at Object.prepare (/E:/Code/github-soft/node_modules/.pnpm/db0@0.1.4_better-sqlite3@11.1.2/node_modules/db0/connectors/better-sqlite3.mjs:24:29)
  at Object.sql (/E:/Code/github-soft/node_modules/.pnpm/db0@0.1.4_better-sqlite3@11.1.2/node_modules/db0/dist/index.mjs:39:37)
  at Object.handler (E:\Code\github-soft\server\api\updatesoft.ts:64:1)
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
  at async /E:/Code/github-soft/node_modules/.pnpm/h3@1.12.0/node_modules/h3/dist/index.mjs:1975:19
  at async Object.callAsync (/E:/Code/github-soft/node_modules/.pnpm/unctx@2.3.1/node_modules/unctx/dist/index.mjs:72:16)
  at async Server.toNodeHandle (/E:/Code/github-soft/node_modules/.pnpm/h3@1.12.0/node_modules/h3/dist/index.mjs:2266:7)
```

可以看到报错信息并没有什么有价值的玩意，但老狗大概能猜出了这是 SQL 的问题，关键是问题在哪呢？不明觉厉。

## 问题排查

想要排查该问题，我的思路就是找到 SQL 中的问题并解决，随便点进报错的内容中`E:\Code\github-soft\node_modules\.pnpm\better-sqlite3@11.1.2\node_modules\better-sqlite3\lib\methods\wrappers.js:6:21`，发现这里参数只有一个sql，代码如下：

```ts
exports.prepare = function prepare(sql) {
    return this[cppdb].prepare(sql, this, false);
};
```
所以在这里加个日志，即：

```ts
exports.prepare = function prepare(sql) {
    console.log(sql)
    return this[cppdb].prepare(sql, this, false);
};
```

随后发现，这里的日志显示的sql为：`UPDATE softs SET ? WHERE name='?'`，老狗直接黑人号？？？

问题果然发生在SQL上，看起来 `better-sqlite3` 将`db.sql`后面的计算属性作为了SQL参数位来预置SQL，但我的计算属性并不只有参数，因此导致了问题。

## 临时解决

发现了问题后，就是解决了，办法就是计算属性只用在参数为上，那么怎么改呢？挠头。。。

> PS：解决的过程无力吐槽，最终暂时用下面的代码能跑了，不要说这段代码有多烂，我知道！

```ts
export default defineEventHandler(async (event) => {
  const body = await readBody(event);
  const db = useDatabase();

  if (!body.oldname) {
    return "not find oldname";
  }
  if (body.name) {
    await db.sql`UPDATE softs SET name=${body.name} WHERE name=${body.oldname}`;
  }
  if (body.author) {
    await db.sql`UPDATE softs SET author=${body.author} WHERE name=${body.oldname}`;
  }
  if (body.avatar) {
    await db.sql`UPDATE softs SET avatar=${body.avatar} WHERE name=${body.oldname}`;
  }
  if (body.desc) {
    await db.sql`UPDATE softs SET desc=${body.desc} WHERE name=${body.oldname}`;
  }
  if (body.github) {
    await db.sql`UPDATE softs SET github=${body.github} WHERE name=${body.oldname}`;
  }
  if (body.tags) {
    await db.sql`UPDATE softs SET tags=${body.tags} WHERE name=${body.oldname}`;
  }
  if (body.files) {
    await db.sql`UPDATE softs SET files=${body.files} WHERE name=${body.oldname}`;
  }
  if (body.show) {
    await db.sql`UPDATE softs SET show=${body.show} WHERE name=${body.oldname}`;
  }
  return "ok";
});

```

[nuxt] [request error] [unhandled] [500] near "?": syntax error

原帖链接：https://www.instagram.com/p/C993ZbnPEp9/?utm_source=ig_web_copy_link

![image](https://images.oldmoon.top/images/beauty/1722587883.jpg)


![image](https://images.oldmoon.top/images/beauty/1722587957.jpg)

![image](https://images.oldmoon.top/images/beauty/1722587961.jpg)

![image](https://images.oldmoon.top/images/beauty/1722587970.jpg)

![image](https://images.oldmoon.top/images/beauty/1722587974.jpg)

20240802欣赏：GEM好飒

twitter:card

twitter:title

https://images.oldmoon.top/images/dingdangdog/oldmoon.png

twitter:image

努力做一只帅气、有才、豁达的老狗！

twitter:description