How to write application architecture correctly?

Question

Software design

Comrades, help me come up with an architecture.
There is a back there is a front on the react (but the latter does not really matter).
There is a page that renders 3 different, essentially related entities.
Example, there is a year(s) -> there are reports -> there are rows in the report.
Poked a year received different reports. tykunli received different streams a year.
Endiponite gives out everything at once (both years and reports, all in one giant footcloth), then I lay out (map) it all into different entities, and already send it to the renderer.
The essence of the question is how to zip so that I do not have to rewrite the renderer, controllers, services, changing only the mapper when another programmer comes and writes different endpoints for each piece of information
The problem is that now there is infa for all years, for example. poked in a year, planted another essence, which is safely stored in memory and oops. When this case is not there, you need the link to launch the fetch. There are two problems here.
1) to enclose promises in which, if there is, give if not, go there then? here I will most likely mix the architectural layers in a heap
2) how to render in asynchronous mode? Angular had async pipe . how to do it in rekat so as not to fly away to overengineering for a week do not know.
Clue. How to correctly and correctly make entity relays so that you can easily fetch them from the back, get them from the cache, read from the local store

Answer 1

The problem is that now there is infa for all years, for example. poked in a year, planted another essence, which is safely stored in memory and oops. When this case is not there, you need the link to launch the fetch.

The problem is not a problem at all. You will need to change 3-4 lines
You can use redux or mobX.
Load state keys, conditional rendering .
Simple example:

class Example extends React.Component {
  state = { isFetching: false, error: null, data: [] };
  
  // ...
  
  render() {
    if (isFetching) return <Preloader />;
    if (error) return <Error error={error} />;
    
    return data.map(/ ... /); 
  }
}

You can send from the backend to transfer all related data with the results of the request:

{
  posts: [],
  linked: {
    comments: {},
    users: {},
    tags: {}, 
  },
}

In general, you should study the React documentation before starting development . You can also go through the tutorial there . Read a little about the ecosystem, about state management libraries like redux and mobX.