How to implement SSR for single vue component inside of laravel application?

Question

I'm working on an laravel project. There're a lot of vue components and I need to make SSR due to SEO. I can't use nuxt.js or something like it because of my app is not SPA. I have default mix settings:

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.sass', 'public/css');
mix.disableSuccessNotifications();

I put the vue components to laravel views (blade templates) like <example-component></example-component>. How may I implement SSR for there components only in this case?

I need to add this components as rendered html to the response, not as <example-component></example-component> due to SEO.

You may not need to do SSR for SEO. It could be enough to only render the necessary information for SEO. Google does not consider this as cloaking. — Radu Diță, Mar 11 '19 at 11:28
@RaduDiță before asking a question here, I asked about it on webmasters.stackoverflow: https://webmasters.stackexchange.com/questions/121490/ check it out, I guess I need to do SSR here — Alexxosipov, Mar 11 '19 at 11:41
This is a great resource https://sebastiandedeyne.com/server-side-rendering-javascript-from-php/ — Derek Pollard, Mar 13 '19 at 22:16
I think i saw a webworker based solution for this, but cant remember when or where — Estradiaz, Mar 16 '19 at 07:56
@DerekPollard yes, checked it out, but there's no SSR for single components, this solution based on replace of root div — Alexxosipov, Mar 16 '19 at 12:44

score 3 · Answer 1 · answered Mar 19 '19 at 22:32

3

Server side rendering is not a one liner, but there are a package for laravel to do it, please check it out:

https://github.com/spatie/laravel-server-side-rendering

answered Mar 19 '19 at 22:32

Apród Illés

266
1
12

score 0 · Answer 2 · answered Mar 13 '19 at 22:23

0

The current solutions require the use of Node, or in extreme cases PHP in combination with V8Js engine.

See https://ssr.vuejs.org/guide/#integrating-with-a-server to get you started. vue-server-renderer is based on a Node/express.js implementation that renders your HTML beforehand.

I have not yet tried any solution that is PHP based and unfortunately this is the best answer I can give to you at the moment.

answered Mar 13 '19 at 22:23

Flame

6,663
3
33
53

I wouldn't consider a PHP renderer an "extreme case" - you gain the familiarity and separation of having SSR done with something you're comfortable with. That's why there are packages from RoR and Laravel that are so popular – Derek Pollard Mar 13 '19 at 23:37

score -3 · Answer 3 · answered May 24 '20 at 23:30

-3

Use only blade. Don't use components of Vue. You can use them for unecessary things of Clawer, Search Engine like Forms, Payment, Bookings, Carts, Check Out,

answered May 24 '20 at 23:30

Ben Jeckson

1

How to implement SSR for single vue component inside of laravel application?

3 Answers3

Linked