14 January 2023
Over the last few weeks, I’ve been busy re-writing this website in NextJS. This site started back in 2021 as a simple HTML and CSS page, but my goal was to turn it into a website that could handle dynamically generated content and large images.
The original implementation was done in Gatsby, a huge plugin for React which focuses on static site generation (SSG). It uses GraphQL, a query language to pull the data you need at build time (thanks to SSG), rather than overfetch or underfetch data with a traditional REST API. GraphQL is a tedious and overengineered solution but has an undeniably beautiful integration with Gatsby and Contentful, the CMS that houses the content you see. Big props to Gatsby's plugin ecosystem.
Nevertheless, I decided to move from Gatsby to NextJS for a few reasons: a) GraphQL is overkill for my needs. b) Gatsby’s image optimization would not re-fetch images when inserted into the image modal (for records) I implemented. c) Long build times to launch locally, sometimes getting stuck and failing. d) Painful upgrading process with various incompatible plugins resulting in hours lost just trying to get the site to build.
If I wanted to take this site to a new level, I needed either server-side rendering (SSR) or client-side rendering. Both of which Gatsby offer (* SSR is paid and only available through Gatbsy cloud…), but I was keen to try the new kid on the block: NextJS. The batteries included framework for React. No more plugins and no more GraphQL.
The newest feature of this site is a client-side rendered nested comments section for the longer trips. This is embedded within the statically generated pages, which is awesome. Being able to chop and change between rendering methods introduces a new level of flexibility.
There is Google OAuth, and a complete backend for storing comments and users all housed on a PostgreSQL database behind the scenes. Emails are stored, but never used for anything other than email notifications for comment replies with a simple SMTP service connected to my Gmail.
The idea of this migration was to ensure this site remains as future-proof as possible. Building the features out today will lay the foundation for years to come. All developed by myself from the ground up – that’s the beauty of programming. Who knows what this site will look like in five years, or what I’ll even be up to by then. I could turn it into an ecommerce shop, a print store, or keep it as my personal site. And no, its not a blog.