The trouble with implementing SSR into a Laravel/Vue app

Michael on April 06, 2019

TLDR: It is possible! This is meant for those who want to integrate server-side rendering into an existing Laravel Vue application. If you are p... [Read Full]
markdown guide
 

@mzanggl Thanks for the detailed post. I have a question. Did you try Lazy Loading with this approach? For me static loading works, however when I try lazy loading:

export const routes = [{
     path: '/', 
     name: "Home", 
     component: () => import('../views/Home')
}]

It throws:

Error: Cannot find module './js/chunks/server/0.js?id=c3384f174123f0848451'

The command "/usr/bin/node /home/vagrant/Code/project/storage/app/ssr/717358e60bfd52035a1e58256cdfbba0.js" failed. Exit Code: 1(General error) Working directory: /home/vagrant/Code/project/public Output: ================ Error Output: ================ internal/modules/cjs/loader.js:628 throw err; ^ Error: Cannot find module './js/chunks/server/0.js?id=c3384f174123f0848451'

Update: This is how I solved it - stackoverflow.com/questions/582169...

 

@mzanggl thanks for this article. I am interested in making my Laravel app quick to render (client-side), but SEO is super-important so I need SSR.
What are your thoughts on inertiajs vs nuxt vs github.com/spatie/laravel-server-s...?

inertiajs, in case you are unfamiliar:
github.com/inertiajs/inertia-laravel
github.com/inertiajs/inertia-vue
I just havent gone deep enough to see if SSR works with inertia.

 

I really like the idea of inertiajs, have been playing around with a while ago as well. But not sure if it is production ready yet, it's rather new. As far as I know though, the DOM will still be rendered through JS. With that in mind I would go with nuxtjs. Nuxt also provides more benefits than just SSR, you will get a proper battery included vue framework.

The solution I used for this article was only because I already had an app and couldn't afford to rewrite it with Nuxt.

 

Makes a lot of sense @michael
I'm biting the bullet and going with Nuxt (As painful as it is).

Cheers and you have a new github follower.

 

Hi Michael, thansk for sharing. That is all some piece of work. Question: what is the reason to SSR with Vue/Node while you have PHP/Laravel for the same SSR at hand? What issue did you resolved with SSR-ing Vue while having SSR capabilities of PHP?

 

Hi wj,

You only get SSR when using blade / raw HTML. With vue, react etc. all you get is <div id="app"></div> in the initial render. Then everything gets processed through JavaScript. This is enough for the user, but not for SEO.

We are basically following this approach.

And here is an indepth video.

Long story short, without SSR indexing takes more time and crawlers that are stuck on old JavaScript engines might not be able to read the content. (Luckily Google Bot was updated to Chrome 74 just recently).

 

You are wrong. PHP can understand JavaScript thanks to V8js. There is no need to spawn an external Node server.

 

setting up V8js is a hell process. I have been trying to implement it but its far more complicated.

 

In my research regarding v8js, the setup looked more complicated.

Actually the PHP dependency supports both Node and v8js.

 
code of conduct - report abuse