Gatsby – A Static Site Generator for React • Hacker News Board

Gatsby – A Static Site Generator for React

#1

Post by the_duke » Wed, Jul 20, 2016, 1:53 PM UTC

Gatsby – A Static Site Generator for React
github.com

Re: Gatsby – A Static Site Generator for React

#2

Post by the_duke » Wed, Jul 20, 2016, 2:02 PM UTC

Just discovered this project.

Since I recently wanted to build a new static site, I tried to hack an existing SSG into generating JSON files to support something like React. Wasn't exactly painless.

So I'm happy about Gatsby.

Re: Gatsby – A Static Site Generator for React

#3

Post by cool_penguins » Wed, Jul 20, 2016, 2:37 PM UTC

the_duke wrote: post #2

Just discovered this project. Since I recently wanted to build a new static site, I tried to hack an existing SSG into generating JSON files to support something like React. Wasn't exactly painless. So I'm happy about Gatsby.

Why would you need to generate JSON files?

Re: Gatsby – A Static Site Generator for React

#4

Post by the_duke » Wed, Jul 20, 2016, 2:42 PM UTC

cool_penguins wrote: post #3

the_duke wrote: post #2

Just discovered this project. Since I recently wanted to build a new static site, I tried to hack an existing SSG into generating JSON files to support something like React. Wasn't exactly painless. So I'm happy about Gatsby.

Why would you need to generate JSON files?

To make individual pages loadable and consumable by a JS frontend like React or Angular, with meta-data like site title, author, etc.

Re: Gatsby – A Static Site Generator for React

#5

Post by tptacek » Wed, Jul 20, 2016, 2:42 PM UTC

Can someone make a case for React on static blog sites? How is this a net win versus plain 'ol HTML?

For fancy marketing sites I get it immediately, I guess.

Re: Gatsby – A Static Site Generator for React

#6

Post by thinkingkong » Wed, Jul 20, 2016, 2:42 PM UTC

If its a static site why do you need react?

Re: Gatsby – A Static Site Generator for React

#7

Post by the_duke » Wed, Jul 20, 2016, 2:45 PM UTC

tptacek wrote: post #5

Can someone make a case for React on static blog sites? How is this a net win versus plain 'ol HTML? For fancy marketing sites I get it immediately, I guess.

The same reason why anybody is using React instead of full site reloads.

Only do a small (api) data request per page, faster page transitions, a more interactive experience.

Just think of the site generator as a static api backend for the the JS frontend.

Re: Gatsby – A Static Site Generator for React

#8

Post by jamra » Wed, Jul 20, 2016, 2:49 PM UTC

the_duke wrote: post #7

tptacek wrote: post #5

Can someone make a case for React on static blog sites? How is this a net win versus plain 'ol HTML? For fancy marketing sites I get it immediately, I guess.

The same reason why anybody is using React instead of full site reloads. Only do a small (api) data request per page, faster page transitions, a more interactive experience. Just think of the site generator as a static api backend for the the JS frontend.

Why not just have HTML generated at some earlier time? It's faster, can be cached, and does the same thing.

I'm a little confused about no page transitions. I don't know why that is a problem that needs solving. Also hot reloading.

Re: Gatsby – A Static Site Generator for React

#9

Post by xrstf » Wed, Jul 20, 2016, 2:52 PM UTC

I'm pleasently surprised that the generated sites work just fine with JavaScript disabled (at least on the author's blog). Which on the other hand makes me wonder why I (as the visitor) need to download a 700KB JS blob that contains all blog posts, React and other things just to read the content.

Without JS: 4 requests, 20 KB transferred, DOMContentLoaded @ 360ms

With JS: 27 requests, 518 KB transferred, DOMContentLoaded @ 22.07s (includes Disqus)

For caching purposes, it might make sense to split the bundle.js into a app.js and content.js and only update the content.js on re-deployments. Not sure if this is just on the author's blog or on every site built with Gatsby.

Re: Gatsby – A Static Site Generator for React

#10

Post by enraged_camel » Wed, Jul 20, 2016, 3:00 PM UTC

jamra wrote: post #8

the_duke wrote: post #7

Earlier quoted context omitted.

The same reason why anybody is using React instead of full site reloads. Only do a small (api) data request per page, faster page transitions, a more interactive experience. Just think of the site generator as a static api backend for the the JS frontend.

Why not just have HTML generated at some earlier time? It's faster, can be cached, and does the same thing. I'm a little confused about no page transitions. I don't know why that is a problem that needs solving. Also hot reloading.

It comes down to user experience. There's a categorical difference between having to do regular transitions and full-page reloads, and no page transitions and hot reloading. The latter is more overhead from an initial bandwidth and processing perspective, but results in zero-latency interactions, which can be important.

Is a JS framework the best way to achieve that? Maybe, maybe not. There are many factors to consider. I just don't think it's a matter of "this isn't a problem that needs solving."