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

Anthony Gore
Oct 3, 2016 · 3 min read

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. Server receives request from browser, sends back an HTML document
  2. Browser receives, parses and renders HTML document. But at this point the page may look “incorrect” because there are images, CSS and JS files linked in the page that have not yet been downloaded and run. So the browser now requests these files from the server as well.
  3. Let’s say one of those linked files was a Javascript file called vue-app.js. Once the browser receives this file from the server it will run it. The script initialises a Vue.js app.
  4. Now that Vue is initialised, it figures out what state the page should be in and modifies the DOM accordingly. The user now sees the page “correctly”.

Pros and cons of server-side rendering

Pros

  1. It can be beneficial for SEO. Site crawlers may not get parts of your page that are fetched asynchronously.
  2. Users with old browsers or no AJAX can still see something
  1. The server may be slightly slower to respond as it has to do the work to render the page. You can utilising caching and streaming to minimise any delay.

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 Vue.js

Anthony Gore

Written by

Here to teach you Vue.js! Vue Community Partner, creator of @Vue.js Developers. Take my free Vue intro course: https://bit.ly/2Eb4uPT

Vue.js Developers

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