How to Perform Pre-rendering in Vue CLI 3?

Aashay Trivedi — Tue, 08 Oct 2019 16:19:33 +0000

Single page apps are awesome. Developing single-page apps with frameworks like angular, react or vue make your app more user-friendly. Along with that, Internal page navigation is the plus, take Dev.to website for that reason.

So, everything’s good then What is bad?

As you know, there is just one HTML file and all the data loads in that file dynamically. Google and Bing claim that they can read the dynamic content but, for the website with several routes it cannot. Also, for single-page apps, google bots need to go an extra step to read dynamic content. The average page loading speed of a single-page app is way higher then the multi-page application having a server.

I searched on the internet for pre-rendering but could not find a blog for Vue CLI 3 so, I thought I should share my experience. I found prerendering articles for Vue CLI 2 and it took me 2-3 hours to understand for CLI 3. I hope this article will save you time and get the prerendering job done in the least amount of time.

How Pre-rending can be helpful?

With pre-rendering, you can create individual HTML files for each route. This helps search engines to read the content on your website and it also helps to improve page loading speed. So, let’s start!

Install PreRender SPA plugin

Install the prerender plugin by typing this command. But the way this plugin created by Vue’s core team member

npm i prerender-spa-plugin

Now, you need to create a vue.config.js file manually at the root of your project. In Vue CLI 2, it comes by default but with Vue CLI 3, it does not. Copy and paste the following code in the vue.config.js file, and include all the routes that you want to prerender.

var PrerenderSpaPlugin = require('prerender-spa-plugin')
var path = require('path')

module.exports = {
 configureWebpack: config => {
   if (process.env.NODE_ENV !== 'production') return

   return {
     plugins: [
       new PrerenderSpaPlugin(
         // Absolute path to compiled SPA
         path.resolve(__dirname, 'dist'),
         // List of routes to prerender
         [ '/', '/about'],
       ),
     ]
   }
 }
}

It’s done. Now run the build. Once the process completes, you will find that inside of the dist folder, individual folders for each route has been created. Each route folder will have an HTML file containing the static data. The Javascript will be stored in an individual folder named JS.

Great, are we done? Well, not yet!

When you deploy the project to the Ubuntu server, you may get an irritating PuppeteerRenderer error and the build will go into an infinite loop. if too many chrome instances are launched then you will get this error and to perform pre-rendering you need to install puppeteer.

So, install Puppeteer on the Ubuntu server,

npm install puppeteer

In the Vue.config.js file, make headless to false. By default, it comes false, but in case you have turned it to true then make it false.

And finally, you are done. For my website, I have performed prerendering with these steps. I have an improvement in the page loading speed and Google’s ranking after I prerendered.

If your website is having several dynamic routes then you should choose server-side rendering. It has a server-side framework working. For SSR, whenever your server receives a request for a particular webpage, the code is loaded on the server as well as the client-side. So, you need a powerful server to receive many requests.

I think I have covered everything regarding pre-rendering. If you find any other error while performing, then please let me know. I will try to help you out.

DEV Community: Aashay Trivedi

How to Perform Pre-rendering in Vue CLI 3?

How Pre-rending can be helpful?

Great, are we done? Well, not yet!