共计 3114 个字符，预计需要花费 8 分钟才能阅读完成。
前言 —-SEO 是由英文 Search Engine Optimization 缩写而来，中文意译为“搜索引擎优化”。SEO 是指通过对网站进行站内优化和修复 (网站 Web 结构调整、网站内容建设、网站代码优化和编码等) 和站外优化，从而提高网站的网站关键词排名以及公司产品的曝光度。通过搜索引擎查找信息是当今网民们寻找网上信息和资源的主要手段。
历史概况：
十年前，几乎所有网站都使用 ASP、Java、PHP 这类做后端渲染，但后来随着 jQuery、Angular、React、Vue 等 JS 框架的崛起，开始转向了前端渲染。从 2014 年起又开始流行了同构渲染，号称是未来，集成了前后端渲染的优点，但转眼间三年过去了，很多当时壮心满满的框架 (rendr、Lazo) 从先驱变成了先烈。同构到底是不是未来? 自己的项目该如何选型? 我想不应该只停留在追求热门和拘泥于固定模式上，忽略了前后端渲染之“争”的“核心点”，关注如何提升“用户体验”。
明确三个概念：「后端渲染」指传统的 ASP、Java 或 PHP 的渲染机制;「前端渲染」指使用 JS 来渲染页面大部分内容，代表是现在流行的 SPA 单页面应用;「同构渲染」指前后端共用 JS，首次渲染时使用 Node.js 来直出 HTML。一般来说同构渲染是介于前后端中的共有部分。
1. 网站的渲染模式 —- 服务端渲染和客户端渲染
1.1 服务端渲染(后端渲染 SSR)
后端渲染 HTML 的情况下，浏览器会直接接收到经过服务器计算之后的呈现给用户的最终的 HTML 字符串，这里的计算就是服务器经过解析存放在服务器端的模板文件来完成的，在这种情况下，浏览器只进行了 HTML 的解析，以及通过操作系统提供的操纵显示器显示内容的系统调用在显示器上把 HTML 所代表的图像显示给用户。
- 好处：前端耗时少（前端只负责将 html 进行展示），利于 SEO
- 坏处：网络传输数据量大，占用（部分、少部分）服务器运算资源，response 出的数据量会（稍）大点，模板改了前端的交互和样式什么的一样得跟着联动修改
1.2 客户端渲染(前端渲染 CSR)——SPA— 单页面应用
前端渲染就是指浏览器会从后端得到一些信息，这些信息或许 angularjs 的模板文件，亦或是 JSON 等各种数据交换格式所包装的数据，甚至是直接的合法的 HTML 字符串。这些形式都不重要，重要的是，将这些信息组织排列形成最终可读的 HTML 字符串是由浏览器来完成的，在形成了 HTML 字符串之后，再进行显示。
- 好处：网络传输数据量小（减少了服务器压力）
- 坏处：前端耗时较多，不利于 SEO
2. 前端渲染遇到的问题 —seo 和首屏问题
SEO 很好理解。由于传统的搜索引擎只会从 HTML 中抓取数据，导致前端渲染的页面无法被抓取。前端渲染常使用的 SPA 会把所有 JS 整体打包，无法忽视的问题就是文件太大，导致渲染前等待很长时间。特别是网速差的时候，让用户等待白屏结束并非一个很好的体验。
2.1 解决前端渲染 SEO 问题
近几年，随之前端 SPA 框架的兴起; 由前后端分离带来的 SEO 问题，相信每个前端攻城狮都有遇到。这里以 Vue 为例来说说解决 SEO 的方法;
2.1.1 vue——SSR
首先 vue2.x 直接提供了一份完整的构建 Vue 服务端渲染。 Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将静态标记 ” 混合 ” 为客户端上完全交互的应用程序。
服务器渲染的 Vue.js 应用程序也可以被认为是 ” 同构 ” 或 ” 通用 ”，因为应用程序的大部分代码都可以在服务器和客户端上运行。
具体的使用指南 —请移步官方文档
2.1.2 vue——Nuxt.js
从头搭建一个服务端渲染的应用是相当复杂的。幸运的是 Nuxt.js 让这一切变得非常简单。Nuxt 是一个基于 Vue 生态的更高层的框架，为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。更酷的是，你甚至可以用它来做为静态站生成器。推荐尝试。
Nuxt.js 是创建 Universal Vue.js 应用程序的框架。
它的主要范围是 UI 渲染，同时抽象出客户端 / 服务器分布。
我们的目标是创建一个足够灵活的框架，以便您可以将其用作主项目库或基于 Node.js 的当前项目。
Nuxt.js 预先设置了使 Vue.js 应用服务器的开发更加愉快的所有配置。
另外，我们还提供另一个名为 nuxt generate 的部署选项。它将构建一个静态生成的 Vue.js 应用程序。我们相信这个选择可能是微软服务开发 Web 应用程序的下一个重要步骤。
作为一个框架，Nuxt.js 提供了很多功能，可以帮助您在客户端和服务器端之间进行开发，如异步数据，中间件，布局等。
以上是 Nuxt.js 的官方介绍，总的来说 Nuxt.js 是一个基于 Vue 的框架，大部分都是 vue 的东西，看一遍例子再研究研究，也是很容易上手的。总体来说是个不错的框架，不需要去配置 webpack 那些繁琐的东西，很大程度上的让 vue-ssr 更加的亲民了。
个人感觉 nuxt 的性价比有点低，其实我建议你自己用 vue-ssr 接口去实现 需要实现的功能可以从 nuxt 里扒这样构建工程的思路更清晰些。
2.2 预渲染的方式 —prerender(解决 SEO, 首屏问题)
由于页面较少，且预渲染相对于 SSR 比较简单，预渲染可以极大的提高网页访问速度。而且配合一些 meat 插件，完全可以满足 SEO 需求。
Prerender 服务需要有 NodeJs 环境支持，如果之前服务器环境没有 NodeJs 需要先进行安装。
在 webpack 的配置如下：
var PrerenderSpaPlugin = require('prerender-spa-plugin')
var webpackConfig = merge(baseWebpackConfig, {
plugins: [
// 这段代码意思是拷贝 static 文件至根目录使得渲染的文件可以找到 js、css
new CopyWebpackPlugin([{from: 'static'}]),
new PrerenderSpaPlugin(
// 将渲染的文件放到 dist 目录下
path.join(__dirname, '../dist'),
// 需要预渲染的路由信息
[ '/','/introduct','/culture','/Chairman','/president','/fund','/news','/honor' ],
{
// 在一定时间后再捕获页面信息，使得页面数据信息加载完成
captureAfterTime: 50000,
// 忽略打包错误
ignoreJSErrors: true,
phantomOptions: '--web-security=false',
maxAttempts: 10,
}
),另：Prerender 需要路由使用 history 模式，使用 hash 模式会导致失效。
通俗的说：预渲染的本质就是在打包的时候通过插件将 js 提前执行一遍，然后再将有内容的 html 放到服务器上，这样爬虫自然可以抓到，首屏的问题也可以得到解决。
你的工作，由 AI 赋能！🔥
还在为文案、脚本卡壳、做视频、写代码、设计图片灵感枯竭而烦恼吗？🤯
板板 AI，你的工作好帮手！
一键生成 各种文案、脚本、图片、视频、代码、报告，轻松应对各种工作 / 营销需求！
现在注册体验，即可获得：
- 🎁 30 积分基础模型余额
- 🎁 3 积分高级模型余额
- 🎁 3 积分绘画余额
还不快来试试？
点击链接，开启你的 AI 创作之旅！>>>https://www.banbanai.cn
板板 AI，让你的工作效果发挥无限可能！ 🚀
