1. SSR 完全指南
在Vue 2.3 后发布了一份完整的构建 Vue 服务端渲染应用的指南。这份指南非常深入，适合已经熟悉 Vue、webpack 和 Node.js 开发的开发者阅读。请移步 v2.ssr.vuejs.org。
npm install vue vue-server-renderer --save
const Vue = require('vue');
const server = require('express')();
const template = require('fs').readFileSync('./index.template.html', 'utf-8');
const renderer = require('vue-server-renderer').createRenderer({
template,
});
const context = {
title: 'vue ssr',
metas: `
<meta name="keyword" content="vue,ssr">
<meta name="description" content="vue srr demo">
`,
};
server.get('*', (req, res) => {
const app = new Vue({
data: {
url: req.url
},
template: `<div>访问的 URL 是： {{ url }}</div>`,
});
renderer.renderToString(app, context, (err, html) => {
console.log(html);
if (err) {
res.status(500).end('Internal Server Error')
return;
}
res.end(html);
});
})
server.listen(8080);
2. Nuxt.js
从头搭建一个服务端渲染的应用是相当复杂的。有一个优秀的社区项目 Nuxt.js ，Nuxt 是一个基于 Vue 生态的更高层的框架，为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。更酷的是，你甚至可以用它来做为静态站生成器。
2.1 Nuxt3的简介
Nuxt3是基于Vue3发布的SSR框架，也是Vue全家桶系列的一员。你需要先知道两个概念。
- SPA应用：也就是单页应用，这些多是在客户端的应用，不能进行SEO优化（搜索引擎优化）。
- SSR应用：在服务端进行渲染，渲染完成后返回给客户端，每个页面有独立的URL，对SEO友好。
所以如果你开发的应用是企业网站、商品展示 、博客这类型的展示型网站，就需要使用搜索引擎喜欢的SSR应用。当我们明白这两个概念后，再来看Nuxt3的使命。因为Vue开发的应用默认是单页应用（SPA应用），但如果你想针对于搜索优化，就需要使用Vue的SSR模式开发，而Nuxt3就是Vue的SSR开发的框架。
技术胖-Nuxt3从零到实战手把手 免费视频图文教程 (jspang.com)
3. Quasar Framework SSR + PWA
Quasar Framework 可以通过其一流的构建系统、合理的配置和开发者扩展性生成 (可选地和 PWA 互通的) SSR 应用。你可以在服务端挑选执行超过上百款遵循“Material Design 2.0”的组件，并在浏览器端可用。你甚至可以管理网站的 <meta> 标签。Quasar 是一个基于 Node.js 和 webpack 的开发环境，它可以通过一套代码完成 SPA、PWA、SSR、Electron、Capacitor 和 Cordova 应用的快速开发。
3.1 Quasar介绍
Quasar（发音为/kweɪ.zɑɹ/)是MIT许可的基于Vue.js的开源框架，允许Web开发人员快速创建多种类型的responsive++网站/应用：
- SPAs (单页应用)
- SSR (服务器端渲染的应用) (+可选的PWA客户端接管)
- PWA（渐进式网页应用）
- BEX (浏览器扩展)
- 通过Cordova或Capacitor构建移动APP（Android、iOS…）
- 多平台桌面应用（使用Electron）
Quasar的座右铭是：编写代码一次并同时将其部署为网站、移动应用和/或Electron应用。所有这些应用都用一个代码库，通过使用最先进的CLI并辅以精心编写的、性能导向的Quasar Web组件，帮助您以最短时间开发应用。
