大家好，关于vue服务器端渲染很多朋友都还不太明白，今天小编就来为大家分享关于服务端渲染SSR的知识，希望对各位有所帮助！
一、Vue和react哪个用的多
React和Vue已经是经常上PK台被惊醒比较的前端框架，我这边从以下几个方面对两者做一个比较，如果其中有理解不当的地方，请大家指正。
1、学习曲线
React陡峭的学习曲线是一直被诟病的一点。Vue标榜的是一个渐进式的J*aScript框架，大部分开发者普遍会认为Vue的学习曲线低于React，并且相较于React有更丰富的中文支持（主要是Vue开发者是中国人，导致了很多我国的程序员都会关注此框架）。但是，随着学习内容的深入，当需要开发复杂的web应用程序时，花哨灵活的指令和逻辑反而会让人觉得Vue比React更难掌控。简单来说，React是一个陡坡比较难上手，Vue是一个缓坡很容易上手，但是最终的高度两者差不多。
2、技术社区
React是近十年的开源项目，因袭他拥有成熟的技术社区支持。Vue尽管这几年势头很猛，但是要想建立一套完善的生态系统还需要一些时间来打磨。
3、灵活*
这也是争议最大的地方。React专注于 UI，所以在构建 UI组件时可以从它那里获得很好的支持。Vue作为一个渐进式框架，只允许使用最基本的功能来构建应用程序，但同时也提供了一些开箱即用的东西：如，用于状态管理的 Vuex、用于应用程序 URL管理的 Vue Router、Vue服务器端渲染。
Vue剥离了许多元素，相比之下 React更加全面。但如果您正在寻找一种精简、新颖、简单易学、样板代码少、高*能、灵活且完整的前端框架，Vue更加适合；当然，如果您打算使用低版本 jQuery代码，Vue也同样支持。
React的灵活*则更多依赖于其背后强大的技术社区，在 Facebook的强力支撑下（ Facebook的 React团队包括了 10名专职开发人员），提供了更多工具、UI库和教程。
综上所述，我个人觉得在没有实际应用场景的情况下，很难比较出孰优孰劣，没有最好的框架，只有最适合的框架。如果是短期小项目，建议使用 Vue可以快速敏捷开发（上手快，控件占用小，*能较好）。如果是移动端跨平台的应用推荐 React（ React Native已经比较成熟而 Vue的 Weex仍在不断发展）。
二、前端面试题***服务端渲染SSR
我最开始接触是在Vue的官网上，开始是作为一个小节出现，现在已经是个专门的大章节来专门讲Vue服务端渲染的内容。
服务端渲染简单来说就是在服务器上把数据和模板拼接好以后发送给客户端显示。
回顾下前端的历史，最开始的站点是简单的静态网站。后端大哥把.html文件推送给用户，用户浏览器解析这些字符串进行显示。那个时候就是服务端渲染。可是后来由于网站内容越来越复杂、特效越来越炫酷，这种‘兼职’状态已经不能满足需求，细分之下的前端出现了。
随后为了方便的开发，开始提倡前后端分离，大家各做各的，彼此之间通过基于HTTP的各种API协作，变成了数据动态生成的新一代站点。
再后来出现了Vue等三大MV*框架，网站做成了SPA应用，解决了很多问题的同时也带来了新问题，其中最突出的两个：难以SEO和首屏加载缓慢。
想要了解更多关于前端技术内容欢迎关注尚硅谷教育！
前端安全相关面试题
前端JS高阶面试题
前端设计模式-面试题
web前端渲染优化
web前端之二叉搜索树
三、Vue项目SEO优化解决方案
前言
众所周知，vue项目是单页面的应用，是十分不利于SEO优化的。今天我们一起聊一聊关于SEO优化的解决方案~
一、Vue项目进行SEO优化
VueSPA单页面应用对SEO不太友好，当然也有相应的解决方案，下面列出几种SEO方案
1.SSR服务器渲染
服务端渲染,在服务端html页面节点,已经解析创建完了,浏览器拿到的是解析完成的页面解构
关于服务器渲染：Vue官网介绍，对Vue版本有要求，对服务器也有一定要求，需要支持nodejs环境。
优势:更好的SEO，由于搜索引擎爬虫抓取工具可以查看完全渲染的页面
缺点:服务器nodejs环境的要求,且对原代码的改造成本高!nuxt.js(坑比较多,做好踩坑的准备)
2.静态化(*客,介绍*官网)
Nuxt.js可以进行generate静态化打包,缺点:动态路由会被忽略。/users/:id
优势：
编译打包时,就会帮你处理,纯静态文件，访问速度超快；
对比SSR，不涉及到服务器负载方面问题；
静态网页不宜遭到*攻击，安全*更高。
不足：
如果动态路由参数多的话不适用。
3.预渲染prerender-spa-plugin(插件)
如果你只是对少数页面需要做SEO处理（例如/首页,/about关于等页面）
预渲染是一个非常好的方式,预渲染会在构建时,简单的针对特定路由,生成静态HTML文件(打包时可以帮你解析静态化)
优势:设置预渲染简单,对代码的改动小
缺点:只适合于做少数页面进行SEO的情况,如果页面几百上千,就不推荐了(会打包很慢)
4.使用Phantomjs针对爬虫做处理
Phantomjs是一个基于webkit内核的无头浏览器，没有UI界面，就是一个浏览器，
其内的、翻页等人为相关操作需要程序设计实现。
这种解决方案其实是一种旁路机制，原理就是通过Nginx配置，判断访问的来源UA是否是爬虫访问，
如果是则将搜索引擎的爬虫请求转发到一个nodeserver，再通过PhantomJS来解析完整的HTML，返回给爬虫
优势：
完全不用改动项目代码，按原本的SPA开发即可，对比开发SSR成本小太多了；
对已用SPA开发完成的项目，这是不二之选。
不足：
部署需要node服务器支持；
爬虫访问比网页访问要慢一些，因为定时要定时资源加载完成才返回给爬虫；(不影响用户的访问)
如果被恶意模拟百度爬虫大量循环爬取，会造成服务器负载方面问题，
解决方法是判断访问的IP，是否是百度官方爬虫的IP。
小结
如果构建大型网站，如商城类=>SSR服务器渲染
如果只是正常公司官网,*客网站等=>预渲染/静态化/Phantomjs都比较方便
如果是已用SPA开发完成的项目进行SEO优化，而且部署环境支持node服务器，使用Phantomjs
*客参考:SEO优化方案
四、SSR 服务器端渲染
近年来，服务器端渲染(SSR)在前端开发中越来越受欢迎，特别是与React的next框架和Vue的nuxt框架结合。不同于前端框架默认的浏览器渲染，SSR允许在服务器端生成HTML，再将预处理的静态内容发送到浏览器，形成一个交互*强的客户端应用。
常规的浏览器渲染依赖J*aScript动态生成HTML，比如React和Vue中的路由功能。相比之下，服务器端渲染则是通过后端语言（如J*a配合VM模版引擎或NodeJS配合Jade）生成完整的HTML文档，这些文档在发送给浏览器之前已经预渲染好了内容。
要实现SSR，首先从新建项目开始，安装Vue及其SSR库vue-server-renderer。在testSSR目录下，创建一个简单的Vue组件，确保在HTML根元素上添加"data-server-rendered"属*，以标识这部分是由服务器端渲染的。接下来，可以创建一个HTML模板，将组件内容作为注释嵌入其中，使用fs库读取并注入到渲染器中。
为了实现服务器整合，选择Node.js的Express作为基础框架，构建一个可以处理每个请求的Vue实例。在server.js中配置Express服务器，创建.js并配置路由和渲染逻辑。然后，将应用到index.template.html模板并测试。
在项目工程化阶段，为了兼容客户端和服务器端的需求，需要创建不同的webpack配置，例如entry-server.js和webpack.server.config.js，分别生成服务器端和客户端的bundle。通过配置vue-router和webpack，实现路由管理以及资源预加载。最后，使用createBundleRenderer处理源代码更改和source map问题，提高开发效率。
除了基础配置，Vue SSR还提供了更丰富的功能，如CSS管理、缓存管理、流式渲染等。进一步了解和实践，可以参考Vue SSR官方指南和API文档。
五、vue和thymeleaf区别
Vue和Thymeleaf是两种不同的前端框架，它们的主要区别在于使用场景、开发方式和功能特点。
一、使用场景
Vue.js主要用于构建用户界面和单页面应用，通过组件化的开发方式，实现页面的模块化、可复用和可维护。它侧重于前端开发和视图层的处理，可以与多种后端技术结合使用。
Thymeleaf则是一个用于Web和独立环境的现代服务器端J*a模板引擎。它主要用于服务端渲染，能够生成HTML页面，并可以与Spring等后端框架无缝集成。
二、开发方式
Vue.js采用前端开发的常见模式，通过J*aScript实现前后端数据交互和页面渲染。Vue支持响应式编程，具有*式渲染系统，通过组件系统实现页面的模块化开发。
Thymeleaf则是服务器端模板引擎，通过J*a代码和Thymeleaf模板结合，实现页面渲染。它支持HTML、XML等多种格式，并提供了丰富的标签和表达式，方便开发者在模板中进行数据绑定和逻辑处理。
三、功能特点
Vue.js具有轻量级、灵活*和数据驱动视图的特点。Vue通过虚拟DOM实现高效的数据更新和渲染，提供丰富的内置组件和指令，方便开发者快速构建用户界面。
Thymeleaf则注重服务端渲染的可靠*和安全*。它具有高度的灵活*，支持多种开发场景，并提供了丰富的模板语法和标签库，方便开发者在模板中进行数据绑定和逻辑处理。Thymeleaf还可以与J*a后端技术无缝集成，方便开发者进行后端开发。
四、总结
Vue和Thymeleaf分别适用于不同的开发场景和需求。Vue主要用于前端开发和视图层的处理，通过组件化的开发方式构建用户界面；而Thymeleaf则主要用于服务端渲染，通过J*a代码和模板结合实现页面渲染。两者各有优势，根据具体需求和项目特点选择合适的框架进行开发。