To start here are the terms used in the article to help you understand.
Client-side rendering allows developers to make their websites entirely rendered in the browser with JavaScript. Instead of having a different HTML page per route, a client-side rendered website creates each route dynamically directly in the browser. This approach spread once JS frameworks made it easy to take.
Server-side rendering allows developers to pre-populate a web page with custom user data directly on the server. It is generally faster to make all the requests within a server than making extra browser-to-server round-trips for them. This is what developers used to do before client-side rendering.
Client-side rendering manages the routing dynamically without refreshing the page every time a user requests a different route. But server-side rendering is able to display a fully populated page on the first load for any route of the website, whereas client-side rendering displays a blank page first.
Pre-rendering is a tradeoff between client-side and server-side rendering. Every pre-rendered page displays a skeleton template while the data waits to be rehydrated with AJAX/XHR requests. Once the page is fetched, internal routing is done dynamically to take advantage of a client-side rendered website.
When we initially launched, we started out with the basics which were vue.js hosted on AWS S3 with Cloudfront. This was actually a very good setup in the beginning because it was very low cost, the costs of S3 were very negligible.
This was all going fine until we started running into some major issues, which were:
SEO not working properly on website (Caused by client side rendering). Google wasn't indexing our website properly, which was making our website being tagged for the wrong keywords e.g. block number cell phone and "fraud detection" and filetype:pdf.
Sharing social links returning the title and description of the homepage (Caused by client side rendering).
Pages being marked as duplicates (Caused by client side rendering).
Due to these numerous problems, we noticed there was only a few ways to fix the problems which are server side rendering and prerendering.
Pre rendering wouldn't work for our use case because we have dynamic routes e.g. url/instructor/:id and these url's wouldn't be able to pre rendered for SEO bso we decided to go with server side rendering.
Rather than using webpack and implementing server side rendering on our Vue.js application, we decided to migrate to Nuxt.js which has Server side rendering built in and more functionalities. I would also mention here that moving to Server side rendering we stopped using S3 and moved to AWS Elastic Container service and EC2 instances.
We left S3 because it doesn't have a server and its just for static websites. I'll also note that this would be an increase in our cost because we are paying for EC2 instances running 24/7 rather than S3 buckets.
Nuxt.js is a frontend framework built upon Vue.js that offers great development features such as server side rendering, automatically generated routes, improved meta tags managing and SEO improvement.
Nuxt.js offers many benefits to front-end developers, but there was one key feature that made our decision to use this framework final – SEO improvement. We really needed this feature because as a young startup trying to get the word out there about us, I believe that our SEO should be 100% effective, so that the various crawlers e.g. Google can index your website properly.
To improve SEO, Nuxt.js uses SSR (Server Side Rendering). SSR is fetching AJAX data and rendering Vue.js components into HTML strings on the server (Node.js). It sends them directly to the browser when all asynchronous logic is done, and then finally serves the static markup into a fully interactive app on the client. This feature allows for great parsing through DOM elements with the Google SEO parser. SEO parser is parsing through DOM elements with enormous speed immediately when the website DOM is loaded.
On the other hand, typical SPA applications built with frameworks like Vue.js, React, Angular and similar are fetching data from backend with AJAX after DOM is loaded, and therefore SEO parser is not able to parse all of the DOM elements, because there are not yet rendered. AJAX fetching is asynchronous, while SEO parsing is not.
That's why we switched from Vue.js to Nuxt.js. I'll provide an update later on to see how much this change increased our AWS bill.
If you have any questions about this topic, please reach out to me.