VUE基于NUXT的SSR 服务端渲染

Server Side Rendering（服务端渲染）

SSR 目的是为了解决单页面应用的 SEO 的问题，对于一般网站影响不大，但是对于论坛类，内容类网站来说是致命的，搜索引擎无法抓取页面相关内容，也就是用户搜不到此网站的相关信息。

原理

将 html 在服务端渲染，合成完整的 html 文件再输出到浏览器。

适用场景

• 客户端的网络比较慢
• 客户端运行在老的或者直接没有 JavaScript 引擎上

NUXT

作用就是在 node.js 上进一步封装，然后省去我们搭建服务端环境的步骤，只需要遵循这个库的一些规则就能轻松实现 SSR。

可以作为一个 Node.js 应用跑在服务器上，也可以把整站直接编译为静态 HTML。另外这个框架支持自动生成路由，用来写展示型的页面是非常不错的选择。

NUXT 能为我们做什么

• 无需再为了路由划分而烦恼，你只需要按照对应的文件夹层级创建 .vue 文件就行
• 无需考虑数据传输问题，nuxt 会在模板输出之前异步请求数据（需要引入 axios 库），而且对 vuex 有进一步的封装
• 内置了 webpack，省去了配置 webpack 的步骤，nuxt 会根据配置打包对应的文件

安装流程

$ npm install -g vue-cli

$ vue init nuxt/starter <project-name>
$ cd <project-name>
$ npm install

$ npm run dev

Nuxt.js 会监听 pages 目录下的改变，添加新 page 的时候不需要重启服务

Next.js

来自Zeit的团队在React的基础和组件模型上构建了Next.js，同时还提供了一个关键扩展：通过使用名为getInitialProps()的组件生命周期钩子方法，框架能够在服务器上进行初始渲染，如果需要的话，还可以在客户端继续进行渲染。不过这个高级特性是一个很小却功能强大的框架所额外提供的。

Next提供了非常丰富的生态环境，特别是它的example，包含了多种情况下的源码，让学习者很容易搭建起一个多功能的Next框架，客户端有的东西，服务端基本都有。

• webpack的各项配置，Next集成了webpack的很多配置，热更新是必备品，还支持提供next.config.js的方式导入自己定义的配置。
• 你可以使用less、scss、style-in-Component、css等各种样式写法。
• 支持redux、redux-saga、或者不用。
• 各种图片的支持都包含在webpack中了。
• 支持自定义的babelrc配置。
• 对于react的版本的支持也在维护者的维护中不断更新。
• 支持preact。

简单易用，就跟写 PHP 一样一个文件一个页面了，但缺点也很明显，其实它是通过改变正常 React + webpack 的代码书写习惯来绕过前后端同构的坑，所以也引入了一些新的问题：

• 图片等静态文件只能放在 static 目录下，不能通过 require 来引入，也就是没办法通过 webpack 来进行模块化管理，如果各个组件有自身依赖的图片，也只能一股脑放 static 里，也很难实现版本管理控制浏览器缓存。
• 样式同样也没办法通过 webpack 进行模块化管理，只能通过 style 标签嵌入或直接内联。

简单地说，很适合快速搭建简单站点，但*度不高，且带样式或图片的 React 组件无法直接使用，个人看法是一个用*度和通用性来换取易用性的框架。

其他方法

Google 可以正常爬取和渲染一个纯 js 动态生成的网站，上传 sitemap 就可以了。

直接生成静态页面由 CDN 分发。有些新技术还可以在 static gen 同时支持 pwa，比如 gatsbyjs。

掘金是未登录用户使用 SSR，不错的思路。

要分清楚什么时候用 mvvm，mvvm 其实就是 modelview 非常方便定义页面的各种逻辑和改变页面数据，如果是传统的网站，前端没啥逻辑，就没有必要上 mvvm

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持亿速云。