score:0
you are not setting the state
correctly. use setstate()
to set the new state as you cannot update the state without using setstate()
method: https://facebook.github.io/react/docs/react-component.html#setstate
fetch('http://backend', {
mode: 'cors',
})
.then(res => res.json())
.then(data => this.setstate({data: data}));
also, the code you have added is not server-side rendering using react. you use the method reactdomserver.rendertostring()
to do server-side rendering: https://facebook.github.io/react/docs/react-dom-server.html#rendertostring
score:0
yes, even if you fix the setstate() problem you will still be rendering the component before the fetch. the problem is indeed that fetch is asynchronous.
to be able to server-side render back-end calls you need to wait until all backend calls have been made, set the props & state for all components and then render them out.
two libraries that will help you with figuring out when things are done are redial (https://github.com/markdalgleish/redial) and redux-promise-counter (https://github.com/bitgenics/redux-promise-counter) if you are using redux. more on that below.
the next problem you want to solve is getting that data to the client and initialize your components from that, so you don't have to redo (all) the request(s) on the client again.
you could do all that manually, but if you are serious about ssr, you should probably go for something like redux. a way to store all your application state in one store. makes it easier to store results, ship it to the client and initialize your store from json.
Source: stackoverflow.com
Related Query
- React server side rendering with backend requests
- React Server Side Rendering with Sass
- React Context not working with server side rendering
- How to deploy React App on production with Server Side Rendering
- React Router v5 accompanied with Code Splitting, and Data Prefetching with the use of Server Side Rendering
- React facebook share not working on open graph meta tags with server side rendering
- React code splitting and server side rendering with System.import or require.ensure
- React JS server side rendering with python
- How to do Server Side Rendering in React With React Loadable and Fetching Data for Components (Like Next.js)?
- React Server side rendering with Express - warning on the client checksum & Styling
- react server side rendering with client side routing
- React Server Side Rendering with expensive initial API call
- how to properly deal with window=undefined error in react server side rendering
- Server Side Rendering with React Router Dom getting error: Warning: React.createElement: type is invalid -- expected a string
- How to implement error boundary in react with server side rendering in nextjs?
- React Query with server side rendering using Next.js
- Window is not defined with Server Side Rendering React and Express
- Express server with React front end routing without server side rendering
- Include a third party script in a functional component of react with server side rendering
- Server side rendering with Webpack Express and React
- Using momentjs with correct locale in React server side rendering
- passing down props with React server side rendering
- Rails 5 Redux React Server Side Rendering gives client side JavaScript warning 'Replacing React-rendered children with a new...'
- Adding server side rendering to an existing React site created with create-react-app
- React massive content and duplication with server side rendering
- React Server Side Rendering - how to render from the server with :productId params passed in?
- Converting existing Rails + React application to React on Rails with Server Side Rendering (SSR)
- Image is not loading in server side rendering with react
- React Redux Server Side Rendering with code splitting and injecting
- Server side rendering with react, react-router, and express
More Query from same tag
- clearInterval does not reset
- How to read variable from JS file present in root folder in a React Component?
- How to check specific Headers columns of an excel sheet using sheetjs in javascript
- react-leaflet make multiple polyline
- Javascript ReactJs Type error
- Using useMediaQuery in material ui?
- React Callservice script doesn't retrieve the needed information from Node.js script that makes the API call
- No license in package.json
- How to correctly Type a React Component that is a param of a Function?
- How do I use constants within typescript type definitions?
- React Component Testing with Cypress - Where does 'type' come from?
- Passing custom props to styled-component in typescript
- Inovua React Data Grid - can't set textAlign column property (typescript)
- How to redirect to another page after Stripe React successful response?
- How can I implement destructuring assignment for functional react components props?
- How to create a button that toggles open modal on react
- React setState on textarea ignored
- Electron global shortcut to toggle show/hide of menubar
- Trying to embed another intranet site in react
- How to add values of dyanamically added fields
- react.js indexDB large data store.put performance issues
- require is working jsx file but url() resolve is not wroking in sass file - webpack
- I get 404 error in the localhost even though I already did "npm run build"
- React - Using external js from CDN
- How to change react icons while clicking it?
- React redux frontend not fetching data from Django API with axios
- How to implement regex to react on change Event?
- Update in one setState property causes another property change automatically in reactjs
- how to check the recursive path Url is in react router or not
- Loading bar with percentage in React