DingMing

丁大铭的个人空间,用来分享一些前端小技巧,默默成长吧,哈哈

NUXT.JS原理简述

  |  
 阅读次数

1.那服务器端渲染到底有什么好处呢?

主要的原因时SPA(单页应用)不利于搜索引擎的SEO操作,Nuxt.js适合作新闻、博客、电影、咨询这样的需要搜索引擎提供流量的项目。如果你要作移动端的项目,就没必要使用这个框架了。

2.什么是SSR?

SPA虽然给服务器减轻了压力,但是也是有缺点的:

  1. 首屏渲染时间比较长:必须等待JavaScript加载完毕,并且执行完毕,才能渲染出首屏。
  2. SEO不友好:爬虫只能拿到一个div元素,认为页面是空的,不利于SEO

为了解决如上两个问题,出现了SSR解决方案,后端渲染出首屏的DOM结构返回,前端拿到内容带上首屏,后续的页面操作,再用单页面路由和渲染,称之为服务端渲染(SSR)。

  1. 用户打开浏览器,输入网址请求到Node.js

  2. 部署在Node.js的应用Nuxt.js接收浏览器请求,并请求服务端获取数据

  3. Nuxt.js获取到数据后进行服务端渲染

  4. Nuxt.js将html网页响应给浏览器

Nuxt.js的特点(优点):

  • 基于 Vue.js
  • 自动代码分层
  • 服务端渲染
  • 强大的路由功能,支持异步数据
  • 静态文件服务
  • ES6/ES7 语法支持
  • 打包和压缩 JS 和 CSS
  • HTML头部标签管理
  • 本地开发支持热加载
  • 集成ESLint
  • 支持各种样式预处理器: SASS、LESS、 Stylus等等
  • 支持HTTP/2推送