Rollercoster Gatsby Tutorial

Wow! the Gatsby Tutorial was quite a rollercoaster ride!

Background: Coming from being very comfortable with VueJS and APIs. BUT, having just created a few sites in double quick time using Hugo I am really impressed with this JAMstack idea. I’m thinking I could double down by learning Gatsby.

Diving in… https://www.gatsbyjs.org/tutorial/ I was quite liking it before section 4 …ok so this JSX thing works quite nicely for creating computed HTML, …and CSS and Typography. I’m getting it.

Section 4 (on data)… SAY WHAT! You have to do how much boilerplate just to get the site meta data into a page? And the same again to get it onto a different page.

Pushing through to section 5, 6 & 7… ok so I see this is a unified data system …liking that idea. Seems a bit like I have hammer, so everything is a nail. But ok I get it - if I develop ninja hammer techniques I’m set.

Section 8 (deploy) …I can improve the Lighthouse score …Let’s look at the page source. SAY WHAT! What is all this? Looking further into the generated public directory, no nice html pages like Hugo creates… A whole heap of js files. This isn’t a static site generator - at least not a static pages generator. It is more a statically served single page app generator. I was mis-sold… Calming down…Actually I can see use cases where this would be an advantage. It is pushing more capability out to the edge. A big win for sites with massive traffic?

Questions - I am sure there are answer but they are open for me:

  • am I losing the search-ability of static pages?
  • how do I protect routes for certain roles?
  • for low volume startup sites, should I just stick to single page VueJS app with APIs (maybe GraphQL)? OR Is this just familiarity bias.

Ho hum….