Liquid FetchXML vs. Web API in Power Pages: When to Use Which?

{% fetchxml accounts_query %}
<fetch top="50">
  <entity name="account">
    <attribute name="name" />
    <attribute name="accountid" />
    <filter>
      <condition attribute="statecode" operator="eq" value="0" />
    </filter>
    <link-entity name="contact" from="accountid"
                 to="accountid" link-type="inner">
      <filter>
        <condition attribute="contactid" operator="eq"
                   value="{{ user.id }}" />
      </filter>
    </link-entity>
  </entity>
</fetch>
{% endfetchxml %}

{% for account in accounts_query.results.entities %}
  <div>{{ account.name }}</div>
{% endfor %}

webapi.safeAjax({
    type: "GET",
    url: "/_api/accounts?$select=name,accountid&$filter=statecode eq 0",
    contentType: "application/json"
}).done(function(data) {
    data.value.forEach(function(account) {
        console.log(account.name);
    });
}).fail(function(jqXHR) {
    console.error("Error:", jqXHR.status);
});

{% fetchxml products_query %}
<fetch>
  <entity name="product">
    <attribute name="name" />
    <attribute name="productid" />
    <attribute name="productnumber" />
    <filter>
      <condition attribute="statecode" operator="eq" value="0" />
    </filter>
  </entity>
</fetch>
{% endfetchxml %}

<script>
// All available products – one request, no spinner
var AVAILABLE_PRODUCTS = [
{% for p in products_query.results.entities %}
  { id: "{{ p.productid }}", name: "{{ p.name | escape }}", number: "{{ p.productnumber | escape }}" }{% unless forloop.last %},{% endunless %}
{% endfor %}
];
</script>

// Associate product with an Incident (N:M Associate)
function associateProduct(incidentId, productId) {
    return webapi.safeAjax({
        type: "POST",
        url: "/_api/incidents(" + incidentId + ")/product_incidents/$ref",
        contentType: "application/json",
        data: JSON.stringify({
            "@odata.id": "/_api/products(" + productId + ")"
        })
    });
}

// Remove association (N:M Disassociate)
function disassociateProduct(incidentId, productId) {
    return webapi.safeAjax({
        type: "DELETE",
        url: "/_api/incidents(" + incidentId + ")/product_incidents(" + productId + ")/$ref"
    });
}

// JavaScript filters preloaded data — no extra request
function renderFilteredProducts(searchTerm) {
    return AVAILABLE_PRODUCTS.filter(function(p) {
        return p.name.toLowerCase().includes(searchTerm.toLowerCase());
    });
}