A lot of people are talking about JAMstack right now, and for good reason.
Many sites been using this stack for years, it’s nothing new. So why is it such a big deal?
Speed, Security, and Scalability
Gatsby, Next.js and others allow you to create a front-end that is focused on performance, security, and scalability for any data source.
The reason this is important is because it’s not just a small iteration on speed and security, it’s a huge leap.
The speed is not just fast, it’s almost instant. It doesn’t take an expensive host with the world’s most advanced caching rules to make it fast, it’s fast out of the box on cheap hosting.
As for security, if you are using static files, there’s nothing to hack. You don’t have to configure a plugin or setup special security controls on Nginx to be safe, secure is the default. Many sites will use dynamic content which has security implications, but the point I’m making is that we are starting with security and performance, not adding it on later.
That means a PHP based CMS like WordPress can have a headless or decoupled front-end (like this site), and it’s fast and secure. Click around my site to see an example of the speed. Guess how much I’m paying for hosting to get a site this fast? Free-99. Zero dollars.
Of course you can use any data source, including markdown files, a headless CMS like Contentful, an API like meetup.com events or Shopify products, etc.
Because performance is the default, and you are rendering most content server-side, scaling is easy. Serving a bunch of static files is an easy job for any web host, and even with millions of hits you don’t need your own server farm.
When using a PHP based website with a database, you need to optimize queries and fix all of your performance issues before you can start scaling. With JAMstack, it’s scalable out of the box.
Bonus: GraphQL and Serverless
Along with the new wave of front-end technologies, we also have new APIs like GraphQL. GraphQL allows you to make more performant requests to your APIs by building your own queries for only what you need. I won’t go into this too deeply here, but suffice it to say that it’s faster than REST, and it’s baked into Gatsby. There’s even a plugin for WordPress to add GraphQL.
Serverless is another technology that is making our lives easier as developers and improving scalability. Serverless is a bit of a misnomer, because it still uses a server. However, it’s a server that doesn’t need any configuration, and only boots up when it needs to be used. This doesn’t have anything to do with JAMstack directly, but it’s being used more and more for API back-ends.
Trade-offs and Hang Ups
JAMstack is a different paradigm, so you can’t just flip a switch and have all the old stuff work. Here are some examples.
- Templates are on the front-end, probably in React. This means you have to know React, and have a local development workflow for node, npm, sass, etc.
- You have to ditch PHP processing, which is tough for WordPress sites. That drag and drop WP theme won’t translate, neither will most of your plugins.
- Forms and other dynamic content require special handling. Some of it is easy, like simple forms, but some of it isn’t, like an entire eCommerce site.
The trade-offs are worth for many projects it in my opinion, but not for all. Simpler sites are a great candidate to dip your toes in the JAMstack water, and see where you can take it from there.
What to do now
There is a lot of progress happening on the web right now, maybe it’s overwhelming, maybe it’s exciting.
You might be thinking, ok Scott, sounds cool. What should I do now?
You don’t have to know everything about these technologies to start using them, thanks to things like Gatsby themes.
A great way to get started is to move your personal blog or portfolio site over to Gatsby. I highly recommend starting with a theme that does most of what you want out of the box, and customizing from there.
Here are some resources to help you get started:
- Gatsby getting started docs
- My tutorial on Gatsby and headless WordPress
- Zac Gordon’s Gatsby Tutorial series
- Frontity – Next.js framework for WordPress
I’ll be talking a lot about JAMstack, React, and Gatsby, so sign up for my newsletter below if you want to learn more.