Nuxt vs Gatsby initial thoughts

Home » Nuxt vs Gatsby initial thoughts

I’m building a project which will be a static site built from a CMS and using some sort of delightful trendy frontend. It’s a great opportunity to learn with a little pressure. I am not constrained to a Javascript framework but I am leaning towards one, just to leverage what I’ve been learning and see what’s out there.

Static

But that’s not to say that those frameworks are the only option; there are static site builders to avail of by the bucketload. In fact I went through a few on this run, the most interesting so far seemingly being 11ty. It has a nice npm setup and it seemed, on the front of it, to be very quick to get up and running. Of course, when I get down to what I want to create, I don’t think it’s exactly where I need to be at all, and in the course of creating pages dynamically from a CMS I ran aground and moved on. This could have been rectified with a little effort but I just wanted to move back to the JS frameworks rather than learning a whole new thing in the middle of my other learning. But 11ty looks cool and I will definitely return. I’m not so greatly enthralled by the markdown CMS thing, I really don’t see how much time/effort I save with Markdown, but hourses for courses eh. More power to you if you are into it. I played around with Hugo and Jekyll in the past as well, again these platforms seem to be popular and have their place. I am curious to go further with Hugo in particular. Later though…

Frontity

So that brought me to Frontity which I thought was an amazing idea – a WordPress.com backend and your React app delivering the meat. And it works great! The only thing that I wished it did was create a static site or provide some way to be hosted on your typical shared hosting environment, such as outputting static html (as far as I could tell it didn’t do this). I enjoyed the development flow of Git to deployment via the command line. How fancy, I said. I did find the React errors annoyingly mysterious, but that is not the fault of Frontity. It was cool, you could set up a store in the config file and use it around the place. I always wondered why a simple store in React was so difficult a proposition. But ultimately, the requirement to use Vercel or Netlify to deploy eventually was not what I wanted. May use it in the future though, for sure. Good support community too!

GraphCMS

So for a finish I was dealing with GraphCMS (there are millions of these – tried a few, mainly this one and Sanity – but found GraphCMS had great support and was enjoyable to use). GraphCMS is an online CMS outputting graphQl and you can set up your schema, do the content and view queries all in the same place. Very nice. So on the front of this I wanted to use Gatsby, as I am always trying to learn more React and I like Gatsby. But this time around, the errors were just breaking me down. And the constant need to re-run the dev environment. I was making headway, and I do enjoy being forced to write better code which Gatsby does – but I spent most if not all of my time trying to fix errors which were often things like constantly checking if variables exist before working with them. And it just got really annoying, especially because the dev environment has different document.window rules – so the dev server works great, but the build explodes over these errors and it can be hard to find where you went wrong. Not saying there’s anything wrong with this, I just found it exhausting.

Nuxt

So just yesterday I tried out Nuxt on the same GraphQL queries. I have learned a lot from the Gatsby/GraphCMS experience so I wasn’t completely cold going in, but I must say, it seems a lot more tolerant of me and my code. But perhaps this is a Vue thing eh? It always felt easier to get along with.

So far, what I like about Nuxt:

• One config file for all your modules, css, build methods etc.
• Creating dynamic pages required way less code that React (although, it is a bit more ‘behind the scenes’ which has it’s downsides too). Point to note: It creates the pages if you create links to the pages in the site. I am building a static site from a CMS so I was wondering, would I have to visit each page for it to be created or something? But no, if you use NuxtLink to link up to a path in the site, it will create that page (as long as you have the correct folder and slug template).
• Vue errors seem easier to clear. I have had some errors of the same nature as the Gatsby site, but they were easier to pinpoint and fix.

I’ll report back when I’m further on and maybe do a blog post about creating the dynamic pages on Nuxt, but for now, I am happy with it. But I do get bored…… 🙂