What’s New in Vue.js 2.0 — Server-Side Rendering

Anthony Gore
Oct 3, 2016 · 3 min read
Image for post
Image for post

Vue.js version 2.0 was officially released last week. One of the major new features in this version is server-side rendering.

At first glance, server-side rendering seems to be a magical way to make your app load a lot faster. You put the URL into the browser and…bam! There’s your app loaded with almost no delay.

Actually, your app still loads at roughly the same speed, maybe slightly slower. But with SSR (let’s use that as an abbreviation), the page arrives in the browser pre-rendered in it’s initial state. You don’t have to wait for Vue to be loaded and to make it’s modifications to the DOM before you can see something.

But, like anything, there are pros and cons to SSR. In this article we’ll look at how it works and consider if you actually need it.

How does server-side rendering work?

We first need to understand what happens when a website loads. Here is simplified breakdown of the sequential events of a Vue.js powered webpage loading:

  1. User enters the URL of a site they want to view e.g. http://localhost:3000/vue-app

Here’s the point: there’s a (usually small) delay between rendering the initial HTML page and the Vue app re-rendering the page in it’s initial state.

SSR helps minimise this delay by providing an HTML page with the app already rendered.

Server

So what’s happening server-side to allow this? Even if you have a Javascript server like Node.js, how can a server actually render a page when there’s no DOM?

As discussed in our previous story, Vue.js 2.0 also includes a virtual DOM feature. So when the server receives a request for the page, it uses the virtual DOM to figure out how to generate the HTML output appropriately.

You can wait for the server to generate the file and send it back in one go, or better yet, Vue’s SSR allow you to stream the response as it’s generated rather than all at once at the end.

Pros and cons of server-side rendering

Pros

  1. It delivers your rendered app to the user faster

Cons

  1. It’s not as easy to code your app. You have to think about architecting your page in such a way that both a browser and a server could render it. It can be fairly tricky and you will likely need to utilise vue-loader to modularise your app and vuex to handle state.

Okay, let’s see it in action

Code snippets won’t do this justice so checkout this video I did demonstrating a basic SSR implementation using Node.js

Vue.js Developers

Helping web professionals up their skill and knowledge of…

Anthony Gore

Written by

Here to teach you Vue.js! Course creator, Blogger, Vue Community Partner, creator of “Vue.js Developers”

Vue.js Developers

Helping web professionals up their skill and knowledge of Vue.js

Anthony Gore

Written by

Here to teach you Vue.js! Course creator, Blogger, Vue Community Partner, creator of “Vue.js Developers”

Vue.js Developers

Helping web professionals up their skill and knowledge of Vue.js

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store