Single Page Applications and their Issues
The trivago Magazine started as a simple WordPress (WP) blog about interesting hotels and travel destinations. We used a customized WP theme that provided proper user navigation as well as SEO and further functionality. Even though WP offers a content management system that is set up easily and can be used by most editors comfortably, it also causes a lot of issues such as performance problems, scaling issues, tough maintainability, and many more.
As SEO traffic is very important for the trivago Magazine, we produced HTML landing pages containing SEO tags and further important HTML tags and stored these HTML pages as entry points for the SPA. However, the situation with the SPA and the custom HTML entry points was still very unsatisfactory.
Server-Side Rendering - Nuxt.js to our Rescue
Having these issues in mind, we started to come up with new ideas on how to improve our situation. Besides several small improvements, our main idea was to switch over from an SPA - and, thus, Client-side Rendering (CSR) - to Server-Side Rendering (SSR) keeping our freedom gained by separating the frontend application from WP using Vue.js.
In general, SSR can improve SEO traffic and performance, as all the content is already rendered as HTML source code and, thus, can be rendered faster by the customer’s browser (see also this page for an overview of Client-Side vs. Server-Side Rendering). For implementing SSR, there are different approaches. One solution is to pre-render everything with a custom solution or with Puppeteer, Rendertron, or prerender.io. The Vue.js website suggests using either vue-server-renderer and create an SSR configuration on your own or using specific frameworks such as Nuxt.js.
For the trivago Magazine, we decided to go for Nuxt.js. We simply wanted to focus on application development instead of doing errorprone SSR configurations based on a basic Vue.js or even changing to a completely different framework. For a summary of the benefits of using Nuxt.js, we refer to this blog post. As we were already using Vue.js for the trivago Magazine before, the migration from Vue.js to Nuxt.js was not a big deal from the technical perspective.
Pre-Rendering - the Ultimate Solution for the trivago Magazine
When we started to work with Nuxt.js, we eventually decided to go for pre-rendering and not for the universal SSR mode for the trivago Magazine. Most content that is being created by our content managers in the trivago Magazine is static. Although, we also have some CSR content in the trivago Magazine, we usually only have to pre-render our content when we add, modify, or delete articles or when we add, change, or remove application features. Essentially, we have mostly static content that allows us to use pre-rendering provided by Nuxt.js.
So, if you want to benefit from CSR and SSR on a per-component basis and want to have a comfortable framework for this based on Vue.js, the trivago Magazine developer team highly recommends Nuxt.js for your application.