js模板引擎_VueSSRNuxt.js

服务端渲染Server side rendering

概念：什么是服务端渲染，什么是客户端渲染

相对于现在前端开发的前后分离模式，服务端渲染应该是更早时代的产物；

服务端渲染：在早期的时候，由于页面比较简单，前后端分离还没有做的比较完善，所以当时一般页面渲染还是在服务端完成html文件的拼装，然后浏览器接收到这个文件，就可以直接解析展示。

客户端渲染：如今前端页面的复杂性提高，前端已经不再仅仅是普通的页面展示了，现在前端页面功能更加完善，也更加复杂。同时伴随着ajax的兴起，使得现在越来越崇尚前后端分离的开发方式。后端不再提供完整的html页面，而是提供一些API使得前端可以获取需要的json数据，然后前端拿到数据后在前端完成html页面的拼装，然后展示在浏览器上，这就是客户端渲染。

如果你做过后端开发，写过模版引擎，其实这里说的服务端渲染其实就是后端语言的模版引擎，比如java中的jsp,koa中koa-art-template

特性：服务端渲染和客户端渲染的区别

任何框架或开发形式的选型都应该适配特有的需求场景

1、首先先来了解三个专业名词：

(1)SPA：单页面应用：只有一张Web页面的应用，是一种从Web服务器加载的富客户端，单页面跳转仅刷新局部资源，公共资源仅需加载一次，常用于PC端网站，购物等网站。

优点：页面之间切换快，减少了服务器的压力

缺点：首屏打开慢，不利于SEO搜索引擎优化，利用搜索引擎的规则是提高网站在有关搜索引擎的自然排名。

(2)SEO：搜索引擎优化，利用搜索引擎的规则提高网站在有关搜索引擎的自然排名

因为SPA单页面应用，是通过AJAX获取数据，这就难保证我们的页面能被搜索引擎收到，并且有一些搜索引擎不支持js和通过ajax获取数据。那就更不用提SEO了，为了解决这个问题就产生了SSR。

(3)SSR服务端渲染：SSR的出现一定程度上解决了SPA首屏慢的问题，又极大的减少了SPA对于SEO的不利影响。

服务端渲染的优缺点是？

优点：

前端耗时少。因为后端拼接完了html，浏览器只需要直接渲染出来。
有利于SEO。因为在后端有完整的html页面，所以爬虫更容易爬取获得信息，更有利于seo。
无需占用客户端资源。即解析模板的工作完全交由后端来做，客户端只要解析标准的html页面即可，这样对于客户端的资源占用更少，尤其是移动端，也可以更省电。
后端生成静态化文件。即生成缓存片段，这样就可以减少数据库查询浪费的时间了，且对于数据变化不大的页面非常高效。

缺点：

不利于前后端分离，开发效率低。使用服务器端渲染，则无法进行分工合作，则对于前端复杂度高的项目，不利于项目高效开发。另外，如果是服务器端渲染，则前端一般就是写一个静态html文件，然后后端再修改为模板，这样是非常低效的，并且还常常需要前后端共同完成修改的动作；或者是前端直接完成html模板，然后交由后端。另外，如果后端改了模板，前端还需要根据改动的模板再调节css，这样使得前后端联调的时间增加。
占用服务器端资源。即服务器端完成html模板的解析，如果请求较多，会对服务器造成一定的访问压力。而如果使用前端渲染，就是把这些解析的压力分摊了前端，而这里确实完全交给了一个服务器。

客户端渲染的优缺点是？

优点：

前后端分离。前端专注于前端UI，后端专注于api开发，且前端有更多的选择性，而不需要遵循后端特定的模板。
体验更好。比如，我们将网站做成SPA或者部分内容做成SPA，这样，尤其是移动端，可以使体验更接近于原生app。

缺点：

前端响应较慢。如果是客户端渲染，前端还要进行拼接字符串的过程，需要耗费额外的时间，不如服务器端渲染速度快。
不利于SEO。目前比如百度、谷歌的爬虫对于SPA都是不认的，只是记录了一个页面，所以SEO很差。因为服务器端可能没有保存完整的html，而是前端通过js进行dom的拼接，那么爬虫无法爬取信息。除非搜索引擎的seo可以增加对于JavaScript的爬取能力，这才能保证seo。

使用服务器端渲染还是客户端渲染？

还是要根据具体的实际情况进行选择，比如企业级网站，主要功能是展示而没有复杂的交互，并且需要良好的SEO，则这时我们就需要使用服务器端渲染；而类似后台管理页面，交互性比较强，不需要seo的考虑，那么就可以使用客户端渲染。

另外，具体使用何种渲染方法并不是绝对的，比如现在一些网站采用了首屏服务器端渲染，即对于用户最开始打开的那个页面采用的是服务器端渲染，这样就保证了渲染速度，而其他的页面采用客户端渲染，这样就完成了前后端分离。

推荐链接?：https://www.cnblogs.com/muzishijie/p/11198315.html

总结：

在你的项目SEO优先级较高，前端工程复杂度低的情况下应该采用SSR架构开发；相反则应该尽量选择客户端渲染

开发：背景介绍完毕我们开始进入正题开始开发

一·开发技术背景学习

推荐链接? 1:nuxtjs官网：https://www.nuxtjs.cn/guide/installation

推荐链接? 2:Vue-SSR官网：https://ssr.vuejs.org/zh/guide/universal.html

这里建议优先学习 Vue-SSR的一些代码书写背景，但不需要从Vue-SSR官网中的案例进行撸代码，只需要知道注意事项以及为什么即可，这时再切到nuxt中进行正式开发；

比如：

其次也不要全盘吞下Vue-SSR官网的所有内容，因为与nuxt.js的设计是有出入的；在Vue-SSR官网中作者只是阐述了基于 Vue实现SSR的基础的实现，并不具备足够的成熟的工程化落地经验；所以还是要以nuxt文档为主，比如在 nuxt中的默认路由是由框架自动生成的，不需要开发者去手动配置等；

二·安装等前置条件执行：

1.首先根据官方文档指引进行安装

2.选择配置项并初始化工程

三·调试 run dev

1.我在这里偷懒直接采用了官方介绍中间件的demo

下载链接?：https://github.com/nuxt/example-auth0

2.红色箭头标注的是项目预览地址

该页是浏览器打开后的效果图；可以看到我在上文中index.vue文件中下方写到了 hi~ 文本，并用nuxt-link>标签进行包裹；这是Nuxt推荐的路由方式；相应的我们应在 /auth/sayhi 目录下写下对应的文件

这是click hi~ 之后所进入到了http://localhost:49322/auth/sayhi 页面；

至此，我们基础的安装、运行、调试已经ok

四·文件目录结构

1.同样，需要参照官方文档指引，来搞清楚整个工程结构及各模块功能

2.这里推荐优先搞懂中间件目录以及页面目录

中间件目录相当于相应页面的路由守卫方法

至此，基础的基于Nuxt的ssr前端工程落地开发调试阶段已经完成；

部署：如何部署SSR项目

部署文档

https://www.jianshu.com/p/2b1510e92a46

PM2-node进程管理程序

https://www.cnblogs.com/wangcp-2014/p/10874417.html

一·连接至目标服务器

1.SSR顾名思义，是要将我们开发好的前端代码 push 到服务器的；第一步就是要连接到目标服务器

二·将开发好的前端代码push到服务器并在服务器上进行工程的初始化并启动

push形式分两种，一种是将代码打包后push上去，另外一种是将整个工程push上去，但需要注意的是都要将node_modus依赖包删除掉，并在服务器上进行工程的初始化并启动

结尾：至此基于Vue-SSR-Nuxt.js的入门介绍已经完毕；

虽然本文写的不够深入，本文主要是带领读者进入Nuxt的基础开发，想Nuxt涉及到的许多原理是基于服务端开发的，究其原理就像模版引擎，如果撸过服务端代码的小伙伴一定不会陌生；

如果你觉得本文对你对SSR的了解有所帮助

请点赞、关注、转发、收藏吧，你的支持是博主前进的动力！

⬇️ 原文链接 ⬇️