Is there a way to output a pure HTML+CSS site without any client-side JS?
I haven't tried this myself, but while getting familiar with Gatsby I stumbled upon a bunch of great articles by Scott Nonnenberg in which he writes about this if I recall things correctly … yep, here they are:
His blog is open source, maybe a look into its https://github.com/scottnonnenberg/blog/blob/master/html.js can help you figuring things out.
Why remove JavaScript? That disables your React components on the client, slows down page transitions, prevents service workers from preloading page data, etc.
In 0.x there's an command line flag to prevent the JavaScript from being written but I'm not inclined to support that in v1 as with code splitting, the amount of JS being loaded is quite small.
There's always the option though of just not putting the script tags in the HTML.
Why remove JavaScript? That disables your React components on the client, slows down page transitions, prevents service workers from preloading page data, etc.
Those are great optimizations that I agree definitely should be the default. What I'm thinking of is an optional flag to optimize for download size, aka the "feature phone in India on 2G" kind of scenario.
Ideally you could have "build targets" for different objective functions on separate URLs.
feature phone in India on 2G
Afaik many Indian websites are using the same setup as Gatsby, React server rendered with service workers and client-side transitions :-)
See https://developers.google.com/web/showcase/2016/flipkart for example.
PWAs are faster and use less data than a normal website. It's a bit counterintuitive but in 2017, removing JavaScript makes your site slower and waste more data.
Counterintuitive indeed. Thank you for that reference. Clearly there's a lot I still need to learn about PWAs.
seems PWA any works with HTTPS, and GitHub pages does not support SSL, is there any way to remove PWA in the code? I keep getting console errors about PWA issue for http pages
I wrote a Gatsby plugin that removes Gatsby generated javascript for those that find this issue in the future
Thanks for the plugin @itmayziii.
Most helpful comment
I wrote a Gatsby plugin that removes Gatsby generated javascript for those that find this issue in the future
https://www.npmjs.com/package/gatsby-plugin-no-javascript