DEV Community

Michael Caveney
Michael Caveney

Posted on

What Does Gatsby Mastery Look Like?

#discuss #gatsby #react

Few web dev technologies sparked joy for me like Gatsby, and I've been thinking about what real mastery in the framework looks like. The obvious things to me seem like:

  • Deep comfort with Reach Router and which of it's features can save work in certain instances.

  • Understanding what sort of query (static vs page) to use and when.

Some things I wonder about:

  • Which plugins one needs to know forwards and backwards, versus just looking up when the use case for it comes up.

  • Are there React features we're better off not using in Gatsby?

Are you or somebody you know an expert in Gatsby? What does expertise in the framework look like to you?

Top comments (3)

Collapse
 
stemmlerjs profile image
Khalil Stemmler • • Edited

Some of the things I've learned after using Gatsby since v1.

Basics

  • know how to design and build an entire site from design to implementation
  • know how to query markdown, files, etc
  • know how to create a blog
  • know how to create tags/categories pages
  • know how to avoid failing builds by mentioning browser APIs
  • know how to reuse graphql fragments across components
  • know how to deploy to Netlify

SEO

  • know how to optimize the entire site for SEO in a clean way
  • know how to optimize server-rendered SEO pages
  • know how to use a prerendering service to optimize dynamic routes for social cards

Plugins

  • know how to build your own plugins to source data from an API and turn it into GraphQL nodes
  • know how to package your plugin as an npm module

More

  • know how to integrate with a CMS (like contentful)
  • create a serverless real-time JAM-stack app with users, authentication, chat
  • know how to trigger new builds using webhooks
  • know how to use a mixture of dynamic and prerendered content on the same pages
  • know how to make a music player with Gatsby
  • build an ecommerce site that handles payments with Gatsby
Collapse
 
dylanesque profile image
Michael Caveney •

This is a great list! Could you dig into what you mean when you say "optimize the entire site for SEO in a clean way"? Would that just be by using plugins like gatsby-plugin-react-helmet, or is are there other major considerations for that?

Collapse
 
stemmlerjs profile image
Khalil Stemmler • • Edited

Yeah for sure!

So, yes, using that plugin is a part of it. With respect to cleanly optimizing the site for SEO, we have to consider:

  • what are the different types of static pages that we have?: blog-post, normal, landing-page
  • what are the dynamically generated pages that we have?: user-profile, events, job-postings, etc

Because we want all of those different PageTypes to be SEO-optimized, we gotta do a little bit of design work to figure out how to cleanly address that problem.

Perhaps if every Gatsby page or template that were wrapped in a <Layout/> component, we might be able to provide some props to the <Layout/> and do all the SEO-setup in one place (Layout).

Also, if we were to setup JSON-LD, that would probably be different for each PageType (blog post JSON-LD vs. breadcrumb JSON-LD).

So there's a lot of things to consider about how to cleanly structure your SEO.

I wrote an article about this a while back, but it's a bit outdated now. Here's how I'm currently doing it on my blog.

Read next

mukhilpadmanabhan profile image

Magic of Next.js: Why It's a Game-Changer for Developers

Mukhil Padmanabhan -

joaofelipe profile image

Impostor Syndrome Doesn’t Define You, Dev

João Felipe -

srbhr profile image

JetBrains WebStorm and Rider Now Free for Non-Commercial Use

Saurabh Rai -

shieldstring profile image

Data Display in Gatsby

Agbo, Daniel Onuoha -