Why Frontend Developers Choose Gatsby Over Traditional CMS
Today, having a modern and attractive website is at the forefront of any business. Most of these websites are rich with content and provoking user interactions. You will find more unique designs, timely updated never than before.
Challenge with CMS like Wordpress
When we think about dynamic content and websites, its a no surprise that Content Management Systems (CMSs) become the best suited for the job. They have proven to work very well for various sizes of businesses. One such CMS is Wordpress.
However, using popular CMS like Wordpress for these websites require customization at different levels. One popular customization is to change the look and feel. In Wordpress, we can achieve this by creating or modifying a template. Besides, some functionalities might need the use of third-party plugins or develop bespoke ones.
For a developer specialized with Wordpress, these changes would be straightforward. However, depending on the uniqueness of the functionality, customizing Wordpress could become tricky. Some of these modifications will require expertise in designing templates, working with modules, extension methods, and technologies that are unique to Wordpress.
Besides, at runtime, Wordpress and similar CMSs use several moving parts that include a Database, Web Server, and different level of Caching depending on the scalability requirements of the website.
Gatsby Address the Challenge Differently
The Gatsby approach to developing a website is different. Instead of requiring a developer to become an expert on niche technology or framework, Gatsby uses React and GraphQL at its foundation. Using these standard set of technologies allows for frontend developers to quickly adapt to Gatsby and customize webpages without needing a steep learning curve. Besides, Gatsby’s build output is a static website with HTML, CSS, and JavaScript, which further simplifies its adoption for frontend developers.
The primary working principals of Gatsby are simple and easy to understand for frontend developers.
- Build the structure of the project using React.
- Separate the dynamically changing content from its structure to a GraphQL API.
- Serve the changing content through the GraphQL API(the content are generated at build-time or connected to an external source like a headless CMS)
- Gatsby Plugins system is there to provide basic functionalities like image handling (sizing, thumbnail, optimizing), SEO, content parsing &, etc.
Since, Gatsby generated webpage contains static content (HTML, JS, CSS), it’s easier to host it.
Note: Here, don’t get confused when I say static content. The website build process outputs the static content artifacts mentioned above. However, we could also retrieve frequently modified content from headless CMS like Contentful, Prismik, depending on the requirements.
Gatsby Plugins are Developer Friendly
Well, it’s not always needed to build functionality from the ground up. There is a whole set of a plugin system that comes with Gatsby.
Sometimes, you will end up using Gatsby plugins, which helps to solve a technical problem. These plugins are developer-friendly and naturally made for an extension. For example, you can use the Gatsby-Image plugin to optimize, scale images accordingly to provide a better user experience for the users.
Note: In the case of Wordpress, the plugins generally solves a business problem.
Code Everything with React and GraphQL
Once you get a hold of the Gatsby basic concepts, having frontend development skills will enable you to build your website.
The primary prerequisite here is the experience with JavaScript and web development, which is a commodity across the frontend developers.
Besides, when you need to develop custom functionality, it’s easier to develop it with the help of many JavaScript libraries out there. For example, if you need to add a custom user login to your website, you can use Gatsby with AWS Amplify JS to simplify the frontend development.
Building with React means your UI is composed of independent components. That makes reusing code much easier, especially with the rise of cloud component hubs like Bit.dev.
Solutions like Bit.dev, enable us to quickly publish components from any project, to make them available for other projects. That could be used to share components between multiple Gatsby websites or even between React apps and their (Gatsby) blog, marketing, or doc sites.
Unlike React SPAs, Gatsby does have a more monolithic approach that makes it a bit harder to share and reuse components. On the other hand, building web sites “around” a single headless CMS, means you can even share and reuse “smart component” that have their data fetching (both standard GraphQL queries and ‘static queries’) hard-coded into them. That makes composing new web sites, even faster.
Flexibility in Defining and Managing Content
If we take a typical use case, both content and the structure of the website remain in the same git repository.
The vital difference here is, by using Gatsby build process, we can compile the content portion of the website into a static GraphQL API so that it’s natural to combine into different sections of the website using React.
Following is a sample structure of a gatsby project.
my-gatsby-website
├── blogs
│── pages
│── src (react)
│── gatsby-browser.js
│── gatsby-config.js
│── gatsby-node.js
├── package.json
├── node_modulesAccording to the above structure, you can see there are two folders named blogs and pages within the code. This way, you can organize the content areas frequently modified or added separated from the structure of the project.
For instance, you can define these content using wiki markup (.md files with the help of `Gatsby-Plugin-MDX`) or from a different format, where Gatsby knows how to convert into HTML using a specific plugin.
Another option is to use a specialized Gatsby plugin (`Gatsby-Source-Contentful`), that is capable of connecting content from an external source such as Contentful CMS (a Headless CMS).
Summary
Although I used Wordpress in contrast to Gatsby to explain the differences, Wordpress isn’t going anywhere. At least not in the foreseeable future. However, during the past few years, Gatsby has made steady progress in capturing market share from the technologies that we use to build websites. The plugin ecosystem is growing, and there is enough documentation available that made the adoption easier.
After using it for a few projects, I’m already convinced that Gatsby is likely to become famous among frontend developers for its simplicity and ease of adoption.
Before ending the article, I just want to say that if you are new to Gatsby, give it a try using Gatsby for your next website project. I hope it won’t let you down. And please do share your experiences down in the comments below.
