Best method for loading a new page based on the value of an API response: Call API before or after landing

11 hours ago 1
ARTICLE AD BOX

for some background we are in Angular 20 & using a java-based server for the API.

The client has a use case where they will view a table of URLs matched with data about (an) entity. When they click the url it will open a new tab and populate the page with the full data about the entity (17 fields, one JSON Object that represents a table of data).

To do this an API needs to be called and passed four parameters (present in the table record that was clicked). We will then use 17 primitive variables and one JSON object(returned in the API) to populate the page.

The question is, what is the best way to populate the data on the page? My approach was to call the API on the previous page and pass all of the data as query params to the new page. The other approach is to pass only those four variables, call the API from the new page, and set the values. The second option introduces latency which causes issues rendering the page. Basically, there is logic being done to transform the API data to viewable data setting the variables in the HTML. Additionally, there may be security issues calling the API from the page (onInit), since a user can easily modify the URL and potentially access data they shouldn't be able to.

My colleague said that the first approach (click the link, call the API, send the data as query params when opening the new page) was bad since if users were to bookmark the pages, they wouldn't be seeing the most up to date page (although they should just click the link from the table directly...). Even more, they said that our use of query parameters was close to reaching the maximum limit but as far as I can tell there is no limit.

What do you guys think? What is the best approach? Is using query parameters really that bad?

Read Entire Article