quasar ssr 开发网站

前言：使用quasar ssr 开发一个博客网站
个人博客 技术栈 quasar ssr + v-md-editor
已更新该文章— quasar ssr 开发博客网站注意事项

vue中 SSR

Vue.js 是一个用于构建客户端应用的框架。默认情况下，Vue 组件的职责是在浏览器中生成和操作 DOM。然而，Vue 也支持将组件在服务端直接渲染成 HTML 字符串，作为服务端响应返回给浏览器，最后在浏览器端将静态的 HTML“激活”(hydrate) 为能够交互的客户端应用。

一个由服务端渲染的 Vue.js 应用也可以被认为是“同构的”(Isomorphic) 或“通用的”(Universal)，因为应用的大部分代码同时运行在服务端和客户端。

vue官网中对ssr通用的解决方案

quasar开发ssr项目注意事项

水化错误

服务器上渲染的HTML与客户端上渲染的等效HTML不匹配。
如何避免水化问题 ，尽量符合html代码书写规范，不能出现类似于标签包裹问题

预取（PreFetch）功能的使用

简单说一些页面需要获取接口数据渲染页面，那么这个时候无法在服务器阶段获取到完整的html（博客文章页面）同时对浏览器标签动态标题页面获取存在问题。

PreFetch 在未渲染之前 获取数据请求接口，服务器获取并渲染到完整页面。但是服务器无法在未渲染之前读取组件变量，所以使用数据存储 ‘状态容器’ 类似于vuex pinia

官网介绍

获取的数据需要存在于视图组件之外，专用数据存储或“状态容器”中。在服务器上，我们可以在渲染之前预先获取数据并将数据填充到存储中。在我们安装应用程序之前，客户端存储将直接获取服务器状态。

写法( 官网例子)

本质上是使用 状态存储 改变 state 中数据 在vuex 直接使用store

//script setup
<script>
export default {
  preFetch () {
    console.log('running preFetch')
  }
}
</script>


<script setup>....</script>

<!-- some .vue component used as route -->
<template>
  <div>{{ item.title }}</div>
</template>

<script>
import { useStore } from 'vuex'

export default {
  // our hook here
  preFetch ({ store, currentRoute, previousRoute, redirect, ssrContext, urlPath, publicPath }) {
    // fetch data, validate route and optionally redirect to some other route...

    // ssrContext is available only server-side in SSR mode

    // No access to "this" here

    // Return a Promise if you are running an async job
    // Example:
    return store.dispatch('fetchItem', currentRoute.params.id)
  },

  setup () {
    const $store = useStore()

    // display the item from store state.
    const item = computed(() => $store.state.items[this.$route.params.id])

    return { item }
  }
}
</script>

注意点

在对axios配置中 生产环境配置base空 ， 但是预取（PreFetch）功能是在服务器端请求获取数据，不设置base 会导致页面渲染失败 500

// 开发环境app配置
const development = {
  // serverUrl: { base: 'http://127.0.0.1:4000' },
  serverUrl: { base: 'http://42.194.142.171:4000' },
};
// 生产环境app配置
const production = {
  serverUrl: { base: '' },
  //serverUrl: { base: 'https://dlyjc.link/' },
};

export default process.env.NODE_ENV === 'production' ? production : development;

运行网页中右键检测网页源代码 可以看到页面渲染html 说明quasar ssr 成功 并且爬虫引擎也能爬取到正常的html页面 有利于seo
还有就是服务器渲染无法使用本地存储老生常谈的问题啦…