VUE基于NUXT的SSR 服务端渲染
ServerSideRendering(服务端渲染)
SSR目的是为了解决单页面应用的SEO的问题,对于一般网站影响不大,但是对于论坛类,内容类网站来说是致命的,搜索引擎无法抓取页面相关内容,也就是用户搜不到此网站的相关信息。
原理
将html在服务端渲染,合成完整的html文件再输出到浏览器。
适用场景
- 客户端的网络比较慢
- 客户端运行在老的或者直接没有JavaScript引擎上
NUXT
作用就是在node.js上进一步封装,然后省去我们搭建服务端环境的步骤,只需要遵循这个库的一些规则就能轻松实现SSR。
可以作为一个Node.js应用跑在服务器上,也可以把整站直接编译为静态HTML。另外这个框架支持自动生成路由,用来写展示型的页面是非常不错的选择。
NUXT能为我们做什么
- 无需再为了路由划分而烦恼,你只需要按照对应的文件夹层级创建.vue文件就行
- 无需考虑数据传输问题,nuxt会在模板输出之前异步请求数据(需要引入axios库),而且对vuex有进一步的封装
- 内置了webpack,省去了配置webpack的步骤,nuxt会根据配置打包对应的文件
安装流程
$npminstall-gvue-cli $vueinitnuxt/starter$cd $npminstall $npmrundev
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分发。有些新技术还可以在staticgen同时支持pwa,比如gatsbyjs。
掘金是未登录用户使用SSR,不错的思路。
要分清楚什么时候用mvvm,mvvm其实就是modelview非常方便定义页面的各种逻辑和改变页面数据,如果是传统的网站,前端没啥逻辑,就没有必要上mvvm
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。