VUE基于NUXT的SSR 服务端渲染


Posted in Javascript onNovember 30, 2018

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 模拟点击广告
Jan 02 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
Jun 05 Javascript
js的flv视频播放器插件使用方法
Jun 23 Javascript
jQuery实现的多级下拉菜单效果代码
Aug 24 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
May 31 Javascript
JS中的进制转换以及作用
Jun 26 Javascript
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
结合mint-ui移动端下拉加载实践方法总结
Nov 08 Javascript
关于laydate.js加载laydate.css路径错误问题解决
Dec 27 Javascript
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
微信小程序接入vant Weapp组件的详细步骤
Oct 28 Javascript
Nuxt.js开启SSR渲染的教程详解
Nov 30 #Javascript
基于JavaScript实现每日签到打卡轨迹功能
Nov 29 #Javascript
Next.js项目实战踩坑指南(笔记)
Nov 29 #Javascript
js canvas实现二维码和图片合成的海报
Nov 19 #Javascript
详解@angular/cli 改变默认启动端口两种方式
Nov 29 #Javascript
js实现每日签到功能
Nov 29 #Javascript
Vue.js的复用组件开发流程完整记录
Nov 29 #Javascript
You might like
海河写的 Discuz论坛帖子调用js的php代码
2007/08/23 PHP
php下目前为目最全的CURL中文说明
2010/08/01 PHP
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
php判断文件上传类型及过滤不安全数据的方法
2014/12/17 PHP
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
基于jquery的回到页面顶部按钮
2011/06/27 Javascript
input链接页面、打开新网页等等的具体实现
2013/12/30 Javascript
js使用ajax读博客rss示例
2014/05/06 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
js实现鼠标滑过文字链接色彩变化的效果
2015/05/06 Javascript
js限制文本框只能输入中文的方法
2015/08/11 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
2018/01/22 Javascript
解决vue中对象属性改变视图不更新的问题
2018/02/23 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
2018/11/12 jQuery
JS实现继承的几种常用方式示例
2019/06/22 Javascript
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
支付宝小程序实现省市区三级联动
2020/06/21 Javascript
python音频处理用到的操作的示例代码
2017/10/27 Python
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
Python面向对象程序设计类的封装与继承用法示例
2019/04/12 Python
Jupyter notebook 启动闪退问题的解决
2020/04/13 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
上班离岗检讨书
2014/01/27 职场文书
化工操作工岗位职责
2014/04/29 职场文书
英语教育专业毕业生求职信
2014/08/28 职场文书
员工培训协议书
2014/09/15 职场文书
授权收款委托书范本
2014/10/10 职场文书
教师年度个人总结
2015/02/11 职场文书
单位推荐信范文
2015/03/27 职场文书