服务器端渲染的数据怎么爬

Ⅰ 快速在你的vue/react应用中实现ssr(服务端渲染)

前言

了解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数据可视化等。欢迎加入《趣谈前端》技术群，一起学习讨论，共同探索前端的边界。

Ⅱ 什么是服务端渲染

服务端渲染，简称 SSR，是现代 Web 应用中的一种渲染方式。它与传统的客户端渲染（CSR）在页面的构建和呈现方式上有所不同。SSR 的核心思想是在服务器端预先组装 HTML，然后将这个完整的 HTML 文档发送到浏览器，由浏览器直接解析并展示在页面上。以下是服务端渲染的概述、由来、利弊以及实现步骤的详细描述。

服务端渲染的定义

服务端渲染是在浏览器请求页面 URL 时，服务器将 HTML 文档预先组装好，包含所需数据和样式，并返回给浏览器。浏览器接收到这个完整的 HTML 文档后，可以直接解析并构建 DOM 树，而无需通过执行 JavaScript 脚本来渲染页面。这与客户端渲染（在浏览器中动态生成 HTML 和交互元素）形成了鲜明对比。

服务端渲染的由来

在 Web1.0 时代，服务端渲染是默认的页面构建方式，服务器根据用户请求动态生成 HTML 文档，包含数据库查询结果。这种模式下，页面呈现过程不涉及 JavaScript，适用于静态内容和早期的动态应用。随着 AJAX 的出现和前端复杂度的增加，客户端渲染逐渐兴起，将页面的构建和动态内容呈现下放给浏览器，从而提高用户体验。然而，这带来了 SEO（搜索引擎优化）和首屏加载时间的问题，促使开发者开始探索服务端渲染的新方式。

服务端渲染的利弊

服务端渲染有其优势和局限性：

- **有利于 SEO**：通过提供完整的 HTML 页面，服务端渲染能提高搜索引擎对网站的爬取效率，提升页面在搜索结果中的排名，从而增加流量。

- **白屏时间更短**：服务端渲染在用户请求页面时即提供完整 HTML，无需等待 JavaScript 加载和执行，减少了页面加载时间。

- **缺点**：并非所有应用都适合服务端渲染。复杂应用中，大量的 JavaScript 代码可能导致首屏加载时间过长，且对于使用大量动态内容的单页面应用（SPA），服务端渲染可能效率不高。

同构与实现

同构（isomorphic）是指在客户端和服务器端共享代码，使得一份代码既能在服务器端执行，也能在浏览器端执行。实现服务端渲染需要通过构建工具（如 Webpack）配置服务端和客户端的构建流程，确保组件和路由在两处都能正确加载和执行。这通常涉及创建通用的构建配置文件，以及编写能同时在客户端和服务器端运行的组件和路由逻辑。

实现服务端渲染的关键步骤包括：

1. **构建服务端和客户端代码**：分别针对服务器和浏览器环境，配置不同的 Webpack 构建配置文件。
2. **路由共享**：确保服务器和客户端都具备路由匹配逻辑，能够根据不同的 URL 请求加载正确的组件。
3. **数据模型共享**：通过 Vuex 或类似状态管理库，确保组件状态在服务器端和客户端之间同步。
4. **状态同步**：在服务器端渲染完成后，将状态数据序列化，并在客户端渲染时同步到浏览器端的 store，以激活 DOM 元素。

服务端渲染是一种兼顾性能和用户体验的技术，尤其在 SEO 和白屏时间方面有显着优势。然而，其是否适合应用取决于具体场景和需求，开发者需要权衡利弊并综合考虑应用的复杂度、性能需求和 SEO 优化目标。