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.
3
Answers
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.
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
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,