Things are always changing when it comes to web development so every so often I find myself rebuilding my website to experiment and learn new technologies. This time it is a 5 year old react site that I started with Create React App, used React Router & Redux to handle the site structure and data and had a custom UI I had converted from a custom SCSS framework. This site read data from 2 REST APIs. One from the same WordPress site I’ve had for years and another from a REST API I built on Symfony and API Platform. This site will live at https://archive.casadereyes.net for at least until I can get all the sections rebuilt. And make no mistake this is a total rewrite. All my componentWillMounts have become a thing of the distant past. Not to mention this whole new server component thing.
So the things I knew when I started my research.
- I was gonna switch all the data fetching to graphQL. Building these custom applications in Amplify for Cloud Brigade introduced me to graphQL and its has quickly become my prefered way of dealing with databases.
- I need to give Typescript a proper go. Sometimes you just have to bite the bullet and learn things if they are becoming a standard.
- I want to liven things up with a comprehensive animation library
- I want to find somewhere new and GraphQL friendly for my Rockets project
So I started with Gatsby. Seemed like an easy way to get something up and connected and running pretty quickly. They have done a lot of work integrating their platform with a lot of techs, especially WordPress and it all works pretty well. The problem is however I’m not really looking to build a static site based around 1 content source. I’d rather have updates in whatever cms or api I am using reflected without a build. And after taking a look closer under the hood I didn’t see the need for Gatsby’s extra graphQL layer. That said I can see lots of situations in which Gatsby would be the perfect choice for a project, especially if you have some platform requirements. Their plugins are extensive.
The next framework I tried, and the one i ended up going with was Nextjs. I was familiar with Vercel/Next from my work on Boomsupersonic for Cloud Brigade, and feel like it Next fits what I need as I plus I just plain like the way App router works. After Next the tech list is long but React, Mantine UI, AWS Amplify, Framer Motion, Elba Carousel, Apollo Client are doing most of the work.