質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

SEO

SEO(Search Engine Optimization)は、検索エンジンでウェブページがランキング上位に上がるように工夫する様々なテクニックの事です。

Blade

Bladeとは、 PHPフレームワークのLaravelで使用することができるテンプレートエンジンです。テンプレートの継承とエスケープ機能を提供します。

Q&A

解決済

2回答

2443閲覧

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

ebizo_0202

総合スコア5

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

SEO

SEO(Search Engine Optimization)は、検索エンジンでウェブページがランキング上位に上がるように工夫する様々なテクニックの事です。

Blade

Bladeとは、 PHPフレームワークのLaravelで使用することができるテンプレートエンジンです。テンプレートの継承とエスケープ機能を提供します。

0グッド

0クリップ

投稿2019/10/29 02:58

編集2019/10/29 03:02

背景

現在 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 問題ないよ
  • ③ 使ったことあるけどプロダクトで採用できるレベルで使いやすいよ
  • こんな方法もあるよ

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

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

投稿2019/11/12 01:28

kawax

総合スコア10377

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

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

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

laravel-server-side-rendering

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

投稿2019/10/29 07:05

mikkame

総合スコア5036

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mikkame

2019/10/29 07:18

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

2019/11/05 03:15

なるほど、とても参考になります!m(_ _)m やはり ① が妥当かなーといった印象ですね〜。 ②はインスタが有名なのですね!ちょっと調べてみます。 OGP問題もありますよね。meta タグで頑張ればもしかしたらいけるかもですかね〜。 ③はおっしゃるとおり node.js が必要になります。。><
mikkame

2019/11/05 03:21

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問