快速在你的vue/react应用中实现ssr(服务端渲染)
发布网友
发布时间：3小时前
共1个回答
热心网友
时间：3小时前
前言
了解Vue和React，我们通常使用它们构建客户端应用程序，通过生成DOM和操作DOM实现客户端渲染。然而，SPA应用的首屏渲染时间过长，且存在严重的SEO问题。因此，我们需要考虑服务端渲染（SSR）来解决这些问题。
服务端渲染（SSR）通过服务器端完成HTML结构拼接，直接将拼接好的HTML发送到浏览器，使其成为可交互页面的技术。对于SSR页面，搜索引擎可以直接获取到内容，而客户端渲染的应用则需要执行服务器返回的JS才能得到正确的网页内容。本文将介绍几个常用的基于Vue和React的SSR技术实现方案。
摘要SSR技术实现方案
我们将列举几个基于Vue和React的SSR实现方案。方案包括使用node+Vue-server-renderer实现Vue项目服务端渲染、使用node+React renderToStaticMarkup实现React项目服务端渲染，以及使用谷歌的Rendertron实现服务端渲染。最后，我们简要介绍如何在本地运行Rendertron并实现服务端渲染。
使用谷歌Rendertron实现服务端渲染
Rendertron是Google推出的一种技术，能够使得SPA应用被不支持执行JS的搜索引擎爬取渲染后的内容。其原理是通过使用Headless Chrome在内存中执行JS，得到完整内容后返回给客户端。通常，我们会将Rendertron部署为的HTTP服务，并通过配置中间件或路由规则，使得当检测到搜索引擎爬虫的UA时，请求被代理到Rendertron服务。这样可以实现服务端渲染，而无需考虑服务端渲染的部分。
具体实现
首先安装Rendertron，通常在GitHub中可以找到安装和使用方法。在安装前，建议先安装Docker，以获得便捷的安装和启动体验。本地运行Rendertron，安装好Docker后，全局安装Rendertron，然后使用谷歌浏览器的cli启动服务。通过输入命令，可以在命令行中获取本地服务的地址，如localhost:3000。将此地址与网站地址结合，使用Rendertron服务进行渲染。
使用Rendertron的好处是它可以按照SPA模式开发项目，无需为兼容服务端渲染而编写额外的兼容代码。
后期展望
未来，我们将继续探索大前端技术，包括HTML5游戏、Webpack、Node.js、Gulp、CSS3、JavaScript、NodeJS、Canvas数据可视化等。欢迎加入《趣谈前端》技术群，一起学习讨论，共同探索前端的边界。
