So you've heard about Headless CMS. You also heard about Web Apps and SPAs. Now you start hearing about PWAs. Well, VueFront is all that and more. But let's start from the beginning.
VueFront is built on VueJS and Nuxt. It is a single page application (SPA), meaning all of the HTML and CSS are precompiled and shipped to the client (browser) and then pages are rendered by the client without refreshing the page. This is called client-side rendering.
With SPA's all the styles and HTML are already downloaded on the first load, providing a better user experience, so after that, all you need is the data to "hydrate" the pages. Thats where the Headless comes to play.
With SPA you get a better user experiance
Since VueFront is a Web App, it needs data to render the pages. In the early stages, Web Apps utilized the available REST APIs. Today, with the help of Facebook, more and more Web Apps are implementing GraphQL.
GraphQL provides a different approach to developing your API endpoints. Instead of creating a separate endpoint for every collection of data like /users or /products/{product_id} we use one single API endpoint often named /graphql
To implement this GraphQL API on a CMS, VueFront has developed for each CMS a specific extension (ex. Wordpress has a VueFront Plugin). These Extensions are installed like any other CMS extension and their main focus is to provide an API endpoint which we like to call CMS Connect URL.
These extensions, when installed, turn any CMS into a Headless CMS.
VueFront CMS Connect App turns any CMS into Headless, and VueFront Web App uses that Headless CMS API to populate the pages with data
Now that we have an understanding of how VueFront works, we should also know what VueFront does.
First of all, VueFront is a Single Page Application (SPA). But we didn't stop there. We also implement the requirments for VueFront Web App to be a Progressive Web App (PWA)
A PWA is basically a list of requirements necessary to turn a website into a mobile-like native app. These requirements include:
These requirements are ment to make the web app engaging, reliable and fast, just like a native app.
VueFront is a Web App so it is required to be precompiled or build. This means all the HTML and CSS have to be prerendered into plain HTML, JS, and CSS and compressed for you to upload to your hosting.
There are several ways of hosting a web app.
The simplest way to host a Web App is to yarn build it as a Single page application upload the ./.nuxt folder content into your root folder on your hosting.
Your app will be available via https://mysitename.com/index.js and if you configure your Apache or Nginx to open index.js by default, your site will be available to the public.
Unfortunately, this simple solution has a major SEO disadvantage, so-called SEO problem. Lukelly this issue is taken care of in the next two options.
VueFront can be hosted as a static site. This means that all pages are generated during precompilation. To do this we use the yarn generate command. The contents of the site are then precompiled and placed under the ./dist folder
This cool thing about this option is that all pages of your website are actually created and saved as .html file. Just like a static site.
When a visitor hits that page, since it is available, your server responds extremely fast and when browsing, your website performs just like an ordinary SPA.
Google bot also sees these pages and can index them so there is no SEO problem anymore.
The downside of such a website is that you actually need to rebuild your website on every change. This is ok for a blog but is very challenging for an e-commerce website.
To solve the issue with updating the site and also keep it SEO friendly, we have Server-side rending (SSR).
SSR works just like any other old-fashioned website. When a visitor hits your webpage, it is built on the server and a fully hydrated page is delivered to the client. Just like a static site. Then the client can browse the website like a SPA.
With SSR your website will always be up-to-date so you don't need to rebuild your website on every change.
Yet, SSR comes with a limitation. It requires your hosting to have NodeJS running. Many hostings do not provide this feature out of the box and it is up to you to install and setup NodeJS (version >= 8) on your own.
To help you do this we created the documentation for setting up VueFront with Apache+NodeJS and Nginx+Nodejs for WordPress, Magento, PrestaShop, and OpenCart. (Coming soon...)