How to Perform Pre-rendering in Vue CLI 3?

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.

Comments

[Rishi U]

Nice article

Cannot you run this on a static server like an s3 bucket, instead of a ubuntu server? isn't it still a serverless spa that is pre-rendered

The package was written by Chris Fritz i believe, unfortunately he no longer maintains the package and it is running a little stale now. What are other options? Can this package be added to an existing vue cli 3 project?

thanks

[Anwar]

Great article Aashay, I waited so long for someone to open this topic, thought I was alone trying to perform prerendering!

Did you put your prerendered pages on another location than your SPA? I am redirecting bots to prerender.mywebsite.com so far, I wanted to have your view on this. Knowing I made a custom prerendering tool (using puppeteer as well).

[Aashay Trivedi]

Thank you very much for reading this article. No, I have not put my pre-rendered pages to the other location. I just generated build with "npm run build" and then it created a dist folder, inside of the dist folder it created individual HTMl files for each route.

I think you can deploy the dist folder anywhere and it will work fine. Only thing you should remember is that install NPM packages which are inside of the Package.json.

[kanedimaria]

During an epidemic season like this, what do you generally do? smash karts which I recently found, is a fantastic game to play throughout the winter months. I'd like to invite you to join me right now.

[Garrett Hensley]

I do this, but all of my folders contain the same index.html where it says javascript must be enabled

[Aashay Trivedi]

This might not work on localhost, you need to deploy your code on the server.

[chinachin]

I have successfully installed, thank you! word counter

[Adam Cassidy]

Also, the Youtuber; Ben Awad, says pre-rendering is iffy for sites that are updated frequently: youtube.com/watch?v=xTsYYxf2Ut0 . Thanks for the article!

[aricjoshua]

I have installed and tested it, all is very smooth cookie clicker