前后端分离项目怎么静态化文章类页面?

·  阅读 710
前后端分离项目怎么静态化文章类页面?

携手创作,共同成长!这是我参与「掘金日新计划 · 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>
})
复制代码

你还有什么新想法吗?有的话咱评论区见,欢迎点赞收藏关注,感谢!

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改