CREATIVE X 第2弾
CREATIVE X 第2弾
2018.05.15
#146
それいけ!フロントエンド

V8jsでシングルページアプリケーションのSSRを実現できるか検証してみた

いなば

こんにちは、フロントエンドエンジニアのいなばです。

今回はPHPからJavaScriptを実行することでシングルページアプリケーション(SPA)のサーバーサイドレンダリング(SSR)を実現する手法があることを知り、いてもたってもいられなくなったので検証してみました。

githubのリポジトリにサンプルがあるので、興味がある方はぜひクローンしてお手元で動かしてみてください。

PHPからJavaScriptを実行するには?

V8jsという拡張モジュールを使います。

この拡張モジュールは、» V8 Javascript Engine を PHP に組み込みます。

イントロダクションにあるとおり、このV8jsをインストールすることでPHP上でJavaScriptが実行可能になるようです。

V8jsが動く環境の用意

それではさっそく、V8jsが動く環境の用意をしてPHP上からJavaScript実行を試してみたいと思います。

今回は簡単に済ませるためすでにV8jsがセットアップ済みのDockerイメージを元にLaravelとVueを追加したリポジトリを用意しました。

さっそくV8jsが有効化されているか確認してみます。

問題なさそうです。

サンプルコードを実際に試してみましょう。

スクリーンショット 2018-02-27 0.37.24

PHPからJavaScriptの実行が本当にできてますね。

スクリーンショット 2018-02-27 0.37.38

さっそくV8jsでSSRを試してみる

まずはSSRなしで素直に最小構成のVueアプリを構築した状態です。素直にSPAなので、当然サーバーサイドでレンダリングしたHTMLは空のdivだけになります。

スクリーンショット 2018-02-28 1.09.48

それでは本題のSSRを試してみましょう。 vue-server-rendererを使ってサーバーサイド側でもVueが実行されるようにコードを追加、編集していきます

スクリーンショット 2018-02-22 23.05.48

ちゃんとSSRされていることが確認できました。

子コンポーネントを追加してSSR

とはいえこれだけではまったく実用的でないので、いろいろと試してみました。

まずは子コンポーネントを追加して一緒にレンダリングされるか検証します。

スクリーンショット 2018-02-22 23.13.48

これも問題なさそうです。

vue-routerを導入してSSR

今度はvue-routerを導入して試してみます。 初回アクセス時のSSRはもちろん起動後のページ遷移も問題なく動きました。

スクリーンショット 2018-02-28 1.54.03

Vuexを導入してSSR

最後にVuexを試みてみましたが、結論から言うとできませんでした。

Node.jsでサーバーサイドを実装するケースでは方法が用意されているようですが、V8jsでのSSRは今の所手段がなさそうです。

また、V8jsでJavaScriptを実行した時にブラウザ組み込みオブジェクトであるXMLHttpRequestは存在しないのでクライアントサイドのAjax処理は呼べないということが判明しました。

参考:

おわりに

「本当にPHPでSSRができるのか、いったいどこまでできるのか」という興味本位だけで調べてみましたが、やはりSSRは素直にNode.jsで行うほうがよさそうです。
最近であればきっとnuxt.jsを採用するのが一番なのでしょう。

ただ、PHP上でのSSRは初回起動時にアップシェルの描画までは行うことができるので、体感的な速度向上はいくらか見込めるのではないかと思いました。

参考: