SSBs such as 11ty and Hugo vs SSBs such as Gatsby and Gridsome

[dougouverson]

I would truly appreciate any insight community members have on the topic of SSBs such as 11ty and Hugo vs SSBs such as Gatsby and Gridsome.

From https://www.11ty.io/docs/ I read, "We’re thinking long term and opting out of the framework rat race."

I'm coming from the perspective of a person who has developed and maintained 100s of Drupal sites/apps over the past 12 years or so. My projects are mostly SMB sites/apps.

I'm in the process of moving from Drupal CMS (LAMPstack) to JAMstack and am evaluating different options for frontend development.

It not clear to me what I'm missing going with simpler SSBs such as 11ty or Hugo over more robust framework-based SSBs such as React/Gatsby or Vue/Gridsome.

Either way, I'm going to need to level up on my JS skills; not sure I need to learn a framework as well? But if I need to, I might as well pay my dues (like I had to do with Drupal) and get on with it...

Important: I would like flexibility on how the client and our team manages content: Markdown files in Drive or Dropbox, Airtable, etc. One thing I've gathered (I could be mistaken) is that framework-based SSBs such as Gatsby and Gridsome interface with "A query language for your API" like GraphQL which enables this possibility.

Again, I would truly appreciate any insight community members have on the topic of SSBs such as 11ty and Hugo vs SSBs such as Gatsby and Gridsome.

[DirtyF]

You don't need a framework to fetch data from an API; see https://www.11ty.io/docs/quicktips/eliminate-js/ or https://www.webstoemp.com/blog/headless-cms-graphql-api-eleventy/ on how to do it with node fetch.

With Eleventy you just build what you need with minimal dependencies and footprint on the front end, whether with Gatsby you're likely embedding a lot of dependencies your project might not need and this could impact the end users. Gatsby is more of a React web app generator, where Eleventy can also build simpler websites. Generating a PWA by default is nice, but again you don't need Gatsby to do that.

Also Hugo and Eleventy are fast builders compared to Gatsby that don't perform so well in that area.

[dougouverson]

I'm happy to be corrected about GraphQL and thank you for the references.

What would be some of the benefits of React/Gatsby over 11ty?

[DirtyF]

@dougouverson I would say the number of plugins and themes available and thus a better "productivity" feeling? If your aim is to develop a React/Vue WebApp with SSR, you can pick Gatsby or Gridsome. If you're looking to build a website that is mostly content and data, with a bit of Vanilla JS for the front end, Eleventy will perfectly do the job and some plugins are really handy for PWA or lazy-loading.

[Ryuno-Ki]

If you happen to decide against eleventy, perhaps Hasura is more what you are looking for.

I mean, you said

I'm coming from the perspective of a person who has developed and maintained 100s of Drupal sites/apps over the past 12 years or so.

which sounds you are looking for something enterprisey. Eleventy is developed in the spare time of @zachleat with some contributions and support from a community. We are quite small here, I'd say. So don't expect „commercial support” grade responses.

On the other hand, we don't try to vendor-lock-in you. Instead, Eleventy could be a good place to migrate to from other platforms.

My personal website is not using any frameworks (i.e. would have a low learning curve if I were to OpenSource it). Instead it is using mainly Vanilla Node.JS + some libraries. You won't have that with React or Vue. I don't know, whether you are working on your own or within a team.

Plus, what about hosting? Since Drupal is PHP based, you'll have plenty of options to choose from. Eleventy will require a Node.JS runtime for build. Then you can move the generated files elsewhere for static hosting.

So different aspects you should take into account.

[dougouverson]

The reason I'm looking for an SSB is that Drupal is to heavy for most of my projects - which are web sites/apps for small and medium businesses.

I'm wondering why so many small dev shops (like myself) are choosing a framework like Gatsby for small projects when Eleventy looks to be a much better choice? I suppose that's a question for the psychologists and sociologists.

As I said, I don't mind paying my dues if it means some long-term benefit; but, I suppose the things I learn in Eleventy would apply if I decided to migrate to something more robust.

Thanks for everyone's input, opinions, and insight!

P.S. I've already converted a dozen or so older Drupal 6 websites to static and am hosting them on Netlify. (About the only issue was getting the contact form set-up correctly.) I've also got my local machine set-up for Node work and have successfully built "hello world" versions of many of the top SSB sites (including Eleventy); that's one of the reasons I'm so excited about the JAMstack!

[budparr]

@dougouverson curious to know if you're managing the content in Drupal still, using the API to pull data into an SSG? And if not, what.

I think a lot of people choose their tools based on the language they're comfortable with (and a lot of devs love React and or Vue and see that probably tied to their career success). Gatsby and Gridsome are great tools that will do a lot for you you of the box, as long as you're comfortable with their respective languages.

Also, the closer you get to "apps" on the "content site to app spectrum" the more you'd want to consider one of the framework-based tools. The framework-based tools are going to do a lot of things for you out of the box or with plugins: performance enhancements and PWA capabilities to name two. Also the impact of rehydration (first page load is HTML, subsequent page loads are a React/Vue app) on subsequent page load time is nice. You can pretty much match all that without those tools, but you have to do it yourself.

We use Hugo a lot because we build large, complexish, websites (and are very conscious of the impact of build-times on site editors), but also may be using 11ty as well. We manage a lot of websites too, and our sites tend to be content-driven sites, not apps. While we may at some point use the framework-based tools, I do find that a tool like 11ty (let's say a standard SSG) is quite suitable for people who manage a lot of sites that are primarily content driven.

Really happy to see you've adopted the JAMstack.

[dougouverson]

@budparr Your phrase "... the closer you get to "apps" on the "content site to app spectrum" the more you'd want to consider one of the framework-based tools." made a lot of sense.

My thought process: The majority of my projects are content sites but I do have some app projects I'd like to start working on; so why not learn a framework like Vue and get a quality SSB like Gridsome as an added benefit.

I know this is highly subjective and each person/team will have to weigh the costs (not just financial) against the potential benefits (not just financial.)

Thank you to everyone. I really appreciate the insights.

[Ryuno-Ki]

@dougouverson Can I ask you a favour? It sounds like you have some experience with Drupal. Could you dig up some API documentation in case it used headless? This could come in handy for #488

[dougouverson]

@Ryuno-Ki Yes, I have been building and maintaining Drupal sites for over a decade. I know that headless is a hot topic in the Drupal community right now.

I would be happy to help if I can.

Could you please be more specific on what you need me to do. I looked at #488 and it wasn't clear on what you were asking of me.

[Ryuno-Ki]

Sure! Thanks in advance!

Basically the idea is to do it like Jekyll and offer a way to easily import an existing CMS into Eleventy. That would require a way to understand the other CMS and map the content and files to a structure Eleventy expects.

For SSG the process shouldn't be too hard (but work-heavy. That's why it isn't done yet), since they normally use a certain directory structure, rely on Markdown files etc.

For CMS, their is more meat to it. I myself could write something (and test it) with WordPress.com. But I have nothing for Drupal.

[spyderboy]

I recently did my (simple) portfolio site (spyderboy.com) with Gatsby and headless Drupal 8. I've been working with Drupal since 2006, so it's a super familiar for managing content. My interest in using this combo was mostly academic, to get some hands-on experience with Gatsby/React.

I have two VMs on my dev machine. One for Node/Gatsby, and one for Drupal. Although I only ever run these when I'm updating content, they could easily be hosted somewhere on the web or on my intranet.

My Node machine pings the Drupal REST API and if content has changed, it triggers a Gatsby build, which then commits to Github Pages, and publishes to Netlify.

While this stack is probably overkill for my site, I could definitely see using a similar approach for a larger project. Of course, it's super cool to get a PageSpeed score of 97-100 :)

Found this thread looking into 11ty... thinking of playing with this next!

[zachleat]

Thanks for the discussion everyone!

This is an automated message to let you know that a helpful response was posted to your issue and for the health of the repository issue tracker the issue will be closed. This is to help alleviate issues hanging open waiting for a response from the original poster.

If the response works to solve your problem—great! But if you’re still having problems, do not let the issue’s closing deter you if you have additional questions! Post another comment and I will reopen the issue. Thanks!