CMS部分は便利だからWordPressを使いたいけど、テーマはReactで書きたい話

タイトルの通りの悩みがここ数年ずっとあります。

Web制作依頼は結局CMS運用が必要な場面が多い一方で、運用も一緒に依頼されるケースやCMS管理が一部分のみでいいケースが結構あります。加えてデザインは結構オリジナルなパターンが結構あって、アニメーションが必要なケースだったりレスポンシブが特殊なケースは結局コードしっかり書かないといけないことが多いです。

でも昨今ReactかVueでフロントを書く日々なので、テーマ開発のPHPにclass書いて、SCSS作って、JS書いてってのが結構めんどくさくて、、
どうにかReactでテーマ開発ができないかなーと思ってることを書いていきたいと思います。

<div id="app">は論外

真っ先に思い浮かぶのは、テンプレート部分に<div id="app"></div>みたいな感じでReactのルートを置いて、そこにReactで書いたテーマを差し込む方法ですよね。

Next.jsとかAstroとかのSSGが主流の昨今、この書き方はNGでしょうという感じです。描画にJSの読み込みを待たないといけない上にCMS部分はAPIで取得してから描画しないといけないのは、UX的にもSEO的にも大問題でしょう。

WordPress x React のようなキーワードでこの手法が結構記事として上がってくるんですが、あくまでReact初学者を狙った実務的ではない記事が多い印象です。

SSGでテーマ開発

次に考えられるケースが、SSGでテーマ開発する方法です。WordPress REST APIを叩いて記事の内容を取得して、SSGビルドのタイミングで静的ファイルとして出力するヘッドレスCMSの方針ですね。
これならSEO的にも問題ないし、UX的にも問題ないです。

ただ、これも結構めんどくさいです。WordPressの管理画面で記事を更新しても、SSGビルドのタイミングでしか反映されないので、更新のたびにビルドのパイプラインを回す必要があります。

プレビュー周りも結構大変で、テーマごとにプレビュー用の環境を用意する必要があります。
通常WP_Queryあたりを使う記事の取得クエリもAPIから取得しないといけないので、必要に応じてAPIのエンドポイントを追加する必要もあります。

完成後はセキュアで綺麗なWEBサイトができますが、開発工数と修正難度を考えると結構ハードルが高いですね。

理想

そもそもReactなりVueなりを使いたい理由は、テーマの複雑なデザイン部分をコードで書かなければいけないからなんですよね。簡単なブログサイトならブロックテーマのFSEで進めた方が楽なケースが多いと思います。

なので、その複雑な部分だけReactで書いて、デプロイのタイミングでWordPressのテーマファイルとして出力するみたいなことがしたいです。コーディンが必要な部分はReactで書いて納品ベースはちゃんとWordPressテーマとして出力されたものになっていてほしいですね。

結局見通しの良いテーマにならない気もしますし、テーマ修正の技術要求も上がるのでこれも全然実務的ではないですが、、