ReactやVueのサーバーサイドレンダリングといえばExpressなどを使ってNode.jsベースでやるのが一般的かと思います。LaravelでSSRまでカバーしようとすれば、通常は回りくどいやり方が必要になるのでハードルが上がってしまいます。
ですがこのたびlaravel-server-side-renderingを試してみたところ、とても簡単にSSRが実現できてしまいました。JavaScript処理系としてPHP拡張のV8Jsを使った場合や、Windowsでの実行も試してたので、導入の簡単な流れと、そこでわかったことをまとめてみます。
Laravelを準備
$ composer create-project --prefer-dist laravel/laravel ssr-app "5.5.*" $ cd ssr-app $ php artisan preset react // Reactを使う場合 $ npm install
など。詳細は割愛。
SSR用のComposerパッケージを導入
先述の通りspatie/laravel-server-side-renderingを使用します。このパッケージはspatie/server-side-renderingのLaravel向けラッパーで、React-Router使用時のLocation指定などもよしなにやってくれます。
$ composer require spatie/laravel-server-side-rendering
laravel-server-side-renderingの設定
設定ファイルを書き出します。
$ php artisan vendor:publish --provider="Spatie\Ssr\SsrServiceProvider" --tag="config"
config/ssr.phpに設定ファイルが作成されます。設定ファイルはデフォルトでNode.jsを使うようになっているので、V8Jsを使う場合には次のように変更します。
// @file config/ssr.php - 'engine' => \Spatie\Ssr\Engines\Node::class, + 'engine' => \Spatie\Ssr\Engines\V8::class,
Node.jsとV8Jsについて
laravel-server-side-renderingではサーバーサイドのJavaScriptの実行環境としてNode.jsとV8Jsを使うことができます。それぞれの注意すべき点として、
Node.jsでは、
- Node.jsが必要
- WindowsのNode.exeではエラーが出る（$ php artisan serveが開発環境として使えない。WSLのNodeなら動く）
V8Jsでは、
- ビルドが面倒（Ubuntuではaptとpeclを使ってインストールが可能。WindowsにはV8Js拡張込みのバイナリが配布されている）
- JavaScriptのコードによっては動かない（V8JsにはsetTimeout()などが無かったり）
などがあります。WindowsのNode.exeで動作しないのは私の環境が悪い可能性もあるので、念のため皆様の方でもご検証いただければと思います。
V8JsはWindowsでもそのまま動いてくれてありがたいのですが、MobXなどを使っているとsetTimeout()が無い！ と怒られてしまいました。
アプリケーションの作成
laravel-server-side-renderingのREADMEのほか、React/Vueを使ったサンプルなどを参考に作成します。動作確認だけなら手っ取り早くサンプルをcloneしちゃいましょう（.envは別に用意）。
完成したらReact/Vueのビルドを忘れずに。
$ npm run dev
など。
SSRの確認
環境変数のAPP_ENVをproductionにするとSSRが有効になります。
APP_ENV=production
ブラウザの開発ツールなどでJavaScriptを無効にしてもページがレンダリングされることを確認します。
まとめ
JavaScriptの処理系についてはそれぞれ制限があったりするので、開発環境ではV8Jsを使い、本番環境ではNode.jsを使うといったような使い方をするのも良い思います。
この手法はNext.jsのようなお手軽Code Splittingのような事はできませんが、Laravelで完結するアプリケーションを作るならSSRの選択肢の一つとして考えてみてもいいのではないでしょうか。
コメント