One of the downsides of using Laravel as a backend for Vue.js was the inability to server render your code. Was. The release of Vue.js 2.5.0 has brought server-side rendering support to non-Node.js environments including PHP, Python, Ruby etc.
In this tutorial, I’ll take you through the set up steps for Laravel and demonstrate a simple server-rendered app. Get the code for this here on Github.
Quick overview of server-side rendering
If you aren’t familiar with server-side rendering (SSR), here’s a simple example: say we have an Vue.js app built with components. If we use the browser dev tools to view the page DOM after the page has loaded, we will see our fully rendered app:
<div id="app"> <ul> <li>Component 1</li> <li>Component 2</li> <li> <div>Component 3</div> </li> </ul> </div>
But if we view the source of the document i.e. index.html as it was when sent by the server, you’ll see it just has our mount element:
With SSR, your app does not load or run any faster, indeed it may run slightly slower as the server has the added task of rendering the app. But the page content is shown sooner therefore the user can see engage with page sooner.