DEV Community

The trouble with implementing SSR into a Laravel/Vue app

Michael Z on April 06, 2019

Originally posted at michaelzanggl.com. Subscribe to my newsletter to never miss out on new content. TLDR: It is possible! This is meant for th...

Read full post

KP • Jul 25 '19

@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.

Michael Z • Jul 25 '19

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.

KP • Jul 25 '19

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.

Bertug Korucu • Oct 8 '19 • Edited

@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...

wj • May 17 '19 • Edited

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?

Michael Z • May 17 '19

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).

matus0011 • Mar 31 '20

Why, for example: on-click, v-model cannot detect vue ?

Michael Z • Mar 31 '20

on-click and v-model should work just fine. Maybe it is something else with your setup. Try replicating the issue on a barebones Laravel application.

matus0011 • Apr 1 '20

Thanks for the reply, vue already can detect events.
I have next question,how to correctly implement external dependencies like vue-select ? because now when i try implement external dependencies i get error " window is not defined"

Michael Z • Apr 1 '20

This seems to be an issue with the vue-select library itself: github.com/sagalbot/vue-select/iss.... (There are a couple of closed issues related to this, hopefully you can find a solution in one of them)