携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情
在传统的网站设计中，纯粹HTML格式的网页通常被称为“静态网页”，可以包含文本、图像、声音、FLASH动画、客户端脚本和ActiveX控件及JAVA小程序等。
静态网页是网站建设的基础，早期的网站一般都是由静态网页制作的。静态网页是相对于动态网页而言，是指没有后台数据库、不含程序和不可交互的网页。
静态化页面特点
静态网页相对更新起来比较麻烦，适用于一般更新较少的展示型网站。容易误解的是静态页面都是htm这类页面，实际上静态也不是完全静态，他也可以出现各种动态的效果，如GIF格式的动画、FLASH、滚动字幕等。
优点
- 可以公开（即副本可以证明给任何人）。
- 无需网络服务器或应用服务器，可以存储在储存介质中，通过网络浏览器直接访问。
- 网站更安全，HTML页面不会受到网络服务漏洞影响，而且可以减少攻击，防SQL注入。数据库出错时，不影响网站正常访问。
- 不需要编译，所以速度快，节省服务器资源。
- 网址格式友好，搜索引擎容易识别。
缺点
- 内容是固定的，交互性差，内容更新维护复杂。
- 没有自动化的工具，维护大量的静态页面文件是不现实的。
- 无法充分支持用户/客户的需求（外观选择，浏览器的支持，Cookie）。
主流方案：服务端渲染
在有些项目中，我们可能会需要使用到静态页面，比如文章类、或者某些活动页面。当前主流的方案就是服务端渲染：
服务端渲染就是在浏览器请求页面的时候，服务端将需要的HTML文本组件好，并返回给浏览器，这个HTML被浏览器解析之后，无需经过 JavaScript 的解析，即可直接生成出 DOM 树的展示展示中。
优点
-
搜索引擎优化：当搜索引擎爬虫爬取内容时，低级爬虫爬取动态网站时，可能页面是空的，不利于搜索引擎优化。
-
白屏时间更短：由于服务端已经得到了一个HTML文本，浏览器直接进行解析，生成DOM就呈现出来了。而客户端渲染，要先得到空的HTML，在逐步加载执行JavaScript代码，需要分步启动，就可能会出现请求等待白屏。
缺点
-
由于需要许多处理需要在服务器执行，可能会出现兼容性问题。
-
会增加项目的整体复杂度。
-
服务器压力较大。
一个Vue小案例（使用简单的node脚本）
// 步骤 1:创建一个Vue实例
var Vue = require('vue')
var app = new Vue({
render: function (h) {
return h('p', 'hello world')
}
})
// 步骤 2: 创建一个渲染器
var renderer = require('vue-server-renderer').createRenderer()
// 步骤 3: 将 Vue实例 渲染成 HTML
renderer.renderToString(app, function (error, html) {
if (error) throw error
console.log(html)
// => <p server-rendered="true">hello world</p>
})
复制代码你还有什么新想法吗？有的话咱评论区见，欢迎点赞收藏关注，感谢！