详解Vue组件服务端渲染声明：读者需要对NodeJs和Vue服务端渲染有一定的了解现在，前后端分离端和客户端渲染已经成为前端开发的主流模式，绝大多数前端应用都适合用这种方式开发，尤其是React、Vue等组件技术的发展使得这种方式成为可能深受人们喜爱。但是对于一些应用，客户端渲染会遇到一些问题：需要做SEO（搜索引擎优化），但是客户端渲染的html中几乎没有可用的信息。首屏需要快速加载，但客户端渲染一般需要较长时间加载动画或白屏如果客户端渲染组件技术（React、Vue等）能与传统后台有效结合就完美了-结束渲染方法。那么，这次我们就来说说Vue组件的服务端渲染。根据社区已有的一些解决方案，结合自己的实践，根据团队的不同技术实力，谈谈针对不同应用场景选择解决方案时的轻重缓急。1、NodeJs渲染中间层一般的前端工作流程是后端->前端。传统的后端渲染模式是后端负责url、界面、模板渲染等，前后端耦合在一起。当然，这种方式正在慢慢退出历史舞台。主流的客户端渲染是后端只提供接口（如果需要可以提供必要的url），前后端只通过接口交换数据，路由和渲染都在前端完成。NodeJs渲染中间层的工作流程是后端->NodeJs->前端（NodeJs渲染中间层由前端开发者掌握）。在这种模式下，后端只提供接口，传统的服务端路由（url）和模板渲染全部交由NodeJs层接管。这样前端开发者就可以自由决定哪些组件需要在服务端渲染，哪些组件可以在客户端渲染。前后端完全解耦，但保留服务端渲染的功能。这种最成熟的解决方案是nuxt.js。有需要的可以去nuxt.js官方文档看看具体的用法和详细的功能。应该说这种方式是目前最完美的解决方案，但也存在一些隐患：增加一个NodeJs中间层会降低应用性能，增加架构的复杂性和不稳定性，降低应用的安全性对于高-并发应用，NodeJs层很容易形成瓶颈，对开发者的要求就高很多。所以这种方式适合那些对并发性、安全性、稳定性等要求不高，但需要做SEO或者首屏页面快速加载的。当然，如果你能自己修改相关工具，那就另当别论了。2.保留后台模板渲染。当无法使用NodeJs中间层，而要达到SEO和快速首屏响应的目的时，需要在传统后端模板渲染的基础上，对前端页面进行适当的修改。2.1首屏快速响应首屏快速响应是指渲染首屏所需的数据与HTML文件一起到达浏览器。这些数据目前由后端模板引擎嵌入到HTML页面中。以Java的freemarker模板引擎为例：（模板的数据在html中以脚本的形式获取，这样即使在本地调试开发也不会报错）。如果是复杂的Json数据或者其他复杂的模板数据（如作为列表数据），你可以这样接收它：<脚本>try{eval(document.getElementById('tpl-script-json').innerText);}catch(e){window.tmpData={jsonValue:{}};}window.globalData={jsonValue:window.tmpData.jsonValue,};这样就可以在组件中使用window.globalData数据，而不是使用另外的接口获取数据，从而加快首屏渲染，本地开发调试不会报错。如果使用本地数据Mock功能，也可以很方便的结合这个方法，只需稍加修改：在代码中定义本地和服务端环境，本地环境使用Mock数据，服务端环境使用window.globalData你可以使用see-ajax、see-fetch来简化这个方法的开发。此外，还有一些进一步加快首屏渲染速度的措施：尽量减小首屏加载的脚本文件大小，其他脚本可以按需加载。如果有必要，可以使用CSS，将JS内容注入到HTML中，这样只发起一次请求，加载速度也可以加快。2.2SEO优化在上面首屏效果图的基础上，SEO优化也可以做相应的修改。事实上，在客户端渲染逐渐成为主流开发模式的同时，搜索引擎也在跟进这一变化。截至目前，Google和Bing可以很好地索引同步JavaScript应用程序，即即使是客户端渲染，但只要数据是同步渲染的（非Ajax获取的数据，例如模板数据），搜索引擎就可以抓取到相应的HTML片段。（国内百度搜索和360搜索还没有跟进动态）但是为了兼容所有的搜索引擎，可以修改如下：首先，后端模板引擎渲染一些HTML片段，只供搜索引擎抓取，不作为展示给用户的页面，客户端渲染同步或异步数据将真实页面展示给用户
3、导出静态html如果页面没有动态数据，好办，直接将组件导出为静态html，然后由客户端激活即可。详情请参考官方文档。这个解决方案更好的解决方案是nuxt.js生成静态HTML文件。目录结构：-pages/#页面结构目录-index.vue-second.vue-...-nuxt.config.js#配置文件-package.json-dist#导出静态HTML文件的默认目录导出静态HTML文件npxNuxtgenerate如果项目中有多个页面，可以这样构建：目录结构：-nuxt.config.js#配置文件-package.json-src/-home/#首页-pages/#页面结构目录-索引。vue-second.vue-...-dist#导出静态HTML文件的默认目录-about/#关于页面-pages/#页面结构目录-index.vue-second.vue-...-dist#导出静态HTML文件的默认目录导出静态HTML文件npxnuxtgeneratesrc/home-c../../nuxt.config.js#主页npxnuxtgeneratesrc/about-c../../nuxt.config.js#除了上面提到的方法，about页面当然还有其他方法，比如：使用ChromeHeadless方式获取组件静态HTML，参考react-snap，puppeteer官方vue-server-renderer导出静态HTML4.变化，服务端渲染与传统的后端模板渲染有很大区别，因此在开发过程中需要与后端开发人员进行沟通，避免认知差异导致协作不协调。更多后续博客，查看https://github.com/senntyou/blogs作者：沈玉之(@senntyou)版权声明：免费转载-非商业-非衍生-保留署名（CreativeCommons3.0许可）