Best practices for sending nested objects [network traffic vs local resources]

Question

My app (DRF backend and an Angular developed frontend) makes use of heavily nested objects (up to 5 levels), and I'm running into performance issues caused by the data transfer size.

I'm currently reading full and writing flat. Reading long lists is the issue - sending a long json of fully nested objects contains very large amounts of repetitive information.

The alternative (not so easy to refactor) would be to:

• read everything flat and send a payload containing separate data for each nested table (based on the foreign keys in the parent table), which will hit the database for each nested field instead of a single SQL query.
• re-build the nested object table in the frontend (I need it nested in the frontend), by mapping each flat object using find for each foreign key to return the nested object.

This alternative would clearly minimise the network traffic, but would tax both the backend and the frontend from the local resource point of view. Especially in the frontend, missing the concept of foreign keys seems to make managing nested objects really impractical.

Any inside in this regard would be greatly appreciated.