0

Let's say that you receive a link that takes you to a page from a single page application. You want to be able to see that page instantly (of course, if you are logged in).

The issue is that the data is not fetched from the server, so the page is empty.

Which practice is the best to fetch all the necessary data to be able to see that page correctly?. Basically, when refreshing the page, you want to remain in that place, not to be redirected to "/"(for example).

I thought about making a separate component which fetch all the data and when its all done, render the page. But, it comes with a downside, which is double fetching of data on normal usage of application.

sylar12
  • 107
  • 1
  • 8
  • What's the issue with fetching when the page loads from a link? – Agney Aug 20 '19 at 16:36
  • The issue is that it doesn't have all the data from the server. On a normal flow, you login, fetch data and travel through the app. On refresh, you lose the data. – sylar12 Aug 20 '19 at 16:38
  • the token for login would have to be stored in local storage or as a cookie. But there should be a param in the link that would enable you to fetch required data from the server – Agney Aug 20 '19 at 16:40

2 Answers2

1

With a single page application you shouldn't have to manually refresh the page yourself. I would consider using react-router for navigation within your single page application. Furthermore, when a particular view (React Component) needs more data to be properly displayed I would leverage the componentDidMount() lifecycle. Within componentDidMount() you can fetch the necessary data with Axios or with the browser's built in fetch api. Ideally, you shouldn't be fetching your entire application at once, and your React components are modular in nature. As an example of how to leverage the Axios library one could do something along the lines of:

  1. Install axios:

    npm install -S axios yarn add axios

  2. Fetch the necessary data for your react component using the componentDidMount() lifecycle method:

React component:

componentDidMount(){ // Make a request for a user with a given ID axios.get('/user?ID=12345') .then(function (response) { // handle success: i.e. set your state so you can use your data console.log(response); }) .catch(function (error) { // handle error console.log(error); }) .finally(function () { // always executed }); }

Hopefully that helps!

Nathan
  • 7,853
  • 4
  • 27
  • 50
1

As @Nathan pointed out, it is a bad practice to refresh a single page application.

I would recommend checking whether the data variables are undefined (in case of controlled components, props) and based on that return either a (to show that the page is still loading) component or a

e.g. if(!this.props) return ; //null in case if you want to display a //white-page return ;

Hope this clarifies it! Happy Coding!

kooskoos
  • 4,622
  • 1
  • 12
  • 29