前后端分离是一种提高网站性能和团队协作效率的开发模式。在WordPress中，通过使用例如React.js的前端技术，结合WordPress REST API，可以实现前后端的独立开发和数据交换。这种方法增强了网站的灵活性和扩展性，但同时也需要注意诸如SEO优化和错误管理等挑战。
传统的 web 开发中，前端和后端代码是紧密结合的。这意味着界面（HTML、CSS）和逻辑（PHP、数据库操作）是在同一位置处理的。但是，这种方式随着网站变得更加复杂和内容丰富，它的局限性就显现出来了。
前后端分离是一种网站开发模式，它将用户界面和数据分层处理。前端只关注展示层，即用户与之交互的部分，而后端则处理数据、逻辑和服务器操作。二者通过 APIs 进行通信，APIs 是一种允许不同软件应用之间相互操作的接口。
为什么要在 WordPress 中实现前后端分离？
- 性能提升：前端应用可以快速加载，只在需要时从后端获取数据，大大提高了网站的响应速度和用户体验。
- 灵活性：设计和开发团队可以独立工作，不会互相干扰。这对于大型项目和团队来说，是一个巨大的优势。
- 扩展性：由于前后端的分离，增加新功能或进行规模扩展变得更加容易。
- 多平台支持：一套后端系统可以同时服务于网站、移动应用、甚至是桌面应用。
如何实现 WordPress 的前后端分离？
- 选择合适的前端技术：决定采用什么技术栈对前端开发至关重要。常见的技术选择包括 React.js、Vue.js 等。这些都是现代 JavaScript 框架，可以创建动态、交互式的用户界面。
- 利用 WordPress REST API：WordPress 提供了一个强大的 REST API，允许开发者读取、写入、修改和删除网站数据（如文章、页面、媒体等）。通过使用 REST API，前端应用可以通过 HTTP 请求从 WordPress 后端检索或发送数据。
- 创建自定义端点：虽然 WordPress REST API 已经提供了大量的端点，但有时您可能需要更特定的功能。在这种情况下，您可以创建自定义端点，这些端点是与您的应用逻辑相对应的 API URL。
- 认证与权限：当涉及到敏感数据或需要用户登录的功能时，你需要处理认证（用户的身份）和授权（用户可以做什么）。WordPress 提供了几种认证方法，包括 Cookie 认证、应用密码和 OAuth。
- 静态资源的管理：前后端分离后，前端的静态资源（如 JavaScript、CSS、图像文件等）可以使用 CDN（内容交付网络）来加速加载。
- 错误处理和调试：使用前后端分离架构，特别是涉及到 API 时，有效的错误处理和调试变得非常重要。确保你的前端应用能够妥善处理来自后端的错误信息，并且使用如 Chrome 开发者工具等工具进行调试。
- SEO 优化：前后端分离可能会影响搜索引擎优化（SEO），因为搜索引擎可能无法正确抓取完全由 JavaScript 生成的内容。解决这个问题的技术之一是使用 SSR（服务器端渲染）或预渲染内容，确保搜索引擎可以读取网站内容。
WordPress在全球超过 13 亿个网站上使用,它非常适合作为无头 CMS。NextJS是一个基于 React 构建的框架,可为您提供惊人数量的功能,否则您需要自己设置这些功能(静态渲染、捆绑、预取等),并提供超快速和高性能的网站。让我们将两者结合起来创建一个超快速的无头 WordPress 网站!
先决条件:
- NodeJS和React的基本了解
- 一个现有的 WordPress 网站,其中包含一些帖子和页面
我们将在本演练中使用Colby Fayock 的Next.js WordPress Starter (https://github.com/colbyfayock/next-wordpress-starter/)。这个 Next.js WordPress Starter 项目旨在“将 WordPress 作为一个无头 CMS,并使用 Next.js 创建可以部署在任何地方的静态体验。”
Next.js WordPress Starter 项目允许我们轻松提取您通常期望在 WordPress 网站中的所有内容(帖子、页面、作者列表、全局搜索),并通过 GraphQL 端点将其引入 NextJS。该项目正在积极开发中,因此请关注 repo 以获取更多功能更新!
实操入门
WordPress
Next.js WordPress Starter 使用 GraphQL,因此首先登录您的 WordPress 网站并安装WPGraphQL。如果您没有现有的 WordPress 网站,我已经设置了一个虚拟项目,您可以在以下位置使用:https://fake-data.better-wordpress.dev。
Next.js WordPress 启动器
在前端开始使用 NextJS 的最快方法是打开终端,导航到要开始工作的文件夹,然后运行:
yarn create next-app -e https://github.com/colbyfayock/next-wordpress-starter
安装完成后,打开代码编辑器并将.env.local文件添加到项目的根目录。这是我们要设置环境变量的地方,以便 NextJS 知道从哪里获取我们的数据。
Starter Project 使用的环境变量是:WORDPRESS_GRAPHQL_ENDPOINT,所以我使用WORDPRESS_GRAPHQL_ENDPOINT="https://fake-data.better-wordpress.dev/graphql"来获取一些虚拟数据。您也可以在测试时使用这个虚拟 WordPress 数据,但是当您准备好上线时,不要忘记用您自己的 WordPress 端点替换 url!
[
](https://res.cloudinary.com/practicaldev/image/fetch/s–yTHzS9ou–/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https:// /dev-to-uploads.s3.amazonaws.com/uploads/articles/x1uabk6infw3yqhlchrx.jpg)
回到您的终端,运行yarn dev会启动一个开发服务器。现在不是查看新 NextJS 网站的性能和捆绑包大小的时候(我在第一次尝试 NextJS 时犯的一个错误),尽管您应该始终确保发布尽可能小的捆绑包大小。我们稍后会谈到。
在终端中运行yarn dev后,您现在可以打开浏览器并看到您的 Headless WordPress 站点运行在:http://localhost:3000。
恭喜——您现在在 JAM 堆栈上运行了一个完全无头的 WordPress 网站,其中包括您所有的帖子、页面和实时搜索!如果您使用的是我的假数据 API,那么您的网站应该类似于此屏幕截图:
[
上运行的无头 WordPress 安装的数据屏幕截图](https://res.cloudinary.com/practicaldev/image/fetch/s–yL18MnTZ–/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto% 2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/plfscqemyudt0qx2twwr.jpg)
来自在 NextJS 上运行的 Headless WordPress 安装的数据的屏幕截图
此时,您可以开始自定义启动项目,使其外观和功能完全符合您的要求。完成后,是时候部署您的网站让全世界看到了!
部署您的 NextJS 网站
在运行生产构建之前,使用您的实时 URL 更新您的package.json文件(第 3 行)。这是将传递到您的站点地图中的 URL——对于 SEO 非常重要。
[
的屏幕截图](https://res.cloudinary.com/practicaldev/image/fetch/s–GL6yBr2m–/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https:// dev-to-uploads.s3.amazonaws.com/uploads/articles/5fnd6zc8jxfidnzf9nx2.jpg)
在您的终端中运行yarn build实际上会获取您的所有帖子和页面,创建站点地图和静态网站的优化生产版本,准备部署到您的服务器。
运行yarn build后,您可以运行yarn start来运行本地服务器并测试您的本地生产版本。这是查看捆绑包大小和站点速度的最佳时机,因为它很好地代表了您的站点将如何在服务器上响应。
我使用vercel.com来部署 better-wordpress.dev。 Vercel 是构建 NextJS 的同一团队,他们有一个慷慨的免费层,所以在那里部署它是非常有意义的。
我目前正在撰写博客文章,解释如何将 NextJS 部署到 Vercel、Netlify 和其他主机——但与此同时,Vercel 文档非常棒:https://nextjs.org/docs/deployment
最后的话
您现在拥有一个在 JAM 堆栈上运行的功能齐全且速度极快的网站,在前端使用 NextJS 并为您的数据使用 WordPress。
前后端分离不是一种全新的概念，但它在 WordPress 生态系统中正变得越来越流行。它提供了无与伦比的灵活性和扩展性，尤其是对于那些需要高性能和多平台支持的复杂项目。然而，它也带来了其自身的挑战，如 SEO 优化和错误管理。因此，在决定采用这种结构之前，确保您已经考虑了这些因素，并准备好投入额外的时间进行开发和维护。
