payload VS Gridsome

Despite being a relatively newer player, Payload's GitHub repository has accumulated 18.8k stars and 1.1K forks as of April 2024, reflecting its growing community. The project has also secured $5.6 million in funding, positioning it for continued growth and innovation.

My most recent project launched in January. NextJS 14 client integrated with PayloadCMS (http://payloadcms.com) for the back-end. I love both technologies in theory, but they're both going through a renaissance period and "bleeding edge" doesn't even begin to describe it.

If I'm just building a client app, create-react-app is still my go to.

Before now, I'd been building on WordPress for 10+ years for anything client-administered. Planning on using Payload from here on out.

Payload CMS: The Customization Insurgent

Payload is free, you can self host it without paying a one time fee or a SaaS fee for its use, it even says so at the bottom of the homepage

James, the co-founder of Payload, a headless CMS with MongoDB support, shared his insights on the drawbacks and limitations of using a headless CMS in the context of web development. He challenged the promises often made about headless CMS, such as separation of concerns and ease of content migration, revealing that these claims often don't align with the reality faced by developers and clients. James is considering integrating Payload directly with Next.js to overcome these limitations and offer a better developer experience, including out-of-the-box features and simpler deployments. Should Payload move to Next.js?

Hey HN, Dan here from Payload (YC S22), an open-source headless CMS that closes the gap between CMS and traditional app frameworks. We’re excited to announce Payload 2.0!

https://github.com/payloadcms/payload

If you’ve not heard of Payload you’re probably wondering why the world needs another CMS. Payload connects to your database and runs without the vendor lock-in and black box of SaaS based CMS solutions, and it’s far more extensible than off-the-shelf SaaS options. Enterprises in specific have been finding value in this control, and they’re using Payload to power content infrastructure that simply isn’t possible through integrating with SaaS webhooks alone.

Today’s announcement is all about features that strike at two neglected areas in the world of CMS. The first is application framework level control over your database that you’d expect with tools like Ruby on Rails or Laravel and the second area is making content editors effective by seeing their edits in realtime.

Here are the highlights on what we’ve been working on:

*Postgres Support*—in the same week we launched about two years ago,people asked for Postgres support. It brings me pure cathartic joy to finally give this to our community. To be fair, MongoDB has been a perfect solution for our architecture and it’s still recommended. But with a new adapter pattern for databases, you can stand your Payload project up on Postgres and run the same functionality as you can with MongoDB now. The crazy part is that we didn’t compromise on how nesting complex fields works. We could have taken the “easy” road and wrote things to JSON, but we leaned fully into the relational way and built the right tables and native column types for fields all the way throughout.

*Database Migrations*—maintaining a production app while deploying schema changes is something you come to expect from ORMs and backend frameworks, but rarely CMS. Payload 2.0 delivers full, first-party migration support all in TypeScript. We took a lot of care on the developer experience here so that when working with Postgres, thanks to our friends at Drizzle, we generate the migration files in TS that add the tables and fields for you. If you have to manipulate data before or after, you have a clear way forward now.

*Database Transactions*—when a request involves multiple inserts, updates or deletes to the database, you need control to rollback all changes when one part fails. The built-in Payload CRUD operations do this now for you and your custom hooks and other code can too.

*Live Preview*—the ability to quickly draft content and see it in context of a website is a literal game changer. We have taken the best dev experience of any headless CMS and given the editors a reason to demand Payload over the others.

*Lexical Richtext Editor*—our original Slate based editor has seen some great features added, like storing related documents directly in the JSON, uploads and any customizations. Unfortunately Slate leaves a lot to be desired on how to extend it, especially compared to Lexical. In a few short weeks we’ve built up a new editor experience inspired by Medium and Notion. Now type “/” and have embedded relationships, uploads, and custom blocks popping right up to be dropped in. Then drag and drop them to reorder your content. If you still want Slate, we continue to support that too.

We’re not compromising on editor experience. This is how we’re bringing the “head” to the headless CMS.

Building critical applications on top of a CMS may sound like blasphemy but it doesn’t have to be that way.

Thanks for reading! I look forward to hearing what you think.

Thanks for reading!

The web tech stack is actually one of my biggest regrets. It's a static site generator called Gridsome[0] that the maintainers abandoned about three months after I used it to launch the TinyPilot website.

At the time I made the TinyPilot site, I was very excited about Vue, so a Vue-based SSG seemed great. Since then, I've come to find SPAs and most frontend frameworks to be way too much complexity, so I've moved away from Vue, but the TinyPilot website is still stuck on Vue 2.x and bootstrap-vue (which is tied to Vue 2 and Bootstrap 4).

So, it keeps creaking along, but building the 100ish pages on the site takes about five minutes, whereas I think something like Hugo could probably do it in a few seconds. Plus, we get random runtime errors[1] that are pretty hard to debug.

[0] https://gridsome.org/

[1] https://github.com/nuxt/nuxt/issues/5800

Nuxt.js and Gridsome are tailor-made for Vue.js developers.

Gridsome — Jamstack SSG tool for Vue developers

Node is basically back-end Javascript. While powerful alone, almost exclusively you will use a back-end framework like Next.js or Gatsby when using React, and then maybe Nuxt or Gridsome in Vue.

Among other thoughts, I considered a possibility of migration to a newer tech stack (because I can). Don't get me wrong, I actually love Gridsome (which is underneath my website now). But it's quite obsolete, and it's actually a dead project now.

One downside of Gridsome is that development seems to have stopped if you look at their github. For that reason I've recently switched my Gridsome clients to Nuxt

I definitely think Nuxt is worth learning for more than just a static site. However, there is a Gatsby-like Vue framework that focuses on SSG: https://gridsome.org/

Gridsome

All the Static Site Generators have been in the market for many years. With time, they get new improvements and upgrades as well. While considering SSG frameworks, like Gatsby, Nuxt, Gridsome, Next, and many more have been on the developer’s list for a long time. But when we talk about blazing fast web performance as per core web vital, then we have to do a lot of work in the available frameworks, after connecting a lot of dots (in terms of web performance), but still, we cannot achieve the web performance as per our need if we consider a use case of a large website where 20+ components are in one page.