The tech splurge

First let’s chat about the choice of using Nuxt for this project. At the time of starting this project I already had experience in building applications with Vue. I even had the experience in using Vue SSR without Nuxt, integrating Vue Server Renderer manually to achieve this. The process to setting this up is a little cumbersome and to be honest I only ever did this so that I wasn’t completely ignorant to what Nuxt was doing under the hood. When it came to using Nuxt for the first time on this project the benefits became clear… very quickly.

Appearing on Google was important for Kairos Media, so the pages needed to be built in such a way that they were indexable with the page content in place at the time of indexing. Static Site Generation (aka prerendering) was not an option as a vast majority of the site contains dynamic data (I’ll get onto this in a second). I knew I wanted to use Vue and I knew it needed to be server rendered. Given these requirements and my previous experience with Vue, the obvious choice was Nuxt.

Nuxt has a great ecosystem of “modules”. Although maybe not quite as large as Next.js (the React equivalent) you are bound to find something that addresses one of your core needs for your Nuxt app. The purpose of these modules varies but a lot of the time they are built to help speed up the integration of third party libraries and services, such as Axios, Sentry or Google Analytics. Nuxt has modules for a raft of things, some official and some not. The availability of this module ecosystem was another reason for using Nuxt as it could speed up the development time without sacrificing on the quality of the finished product. I also feel that using these modules also helped improve the quality of the end product by freeing up time to focus on the experience of the site, rather than trying to figure out how to install and configure the third party libraries and tools needed.

Integrating and using Prismic

Prismic was chosen as the CMS primarily because using the platform from a non-technical point of view is extremely intuitive, vital for those who were going to be using the platform to update site content. The seamless integration with the Nuxt framework was another reason. A Prismic module exists within the Nuxt module ecosystem which really makes the integration with Nuxt and querying the API, from both the client side and the server side completely effortless. As the pages are generated on the server on initial load it was important that querying the Prismic API for the content was easily possible with a Node backend as the dynamic content from Prismic needed to be fetched and used to populate the page templates on the server. These are then sent to the browser as an HTML document with all the content already in place. It's much the same as how a page template with dynamic data is populated and served as an HTML document in other languages and frameworks (Ruby, Rails, PHP, Laravel) on the server side.

Prismic itself is an absolute dream to use for both the developer and the non-technical content managers using it to add and manage content. Some of the pages on kairosmedia.com, such as the case study pages, make use of Prismic slices. This allows the content editor to flexibly construct a case study page using whatever combination of predefined sections they want. There might be a "stat section" on one case study page followed by a "hero content block" section but the next case study might have the sections the other way round or one or more of the sections just not present at all. The typical way of looking at it is as a set of lego bricks.

Closing thoughts

The seamless page transitions, the menu transitions, the theme and content have all been executed with a high degree of quality leading to one of the most successful independent sites I have had the privilege to develop to date.

In hindsight the choice of framework and CMS really helped to give as much time as possible towards the execution of the project as possible, which I feel is reflective in the quality of the build.

From this project I learned a new framework and how to use and integrate Prismic into a server side rendered app. Most importantly though I gained first hand experience at how much time and effort is required to develop a site as the sole developer to such a degree of quality.