WordPress教程

在无头 WordPress 中使用 NextJS

前后端分离是一种提高网站性能和团队协作效率的开发模式。在WordPress中,通过使用例如React.js的前端技术,结合WordPress REST API,可以实现前后端的独立开发和数据交换。这种方法增强了网站的灵活性和扩展性,但同时也需要注意诸如SEO优化和错误管理等挑战。

传统的 web 开发中,前端和后端代码是紧密结合的。这意味着界面(HTML、CSS)和逻辑(PHP、数据库操作)是在同一位置处理的。但是,这种方式随着网站变得更加复杂和内容丰富,它的局限性就显现出来了。

WordPress Management

前后端分离是一种网站开发模式,它将用户界面和数据分层处理。前端只关注展示层,即用户与之交互的部分,而后端则处理数据、逻辑和服务器操作。二者通过 APIs 进行通信,APIs 是一种允许不同软件应用之间相互操作的接口。

为什么要在 WordPress 中实现前后端分离?

  1. 性能提升:前端应用可以快速加载,只在需要时从后端获取数据,大大提高了网站的响应速度和用户体验。
  2. 灵活性:设计和开发团队可以独立工作,不会互相干扰。这对于大型项目和团队来说,是一个巨大的优势。
  3. 扩展性:由于前后端的分离,增加新功能或进行规模扩展变得更加容易。
  4. 多平台支持:一套后端系统可以同时服务于网站、移动应用、甚至是桌面应用。

如何实现 WordPress 的前后端分离?

  1. 选择合适的前端技术:决定采用什么技术栈对前端开发至关重要。常见的技术选择包括 React.jsVue.js 等。这些都是现代 JavaScript 框架,可以创建动态、交互式的用户界面。
  2. 利用 WordPress REST API:WordPress 提供了一个强大的 REST API,允许开发者读取、写入、修改和删除网站数据(如文章、页面、媒体等)。通过使用 REST API,前端应用可以通过 HTTP 请求从 WordPress 后端检索或发送数据。
  3. 创建自定义端点:虽然 WordPress REST API 已经提供了大量的端点,但有时您可能需要更特定的功能。在这种情况下,您可以创建自定义端点,这些端点是与您的应用逻辑相对应的 API URL。
  4. 认证与权限:当涉及到敏感数据或需要用户登录的功能时,你需要处理认证(用户的身份)和授权(用户可以做什么)。WordPress 提供了几种认证方法,包括 Cookie 认证、应用密码和 OAuth。
  5. 静态资源的管理:前后端分离后,前端的静态资源(如 JavaScript、CSS、图像文件等)可以使用 CDN(内容交付网络)来加速加载。
  6. 错误处理和调试:使用前后端分离架构,特别是涉及到 API 时,有效的错误处理和调试变得非常重要。确保你的前端应用能够妥善处理来自后端的错误信息,并且使用如 Chrome 开发者工具等工具进行调试。
  7. 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!

[.env.local 文件的屏幕截图](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,那么您的网站应该类似于此屏幕截图:

[来自在 NextJS

上运行的无头 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 非常重要。

[package.json 文件的屏幕截图](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 优化和错误管理。因此,在决定采用这种结构之前,确保您已经考虑了这些因素,并准备好投入额外的时间进行开发和维护。