DEV Community

Cover image for Before building your next static site with React, consider this

Before building your next static site with React, consider this

Ben Holmes on July 07, 2020

⚠️ Warning: Potentially controversial opinions ahead! Turn back now if Gatsby is your lord and savior, and you serve to protect the React dogma. S...
kartiknair profile image
Kartik Nair • Edited

Great post! I'm actually working on Dhow right now, a Node.js SSG that lets you write JSX syntax (similar to next.js with getProps & getPaths functions) but generates pure HTML. It's currently a work in progress but I would love to hear what you think!

GitHub logo kartiknair / dhow

JSX-powered static site generator for Node.js


npm version License

JSX-powered SSG for Node.js. Write logic like React with a directory-structure like Next.js but generate plain HTML with no client side JS.

A demo of what it does

Getting Started

Getting started is very simple. You can use the create-dhow-app npm package to quickly bootstrap a project based on a template.

npx create-dhow-app my-app # Optionally specify a template like this: `--template blog`
# For older versions of npm
npm i -g create-dhow-app
create-dhow-app my-app
Enter fullscreen mode Exit fullscreen mode

The default template will show you the basic structure of a Dhow app but using something like the blog template will show you everything Dhow can offer.

Create a project from scratch

If you would like you can also create a project from scratch without using create-dhow-app. Let's walk through it.

# make a directory for your project
mkdir my-app
# change your directory
Enter fullscreen mode Exit fullscreen mode
aralroca profile image
Aral Roca

I think Next.js is very good for this. Without almost any tooling you can just do next build && next export to generate the static site. And then you have the option to switch to dynamic by doing next build && next start. And for the dynamic version, if you are worried about React size you can just replace it to Preact (3kb with the same api).

bholmesdev profile image
Ben Holmes

Yeah, thanks for pointing that out! Next + Preact is a super powerful combo. I've heard some complaints about library support on Preact, but the community's still pretty robust at this point. Worth checking out!

My only complaint is that the developer environment is dynamic (by design of course), and you won't know how the static site actually performs until you export. This can lead to somewhat longer build times from my experience, and certain pages of the site not getting crawled properly. That said, for smaller scale projects, it shouldn't matter too much.

chipp972 profile image
Nicolas Pierre-Charles

Ok so if I understand well, you make the case for using no framework when building mostly static website that don't ship much dynamic content and interactions.

I don't understand why is it so important to reduce bundle size to a minimum if, anyways, loading the framework is not required to interact with the page (if you used pre-rendering/server-side rendering).

Plus, I think you overlooked the fact that declarative components are easier to maintain and make evolve than imperative DOM manipulations. Maybe you'll save 0.5~1 second of the life of each of your visitors but it will take you 2x or 3x the time when it comes to adding a new feature after some time (in my opinion).

Still a well written articles with good examples though. Thank you for sharing.

bholmesdev profile image
Ben Holmes

Ohhh I wouldn't say that! I agree that Gatsby can be a bit heavy-handed for certain projects, but it strikes a neat balance between stateful clientside logic and static rendering. For that reason, I think it's basically a replacement for create-react-app for full-scale projects. It's also great for running your API calls ahead-of-time so you don't ship API keys to the client.

bholmesdev profile image
Ben Holmes

Yeah I noticed nunjucks in their docs! Decided to talk about Pug here since it had my heart since my CodePen days, but that looks like a super capable templating lib too. Glad to hear your success with 11ty btw!

mykalcodes profile image
Mykal • Edited

This is an awesome post! thank you, Ben!
I've had a lot of similar realizations lately while building out static sites. The developer experience of React and similar JS frameworks are great, but at the end of the day, we should be optimizing for the user's experience, not our own.

Tools like 11ty do get you close to the same DX, and with some tuning, I'd argue you can get even better DX than you would with most react setups (throw a dash of Webpack/Parcel in there, some Typescript maybe, Preact.js or Svelte to keep the bundle size small if you really need something dynamic. )

The more I learn about software development, the more relevant "choose the right tool for the job" becomes. I think for static sites you hit the nail right on the head. Solid read 🙏🏻

jimafisk profile image
Jim Fisk

Great post Ben, couldn't agree more! I've pushed Hugo to break up components in a similar way and it worked well, but you have to use go templates. I need to spend some time with 11ty! Also cool to see your Pug project, thanks for sharing!

bholmesdev profile image
Ben Holmes

Oh yeah totally agree, I think Hugo has an interesting approach. Also cool to see the static site generator you're working on is built on Svelte! Should have a way smaller bundle size over React. Cool project to follow if you need that component-based framework with hydration 👍

desirelabs profile image
Franck LEBAS

I absolutely agree with you : generating HTML should not involve such boilerplates and JavaScript has its caveats concerning SEO as well. There is just something missing which makes me stick with React (unfortunately), styled-components.

skd1993 profile image
Shobhit Kumar • Edited

Fantastic article Ben! Thanks for introducing me to Pug. Sounds a bit like Handlebars if I'm not mistaken?

bholmesdev profile image
Ben Holmes

Thanks Shobhit! Yep, it's just another templating language. I know that Handlebars is very JavaScript-y though, where you need to write helpers in JS that are thrown into the rendered template.

Pug is super composable on its own, since you can basically write "components" using the mixin and includes syntax that I mentioned. If you're gonna ditch your component library for this sort of setup, Pug is my fave!

andrewchmr profile image
Andriy Chemerynskiy

Hi, enjoyed your article! I wanted to get report of your website via Lighthouse (btw it has high score) and found one thing that might improve SEO :)

bholmesdev profile image
Ben Holmes

(sorry about my previous response. Thought you meant the SEO on this blog post haha).

Thanks for the callout! Thought that providing og:description would also cover the description tag. Updated to get that 💯 SEO goodness

andrewchmr profile image
Andriy Chemerynskiy

Haha, my strategy for SEO is to rather have more metadata than less. If I don't know if some meta tag is redundant or not - I add it anyways :D

cauerego profile image
caue rego

not a single mention of "offline" in the article, comments or sign up process for "".

big bummer!

i never used gatsby, and i'm not really well versed into most of the web coding platforms of the past 5 years or so... (is this hydrate thing exactly the offline feature i am mentioning below?)

but gatsby website works amazingly well offline, like every website should!

the test is very simple. load website (on android, in my case). turn off internet. reload page.

at very least what's visited should work!

(i would argue that a small website should load everything in the first hit, and i would bet gatsby can do that easily too... or at least i hope, since i'll still probably migrate from jekyll there, even after this article to which i can certainly agree... because...)

sadly, 11ty or any other related link i could find, doesn't (except mozilla nunjucks work a little bit). just another "fuck offline first" broken mentality, imho.

also... i don't really get the "better and faster" for small sites... even jekyll can score 100% for those sites in every possible test there is. so what's really the point?

not to mention both the language and the pug dog are ugly as the devil! 🤣

by all means, have fun with them...

(i know i'll soon get my own fun by deleting facebook, perhaps inspired by the 11ty affiliate... not because of privacy concerns at all, as you can read on nor because whatever they do wrong in policies... it's just because most of their products are truly bad as a product on their own. in a similar fashion, i'm tempted to delete google as well... they always made fantastic products, but they've been losing their touch... plus, both of them lack this one other fundamental part of the internet: making my data redundant automatically, which means outside of their reach, for real backup... and better options are starting to appear, such as secure scuttlebutt).

just please, implement some offline code already! and ideally some pwa along, you know, to easily "install" or download everything for later offline usage with intent, or simply for bad connection.

louisefindlay23 profile image

I'm another 11ty fan. Only used for my portfolio site so far (used it to add a blog) and love the flexibility it brings by allowing multiple templating languages. I use EJS with a mix of Nunjucks. Makes it much easier to update static sites without resorting to a full-stack web app or heavy CMS like WordPress.

Looking forward to trying out Netlify CMS in combination with Eleventy.

toheeb profile image

Well said!

I had the same thought a while ago.. First thing that scared me off was the size of the node modules. Second was the build process - slow! Third was some react compatibility issue I encountered when installing the modules.

For someone trying to create a blog - I believe that's an overkill when there is 11ty!

martin2844 profile image

What about Gatsby image? Maybe my site could have been probably done with html and vanilla js, but how can I get my sweet blur lazy loading? Honest question

uncasually profile image

Awesome take on the subject and just what I needed. This gave me a better idea of when is worth using react for some client projects. I have been using Eleventy + nunjucks + netlify CMS for static sites for a while. You've inspired me to look into Pug now.

weedshaker profile image

Very nice and refreshing article. Slowly but certainly, voices like yours are surfacing... I always missed the simple times and believe that they are just around the corner with web components. Those don’t care, if they are loaded in a static context with it’s innerHTML present or if “on connected” they find their inner structure is missing something and fetch /render by convenience. This will make it no effort to prerender and hydrate as its natural behavior but then they are extremely light and super fast in the DOM as native web api, that you may find the conclusion => that the site is fast enough. LOL 😂

Anyhow, I work on an event driven solution making lots of things easy and stuff like state machines obsolete, all vanillaJS without dependencies:

consider this for your next project. 🥳🤙

alexaderlex profile image


pllffrd profile image

Pug + AlpineJS + Tailwind + Eleventy = ❤️

adriangrigore profile image
Adrian Emil Grigore

I built because I felt tired of JavaScript. It's a bloat-less simple static site generator.

omrisama profile image
Omri Gabay

Pretty neat. Was about to say that Out templating looks VERY similar to Haml