共计 4131 个字符，预计需要花费 11 分钟才能阅读完成。
prerender
如果我们项目是前后端分离并且内容是 AJAX 动态获取想要进行网站排名优化 (SEO) 的话，可以使用 prerender
Prerender 是一种服务或中间层应用，用于在将页面内容返回给搜索引擎爬虫之前，对单页应用或使用 JavaScript 动态渲染的页面进行预渲染，然后返回 HTML。
prerender 的工作原理：
当搜索引擎爬虫请求一个单页应用或使用 JavaScript 渲染的页面时，Prerender 捕获这个请求。
然后判断这个请求是否来自搜索引擎的爬虫，如果不是，则直接返回单页项目的 HTML，按照普通单页项目的工作模式(客户端渲染)。
如果是，则把请求转发给 prerender 服务 Prerender 服务器会使用一个头 less 浏览器 (通常是谷歌 Chrome) 来打开并渲染请求的页面，就像一个真实的浏览器会做的一样。
一旦页面渲染完毕，Prerender 将完整的 HTML 内容返回给搜索引擎爬虫，就像是一个静态 HTML 页面。
搜索引擎爬虫可以轻松地索引和理解这个静态 HTML 内容，而无需执行 JavaScript 或等待异步加载。prerender 中间件就是用来判断请求是否来自搜索引擎爬虫和转发请求的。
Prerender 的优点：
- 可以提高网站排名(SEO)：对于使用 JavaScript 渲染的单页网站，爬虫通常难以处理异步加载和内容动态生成。Prerender 可以将完整的 HTML 内容提供给搜索引擎，提高网站排名。
- 提高页面加载速度：由于 Prerender 返回静态 HTML，而不需要浏览器执行 JavaScript 和异步加载，因此页面加载速度会更快，从而让用户拥有更好体验。
- 兼容性：Prerender 可以与各种前端框架和库 (如 React、Angular 和 Vue.js) 一起使用，非常灵活兼容性很强。
- 减轻服务器负担：Prerender 可以在我们的中间层处理渲染，不需要服务器执行 JavaScript 渲染，减轻了我们后端服务器的负担。
Prerender 的缺点：
- 成本高：Prerender 需要额外的服务器资源和成本，不适合于大型网站。
- 缓存管理：需要我们经常更新 Prerender 的缓存，以确保搜索引擎获取到最新的内容。
预渲染 prerender-spa-plugin
如果我们已经采用了前后分离的单页项目，而且我们的网站内容不需要 AJAX 去获取内容和展示内容，那么我们可以试试 prerender-spa-plugin 这个插件，这个插件是一个 webpack 插件，可以帮助我们在打包过程中通过无头浏览器去渲染我们的页面，并生成对应的 HTML。当然这个方案适合你的路由是静态的，并且路由数量是有限的。
prerender-spa-plugin 是一个用于将单页应用 (SPA) 的路由生成预渲染静态 HTML 的插件。这个插件可以与 Webpack 一起使用，它主要用于优化 SPA 应用的 SEO 和性能。
prerender-spa-plugin 的工作原理：
配置插件：首先我们需要配置 prerender-spa-plugin 插件。配置要预渲染的路由、设置输出目录等。
Webpack 构建：我们运行 Webpack 打包命令时，Webpack 会开始构建我们网站。Webpack 自动会解析和编译我们的代码，并准备在预渲染过程中将要使用的数据。
生成无头浏览器实例：在打包期间，prerender-spa-plugin 会创建一个无头浏览器实例，它用于执行页面的加载和渲染。
逐个路由预渲染：对于每个在配置中指定的路由，我们的插件都会执行下面的步骤：
- 使用无头浏览器打开路由：插件会将路由加载到无头浏览器中，就像一个真实的浏览器会加载页面一样。
- 等待页面加载和渲染：无头浏览器会等待页面完全加载和渲染。包括等待异步 JavaScript 加载完成，确保页面是最终状态。
- 获取渲染后的 HTML：一旦页面渲染完成，插件就会获取页面的 DOM 结构和渲染结果，这里包括页面的 HTML、CSS 和 JavaScript 生成的内容。
- 生成静态 HTML：插件会将获取到的页面内容生成对应的静态 HTML 文件。这个静态 HTML 文件包含了完整的页面内容，包括由 JavaScript 渲染的部分。
- 保存静态 HTML 文件：生成的静态 HTML 文件会被保存到指定的输出目录中，通常是我们的构建目录或特定的目录。
Webpack 完成构建：一旦所有路由都被预渲染为静态 HTML 并保存，Webpack 打包就完成了。
部署预渲染的静态 HTML：我们生成的静态 HTML 文件可以被部署到任何静态文件托管服务上，以供爬虫爬取。
优点：
- 改动小部署简单：引入个插件即可，生成的静态 HTML 可以部署到任何静态文件托管服务上。
- SEO 优化：预渲染生成的静态 HTML 可以被搜索引擎爬虫轻松索引，提高网站排名(SEO)。
- 性能更好：预渲染生成的静态 HTML 不需要浏览器执行 JavaScript，加载速度会更快。
- 兼容性强：插件与多个流行的 SPA 框架 (如 Vue.js、React、Angular 等) 兼容。
缺点：
- 不适用动态路由：对于动态内容或需要用户登录后才能访问的页面，预渲染可能会受到限制。
- 只适用于小项目：预渲染需要在构建时执行，对于大型应用打包时间会很长。
Phantomjs 针对爬虫做处理
Phantomjs 是 是一个无界面的、可编程的浏览器引擎，它可以用于模拟浏览器行为，加载和渲染网页。
虽然目前“PhantomJS 已经宣布终止开发”，但是已经能够满足我们对 Vue 的 SEO 处理。
工作原理
- 启动浏览器引擎：PhantomJS 会启动一个无界面的浏览器引擎，基于 WebKit 引擎(类似于 Chrome 和 Safari 浏览器的渲染引擎)。
- 加载网页：它会加载指定的网页，就像一个真实的浏览器一样，发送 HTTP 请求并接收响应。
- 渲染网页：PhantomJS 会将网页的 HTML、CSS 和 JavaScript 进行解析和渲染，最终生成一个完整的 DOM 树和渲染结果。
- 执行 JavaScript：它可以执行网页中的 JavaScript 代码，从而模拟用户与网页的交互。
- 生成截图或 PDF：PhantomJS 可以用于生成网页的截图或 PDF 文件，这在测试和网页截图等应用中非常有用。
- 数据提取：它可以从网页中提取数据，用于爬虫、数据分析等任务。
这种解决方案其实是一种旁路机制，原理就是通过 Nginx 配置，判断访问的来源 UA 是否是爬虫访问，如果是则将搜索引擎的爬虫请求转发到一个 node server，再通过 PhantomJS 来解析完整的 HTML，返回给爬虫。
优点：
无需更改：完全不用改动项目代码，按原本的 SPA 开发即可有用，大大提高了效率。
多平台支持：PhantomJS 可以在多个操作系统上运行，包括 Windows、Linux 和 macOS。
快速加载：它可以快速加载和渲染网页，对于性能要求高的任务非常适用。
缺点：
部署要求固定：部署需要 node 服务器支持
- 不再维护：PhantomJS 的维护已经停止，不再推荐在新项目中使用
- 资源占用：PhantomJS 在内存和 CPU 方面可能会占用较多资源，尤其是在大规模爬取或测试任务中。
- 渲染引擎陈旧：PhantomJS 使用的渲染引擎基于 WebKit，而现代浏览器已经使用了更先进的渲染引擎。这可能导致一些网页在 PhantomJS 中显示不正常。
Nuxt/Next 服务端渲染应用部署 (SSR 服务器渲染)
- React 的 Next
- Vue.js 的 Nuxt
Nuxt
Nuxt.js 是一个基于 Vue.js 的通用应用程序框架，它可以帮助我们构建服务器渲染的 Vue.js 应用程序。
注意：在 Nuxt.js 执行 generate 静态化打包时，动态路由会被忽略。
工作原理：
Nuxt.js 通过使用 Vue.js 的渲染函数将 Vue 组件渲染为 HTML 字符串，然后将这些字符串传递给服务器以响应 HTTP 请求。这允许搜索引擎爬虫能够看到渲染后的 HTML 内容，从而提高了 SEO。
优点：
- 服务器渲染：Nuxt.js 支持服务器渲染，因此可以生成静态 HTML，爬虫可以准确的获取网站内容。
- 自动生成路由：Nuxt.js 可以自动生成路由表，减少了手动配置路由的工作，有助于更好地管理 SEO 友好的 URL。
- 异步数据获取：Nuxt.js 提供了 asyncData 和 fetch 方法，使您可以在服务器端获取数据，以便将数据包含在初始渲染中，有助于提高网站排名
缺点：
- 对初学者不友好：Nuxt.js 的配置和使用可能相对复杂，尤其是对于初学者来说。
- 性能开销：服务器渲染通常会导致更高的服务器负载和性能开销，需要考虑缓存等性能优化策略。
Next.js:
Next.js 是一个 React 框架，用于构建服务器渲染的 React 应用程序。
工作原理：
Next.js 通过在服务器上预渲染页面并使用 React 的虚拟 DOM 来实现服务器渲染。它将 React 组件渲染为 HTML 字符串，然后将这些字符串发送给客户端。
优点：
- 服务器渲染：Next.js 支持服务器渲染，有助于生成静态 HTML，爬虫可以更准确的获取网站内容。
- 自动静态导出：Next.js 支持自动生成静态 HTML 文件，爬虫可以更好获取网站内容。
- 代码分割：Next.js 支持自动代码分割，以减小初始加载时间，提高性能和有助于提高网站排名。
缺点：
- 对初学者不友好：Next.js 是基于 React 的，如果不熟悉 React，学习曲线可能会较陡峭。
- 服务器负载：服务器渲染通常会导致更高的服务器负载和性能开销，需要缓存等性能优化。
总结
🔸构建大型网站，如商城类，可以直接选择 SSR 服务端渲染。
🔸如果只是个人博客、公司官网这类，其余三种都可以。比如 Nuxt 静态化就挺好的。
🔸如果对已用 SPA 开发完成的项目进行 SEO 优化，而且支持 node 服务器，可以使用 Phantomjs。
你的工作，由 AI 赋能！🔥
还在为文案、脚本卡壳、做视频、写代码、设计图片灵感枯竭而烦恼吗？🤯
板板 AI，你的工作好帮手！
一键生成 各种文案、脚本、图片、视频、代码、报告，轻松应对各种工作 / 营销需求！
现在注册体验，即可获得：
- 🎁 30 积分基础模型余额
- 🎁 3 积分高级模型余额
- 🎁 3 积分绘画余额
还不快来试试？
点击链接，开启你的 AI 创作之旅！>>>https://www.banbanai.cn
板板 AI，让你的工作效果发挥无限可能！ 🚀
