WordPress + React.jsでのウェブサイト構築事例リサーチ
『Monument Valley』などでも知られるウェブ＆アプリ制作プロダクションustwoが、自社サイトをWordPress + React.jsで構築した事例をオープンソースにしていて、このアプローチに興味を持ちました。しばらく追いかけてみたところ他にも事例があったのでまとめてみました。
※単にリサーチをしたまとめです。筆者はこの手法でサイト構築をした訳ではないのでその点はご留意下さい。
パターン１: Node.jsでisomorphicなウェブアプリを構築 ＋ WordPressをバックエンドとして利用
ustwo.comは、Node.jsでサイトを構築し、WordPressはAPIサーバとして利用しています。いわゆるisomorphicなアプリケーションになっていて、サーバ側でのHTMLレンダリングもWP API経由でデータを取得してJavaScriptで行っています。
パターン2: WorsPressでサイトを構築、PHP V8JSでサーバ側レンダリングを行ってisomorphicアプリとして実行
「PHP V8JSでサーバ側でレンダリングしてる事例もありそうだな」とググったら出てきました。PHPからV8を実行してJavaScriptベースのテンプレートをレンダリング、クライアント側でも共通のコードを実行するようになっています。
パターン3: WordPressでサイトを構築、クライアント側でSPAとしてページをレンダリング
dot by dotさんのコーポレート・サイトの構築事例が、Qiitaで公開されています。
サーバ側では、JavaScriptのインクルードなどだけを行う空のHTMLを出力し、JavaScript(React)アプリからWordPress APIを叩いてクライアントサイドでコンテンツをレンダリングしています。一度サイトをロードした後はReact Routerを使ってページの切り替えなどを行う仕組みです。
ユーザー・エージェントを見てレンダリングの方法を切り替えており、Google Botなどの検索エンジン用ロボットに対しては、WordPressでコンテンツのレンダリングを行っているとのこと。
(2017.7.4追加)
雑感
パターン1は自由度が高い反面、PHPサーバとNode.jsサーバの両方を運用する必要があります。WordPressはホスティングサービスも多く、CMSとバックエンドはホスティング、フロントは自前という運用もありですが、やはり運用が重たい印象です。
パターン2は、githubのプロジェクトページによるとレンダリングに200ms程度かかっているとのことで、アクセスの多いサイトではサーバ資源の要求が高くなるかもしれません。
その点、パターン3は現実的な実装となっています。WordPressホスティングでの運用を考えても、特に障害はなさそうです。ブラウザでの閲覧時にサーバ側でコンテンツのレンダリングが行われないのですが、サイトを見る限り表示も早いですね。
調べる前はisomorphicじゃないとという先入観がありました(筆者はisomorphic信者です)が、検索エンジンクローラーの対策ができていてユーザー体験としてもこのスピードが実現できるなら別にいいかなという印象に変わりました。
ということで、簡単ですがひとまずまとめました。他のパターンがありましたら、@mshkまでメンションなどいただければと思います。
