ヘッドレスワードプレス開発会社:Next.js と Astro

ヘッドレスワードプレスを求めるほとんどの企業には、WordPressの問題はありません。フロントエンドの問題があります。ページの読み込みが遅い、テーマが配信できないデザイン、ウェブサイトだけでなくモバイルアプリにも表示する必要があるコンテンツなどです。ヘッドレスはそれを修正します。準備ができていないと、いくつかの新しい問題が発生します。

Next.js を使ったヘッドレスワードプレスの実際の意味

通常のWordPressサイトでは、1つのシステムがコンテンツを保存し、すべてのページを構築します。ヘッドレスセットアップでは、これら 2 つのジョブが分割されます。WordPressは引き続きコンテンツソースです。編集者は同じ管理画面、同じメディアライブラリ、同じカスタムフィールドを使用します。React、Next.js、または Astro で書かれた別のフロントエンドが、WPGraphQL または REST API を介してコンテンツを取得し、訪問者に表示されるページをレンダリングします。

これが WordPress をヘッドレス CMS として使用する背景にある全体的な考え方です。「ヘッド」はテーマレイヤーで、完全に制御できるコードに置き換えました。

私たちが構築するもの

私たちはまずソフトウェアエンジニアリング会社であり、それが私たちの取り組み方を形作っています。フロントエンドはタイプセーフな TypeScript の実際のアプリケーションコードであり、いくつかの API 呼び出しが追加されたテーマではありません。

-サイトのインタラクティブ性によって選択される Next.js または Astro フロントエンド (JavaScript をほとんど実装しないはずのコンテンツが多いサイトの場合は Astro、アプリのような動作がある場合は Next.js)
-コンテンツモデルに合わせて設計された WPGraphQL または REST スキーマ。フロントエンドがデータと戦わないようにする
-コンテンツをプレビューできるので、編集者は公開前に実際のフロントエンドで下書きを確認できます
-ウェブサイト、React Native アプリ、その他必要なものをフィードする 1 つのコンテンツソース
-キャッシュと CDN 設定により、実際のトラフィックでもページが高速になる
-URL とコンテンツをそのまま維持したまま、既存の WordPress サイトを移行

Drupalや別のヘッドレスCMSも必要な場合は、その作業も行っています。WordPressよりも別のシステムの方が適している場合はその旨を伝えます。

ヘッドレスが報われるとき

数千の記事、モバイルアプリ、12 人の編集チームを擁する地域の出版社を想像してみてください。テーマはリクエストのたびに何十ものプラグインを読み込み、アプリチームはコンテンツを求めてウェブサイトをスクレイピングし続けているため、サイトの速度は遅くなります。Headless は、事前にレンダリングされた高速なサイトと、サイトとアプリの両方が読み取る 1 つの API を提供してくれました。編集者は再トレーニングをまったく行いません。

また、設計要件がテーマで合理的に実現できる範囲を超える場合や、厳しいパフォーマンス予算が必要な場合、またはセキュリティチームが公開サイトを管理者とデータベースから切り離したい場合にも効果があります。

それだけの価値がないとき

ヘッドレスは、2 つのコードベースと 1 つのコードベース間で 1 つの API を実行することになるので、ビルドやメンテナンスがもっと必要になります。年に 2 回変更される小規模なパンフレットサイトの場合は、この方法は省略してください。開発者がいなくてもチームがページビルダーやフロントエンドプラグイン (フォーム、スライダー、会員制ツール、多くの SEO アドオン) を使ってレイアウトを変更する場合、よく考えてみてください。これらはテーマでレンダリングされ、別のフロントエンドに移動しないからです。コンポーネントとして再構築できるものもあれば、再構築できないものもあります。コミットする前にどれかを知っておきたいでしょう。

ホスティングとプラットフォーム

Sweent は WP Engine エージェンシーパートナープログラムのメンバーであり、私たちのプロジェクトは専任の WP Engine パートナーチームによって支えられています。コンテンツ層、つまりEverCacheとグローバルCDN、ロールバック付きの自動更新、マネージドWAFとDDoS対策、ステージング、毎日のバックアップ、24時間年中無休のWordPressサポートなどです。このプラットフォームは毎年 SOC 2 監査を受け、ISO 27001 認証を取得しています。このパートナーシップの仕組みについて詳しくは、[WP Engine ページ] (/wp-engine) をご覧ください。

エンゲージメントの実施方法

1.コンテンツモデル、プラグイン、トラフィックを監査して、ヘッドレスが保証されるかどうかを判断します。
2.コンテンツスキーマと API レイヤーを設計し、どのページをプリレンダリングするかについて合意します。
3.フロントエンドは、お客様の WordPress インスタンスと一緒に Next.js または Astro でプレビュー付きで構築されます。
4.コンテンツの移行、リダイレクトの設定、ステージングでのテストを行います。
5.起動して、リポジトリとドキュメントをチームに渡します。原則として、当社のエンジニアは壁の向こうに姿を消すのではなく、お客様のチームに組み込みます。

エンジニアリング面は当社の [ソフトウェア・エンジニアリング・サービス] (/services/software-engineering) の中にあり、当社はSDVOSBとHubZoneのステータスを保持しており、公共部門のバイヤー向けにはGSAマルチアワード・スケジュール契約を結んでいます。

検討すべきトレードオフ

スピード、デザインの自由度、そして何でもフィードできるコンテンツソースが手に入ります。サイトが存続している限り、2 つ目のコードベースと、もう少しエンジニアリングの規律を課金することになります。ロードマップに最初のリストが必要な場合は、[連絡先ページ] (/contact) を通じて短い会話を行うことで、2 番目のリストがそれだけの価値があるかどうかを判断できます。