score:9
yeah,
there is component web design in gatsby,
and there is the light speed of hugo,
i am stuck in the decision between these too.
i dont know what i will do but what is on my mind is this:
- use gatsby to build the page. you should build each page of your website on its own (dont rely on the routing)
- use the
index.html
file with hugo templates. - done
this is the picture of folder public
(the output) after building gatsby page:
update:
you can rely on the routing. in the picture above, each of the component folders have index.html
of its own so you can use them too.
update 2021:
use next.js. with incremental static regeneration
feature you can achieve what you want without even touching hugo.
score:7
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.
Source: stackoverflow.com
Related Query
- Rerender view on browser resize with React
- Setting a backgroundImage With React Inline Styles
- How to call loading function with React useEffect only once
- Updating an object with setState in React
- React Router with optional path parameter
- Nested routes with react router v4 / v5
- React proptype array with shape
- Insert HTML with React Variable Statements (JSX)
- How to use refs in React with Typescript
- React Hooks useState() with Object
- Set types on useState React Hook with TypeScript
- How to use callback with useState hook in react
- Can I build Android apps with react native?
- Pretty Printing JSON with React
- React onClick - pass event with parameter
- ReactJS SyntheticEvent stopPropagation() only works with React events?
- How to test a className with the Jest and React testing library
- How to use children with React Stateless Functional Component in TypeScript?
- React showing 0 instead of nothing with short-circuit (&&) conditional component
- Handle an input with React hooks
- ESLint with React gives `no-unused-vars` errors
- How to use throttle or debounce with React Hook?
- What is the best way to deal with a fetch error in react redux?
- React input defaultValue doesn't update with state
- Add Favicon with React and Webpack
- Maintaining href "open in new tab" with an onClick handler in React
- How to specify (optional) default props with TypeScript for stateless, functional React components?
- Big list performance with React
- Retrieving value from <select> with multiple option in React
- SyntaxError with Jest and React and importing CSS files
More Query from same tag
- Failed to load resource: the server responded with a status of 400 () React.js
- Cancel requests on route change (React/Redux/Axios)
- Why is ES6 treating this as a NaN?
- I need help in interpreting the NPM ERESOLVE error message
- Change color on conditions in table map in reactjs
- Reddit text field implementation Material-UI
- React FormEvent<HTMLFormElement> form input props types
- How to pass Props() value into setState() to make modal form editable using ReactJs
- nextjs router locale undefined
- ReactJS - Module not found when specifying "paths" in jsconfig.json
- How do I interpret the following error I've received?
- How to properly dispatch an axios delete with react redux
- React - unable to use `this` to call component methods in callback function
- image not display on block in grapesjs
- react am I mutating my state in case it is not an object or array?
- setState for a 2 level nested array of object
- When a user clicks on a related blog, Reactjs requires them to refresh page
- How to send API requests to a server via JSON? Keep getting CORS errors
- React not passing state to child via props
- TypeError: Object(...) is not a function when using react-toastify
- How to create an array of the last few hours in ReactJS?
- React-redux error when install webpack css-loader
- Array contents not rendering in ReactJS
- Calling functions inside a axios function definition in react.js laravel combination project
- TypeError: Cannot read property 'setFieldValue' of undefined. Formik doesn't recognise setFieldValue
- Cannot read property 'push' of undefined
- Replace object in a list and insert it at the same position
- How to initialize the react functional component state from props
- How to update a value in destructing and loop
- Cannot figure out why useState hook is not updating properly