【Laravel + Vue.js】HTML レンダリングのベストプラクティスとは？（Nuxt.js は使えないという縛り）

Question

背景

現在 Laravel + Vue.js で 画面数 100 未満の中規模な WEB サービスを開発しているのですが、HTML のレンダリング方法で悩んでいます。

是非、みなさんの知恵をお貸しください。

そのサービスは SEO を意識しなければならないのですが、やんごとなき事情で直近は Nuxt.js を使うことができないという縛りがあります。
しかしゆくゆくは Nuxt.js を使っていきたいので、出来れば Vue.js のコンポーネントで HTML を作成していきたいと考えています。

HTML をレンダリングする手段

このような状況で、HTML をレンダリングする手段は 3 つ考えられます。

① Blade テンプレートを用いて HTML を作成しリクエストに対してそのまま HTML を返す。
② Vue.js のコンポーネントを作成し、Blade テンプレートから JSON 文字列を渡して HTML をレンダリングする。
③ Laravel で Server Side Rendering する。

① Blade テンプレートを用いて HTML を作成しリクエストに対してそのまま HTML を返す。

一番シンプルな方法で SEO 的にも問題ない方法だと考えています。
しかし、将来的に Nuxt.js を使っていきたいのでどうしても Blade で HTML を作成することに引け目を感じてしまいます。
さらに、Lint が効かないことも Blade で HTML を作成していくことへの抵抗感を生んでいます。

② Vue.js のコンポーネントを作成し、Blade テンプレートから JSON 文字列を渡して HTML をレンダリングする。

将来的に Nuxt.js を使っていきたいと考えていて Vue.js のコンポーネントが再利用できそうなこともあり、是非 Vue.js でコンポーネントを作っていきたいと考えています。

このような形で Blade から Vue.js のコンポーネントへ JSON 文字列を渡す想定です。

しかし、SEO 的に問題がありそうだと考えています。
一瞬、何もない HTML が返されてきて JavaScript が実行されるタイミングで HTML がレンダリングされます。
Google のクローラーは JavaScript を実行すると言われていますが少し抵抗があります。

③ Laravel で Server Side Rendering する。

laravel-server-side-rendering を利用して Laravel で SSR を実現するというものです。

SSR するので SEO 的にも問題がなさそうなことと、Vue.js のコンポーネントも使えるのでアリかなと考えています。
が、採用例があまり見られないので、使ったことがある方は使用感など教えていただけると嬉しいです。。

まとめ

以上、長文になってしまい大変恐縮ですが

• ① でもこうすれば Blade で lint 使えるよ
• ② でも SEO 問題ないよ
• ③ 使ったことあるけどプロダクトで採用できるレベルで使いやすいよ
• こんな方法もあるよ

などのご意見、ご指摘をお待ちしております。

Answer 1

SEOに影響しない一部分だけVueコンポーネントで作る。
文字列表示するだけならBladeでそのままでいい。
動きが欲しい箇所だけVue。

そもそもLaravelのデフォルトはこの使い方を想定してるのに
BladeかSPAかみたいな両極端な発想しかしない人が多い。

Answer 2

①おっしゃる通り無難な方法。
将来的が、必ずやってくるなら考えものですが
現時点で保証されていない将来（①案で実装するがニーズがなかった）であれば
とりあえず①案で実装し、将来性があればNUXTにしても良い
が、エンドユーザが求めているのはNUXTではない。

②この案で有名どころの実装はインスタな気がする。

③

laravel-server-side-rendering

これの詳細を見ると、最終的にnodejsがサーバ上に必要そうです。
nodejs+phpのインフラを作るとなると、自前でVPS組む（保守大変そう）か
カスタマイズしたオートスケール環境（AWS EBとか？）、コンテナサービス（AWS ECS）で整備する必要
があるかと思われます。

Comments

[mikkame]

あと②にかんして、GooogleさんはJSでSEO認識してくれると公言していますが
OGPはFBもTwitterも対応してくれないのでここが致命的な弱点です

[ebizo_0202]

なるほど、とても参考になります！m(_ _)m

やはり ① が妥当かなーといった印象ですね〜。

②はインスタが有名なのですね！ちょっと調べてみます。
OGP問題もありますよね。meta タグで頑張ればもしかしたらいけるかもですかね〜。

③はおっしゃるとおり node.js が必要になります。。＞＜

[mikkame]

チーム構成にもよりますが
②/③だと
node+SSR+PHP+サーバとかいうフルスタック気味人材が必要なので
社内で複数人このような人を確保できないと辛い気がします。