Hugo with React?

Question

Is it possible/ideal to use something like Hugo with React? I am aware of Gatsby, but would Hugo work as well. I have limited knowledge of combining the two but my understanding would be that Hugo would be used for all your templating and static web pages and then React would be used for the web application type of things, and a headless CMS somewhere in there? Can someone with experience comment why Hugo or Gatsby are sometimes good to use with React? Or an overview of the relationship between the frameworks?

Answer 1

Is it possible/ideal to use something like Hugo with React? I am aware of Gatsby, but would Hugo work as well.

We used Hugo with React (create-react-app) at https://www.electrade.app. All pages serve to hugo static pages, but if you navigate to /quote, the react SPA loads and you're in dynamic land. So yes, Hugo works as well, but you'll have 2 languages and 2 syntaxes.

combining the two [...] my understanding would be that Hugo would be used for all your templating and static web pages and then React would be used for the web application type of things

Exactly.

Can someone with experience comment why Hugo or Gatsby are sometimes good to use with React? Or an overview of the relationship between the frameworks?

• Hugo is written in Go and builds vanilla static HTML. Example: a blog, but you only need to write the header and footer once.
• React is written in Javascript and is a front-end library to build dynamic interfaces. A React site will usually serve you an empty index.html file and a Javascript file, which will then run and fill the index.html file with content dynamically in your browser. Example: Facebook Newsfeed that's different every time it loads.
• But what if you want to write the example blog above, also only writing the header and footer once, but are used to React syntax? If you use normal React, your blog will download an empty index.html file and fill it with your blog in Javascript. This is not good for SEO and load times, among other things. If you want to still have it compile down to vanilla static HTML – that's what Gatsby is for.