Improve SEO: Server Side Rendering Trick with Vue.js and Golang

After our previous post on how to integrate Vue.js into Wordpress, today we will talk about another thing which matters a lot: Search Engine Optimisation (SEO) and server-side rendering (SSR). This is one of the common problems for Single Page Application (SPA) as most of the contents are fetched using AJAX. Google and Bing can work well and index the content properly with synchronous JavaScript application. However, these search engine crawlers will not wait for your asynchronous content. This will result in poor SEO performance. Although Google has been improving in crawling the ajax content, this issue is by and large has room for improvement. Some old AJAX crawling technique which is now deprecated has been suggested by Google.

Due to this, server side rendering to help the search engine crawlers to understand the content become an important consideration. We have been excited by the Vue.js 2 since it provides built-in-streaming server side rendering. Nevertheless, after reading up on it, it leaves us doubt in how to integrate with golang backend API server, as the SSR is running on express server. Introducing another backend server for the sake of SEO is less than desired as we are simply duplicating the effort, from fetching all the data again from the database and processing it.

Actually, things are easier than we thought. We believe rather than fetching the data asynchronously, we could:

1. Create the backend PHP/Golang route controller which will handle full URL request that will return the HTML content (than just returning data via API). For example, you know crawler is going to crawl http://abc.com/my-first-page, therefore in your backend route, you should handle this route as well.
2. Fetched the data and insert it into the HTML template. For example in the index.html Golang template.

{{ if .Mydata}}
    <script>
        var myAjaxData = {{.Mydata }}
    </script>
    {{end}}

This code should not be rendered if there is no Mydata to be passed to it. 3. Before initiating AJAX request for data, check first if the data is already available, if so, discard the attempt and proceed to process the data. Example of Vue.js component code.

getData: function() {

    if (window.myAjaxData) {
         return
    }

    // if window.myAjaxData is not available, proceed to fetch the data
    axios.get(...)
}
mounted: function() {
    this.getData()
}

In this way, the whole thing becomes quite approachable yet we could improve the SEO of the site. The fact is when we started using this approach,  google webmaster failed to render the page and the content is empty in Feb 2017. When we checked in the Google search, the result actually extracts the snippet from the title meta data. Well, this was expected since google fails to render the data properly on the SPA. So we felt setback and thinking if to either use SSR or explore more alternatives.

To our pleasant surprise, google started able to render the data correctly since around 9 May 2017. The screenshot below shows the before and after rendering result.

Thanks Google, it's a job well done!

We hope you have picked up some tips today and leave us a comment if you able to use it successfully on your Vue.js development.

Did you find our e-commerce pre-setup checklist helpful for you? Share on Twitter or Facebook by using the super-easy share buttons on the bottom now!