0

I have a project that uses React but server rendered. When a client requests an initial page of the website by writing the URL in the search field, the server.js uses renderToString() to stringify the react App.js (with some initial data added) and send it to the client along with the bundle.js and css. From this point onwards, React takes over, the client will navigate through the app without needing an initial data anymore. Whenever they navigate to a different component, componentDidMount() will request for the corresponding data from the same server.js.

The problem is that I cannot distinguish between a GET request from a componentDidMount() and from the user typing the URL in the search bar. This is crucial for knowing when to send a new markup with an initial data and when to just send a response object.

Right now I am using a very crude method of attaching a querystring in the GET request from the componentDidMount() to identify that it requires a non-initial data/that the request is not an initial request on entering the website. This method is very messy as in one instance for example, upon refreshing, the non-initial query stays in the url but since its refreshed, it throws all the cached react app, and it then receives the non-initial data displayed nakedly in the browser.

Is there a better way of doing this? Maybe there is an attached information in the fetch get request that shows where the GET request is generated (whether from a clicked link or a typed URL)?

kabison33
  • 101
  • 2
  • 10
  • If you have two different types of requests, they should not use the same URL and headers. You should not be attempting to "guess" what the client is and return different content based on that. If you have two different types of responses that are desired, then use different URLs for them. A query string parameter or a header being different is often fine and you can then use that as the identifier for which type of response is being requested. – jfriend00 Aug 30 '20 at 04:20
  • FYI, a GET request does not have a request body (it has a URL and headers only) in its normal form so I don't know what that means in your question title. – jfriend00 Aug 30 '20 at 04:22
  • @jfriend00 I know that, and i don’t mean the technical ‘body’ of the request. I meant any information passed along with the request. An info in the header could do. – kabison33 Aug 30 '20 at 04:26
  • @jfriend00 so if using the same url but different header is considered okay? – kabison33 Aug 30 '20 at 04:31
  • It depends upon what the difference in response is. If it's just a different format of the same content, then certain headers (like accept) are designed exactly for that. But, it its really different content, then you should be using a different URL. But, you don't control headers for a click on a link so you can't use them for that anyway as you only control the URL. If you would show the actual two different responses you want, then we could help more completely. – jfriend00 Aug 30 '20 at 04:51
  • @jfriend00 So it is like a result page. You get into that result page by typing a URL like this (1): `localhost:3000/api/result?a=1&b=2&c=3&d=4`. Alternatively (2), you could navigate to `localhost:3000/form`, where you can input the value of a, b, c, d. These key value pairs will be converted into a `querystring`, then attached/passed to a `` component to the result page. When the submit button is clicked, it redirects to the result page, and the `fetch` (with the passed querystring) will be called inside the `componentDidMount()`. – kabison33 Aug 30 '20 at 07:23
  • @jfriend00 in this second method, I want to just get a pure `json` data as a response so that i can use it to populate the `component` (result page) state. But for the first method, I actually want to get a whole `html` and `bundle.js` as a response as it is designed for an initial entry to a website. How do I implement this by using the request `header`? – kabison33 Aug 30 '20 at 07:24

0 Answers0