Populate all nested components in API response

I found this feature is not available yet and the other solutions are touching strapi files which i don’t want to do that yet since strapi is evolving fast.

I made a workaround by

  1. adding a field name devurl (example: populate[mainBlock][populate][links_group][populate][linksGroup][populate]=&populate[sideBlock][populate][links_group][populate][linksGroup][populate]=) in page collection. this field changes based on the content type of the page.
  2. and then in frontend , i have to make two requests. one to get the devurl (minimal/default response)
    and another request which actually contain all data of the respective page.
const response = await axios.get(
      "http://localhost:1337/api/pages?filters[url][$eq]=" + slug
    );

    data = response.data.data[0];
    const url =
      "http://localhost:1337/api/pages/" +
      data.id +
      "?" +
      data.attributes.devurl;
    console.log(url);
    if (data.attributes.devurl && data.id) {
      const devResponse = await axios.get(url);

      devData = devResponse.data.data;
    } else {
      //throw error
    }

am making two requests and i had to type custom populated attributes for each pages. i also need to update this devurl field everytime the structure of the page changes as well.