builder.getAll(...) vs fetch?

Technical Questions
, ,
1

Hello,

I have one very specific question.

Here is the case:

Requests made with builder.getAll(…) from '@builder.io/react' are significantly slower than requests made with plain old fetch.

Example:
The data fetched is a section model (134 entities) in my dev environment (meaning - localhost).

  1. With builder.getAll(…) takes no less then 5s (sometimes it goes up to 15s), the data is give or take 500 kb in size, and i am using limit + offset, but this does not quite matter, as i am referring to the first request:

    2
    21018×869 51 KB

    1
    1991×827 43.7 KB

And this is the function with builder.getAll(…)

export const getBuilderIoDataAboveTheLimit = async (
  modelId: BuilderIoModelIDs,
  opts?: BuilderIoOptions
) => {
  const _limit = 100;
  let _offset = 0;

  const getData = async () => {
    return await builder.getAll(modelId, {
      options: { enrich: true, offset: _offset, noTargeting: true },
      limit: _limit,
      includeUnpublished: true,
      query: opts?.query,
      sort: opts?.sort,
    });
  };

  const results = await getData();

  while (results.length === _limit + _offset) {
    _offset += _limit;
    const nextResults = await getData();
    results.push(...nextResults);
  }

  return results;

  1. Now with the fetch is way better.

    image
    image1210×886 52.1 KB

This is the function with fetch

export const getBuilderIoDataAboveTheLimit = async (
  modelId: BuilderIoModelIDs,
  opts?: BuilderIoOptions
) => {
  const _limit = 100;
  let _offset = 0;

 const query = opts?.query ? `&${opts.query}` : '';
  const sort = opts?.sort ? `&${opts.sort}` : '';

  const getData = async () => {
    return await fetch(
      `https://cdn.builder.io/api/v3/content/${modelId}?apiKey=${APY_KEY}&limit=${_limit}&offset=${_offset}$cachebust=true&includeUnpublished=true${query}${sort}`
    );

  };

  const data = await getData();


  while (data.length === _limit + _offset) {
    _offset += _limit;
    const nextData = await getData();
    data.push(...nextData);
  }

  return data;
};

So why is there such a big difference in speed/time and what should i do. Use the plain old fetch or do something about builder.getAll(…) and use it instead … ?

2

Hello @Mehan,

The significant performance difference you’re observing between using builder.getAll and fetch is likely due to several factors related to the implementation of the Builder SDK. Here are some key points and recommendations to consider:

  1. Optimize with Fields and Omit: When using builder.getAll, try to limit the fields you are fetching and omit unnecessary ones. This can reduce the payload size and potentially speed up the API response time.

    import { builder } from "@builder.io/react";

const entries = await builder.getAll('model-name', {
  fields: 'id,name,data.customField', // only include necessary fields
  omit: 'data.blocks', // omit large fields
  limit: 100,
  offset: 0
});

  2. Use Enrich Wisely: The enrich feature can add significant overhead by fetching references and symbols. Only use it if necessary.

    const pages = await builder.getAll('page', {
  options: { enrich: true }
});

  3. Cache Configuration: Adjust cache settings to balance between data freshness and performance. Using cacheSeconds and staleCacheSeconds can improve performance by reducing the need to frequently fetch fresh data.

    const entry = await builder.get('model-name', {
  cacheSeconds: 10,
  staleCacheSeconds: 86400
});

  4. Direct Fetch Approach: If performance remains an issue, you may continue using the fetch API directly as it gives you more control over the request and can be optimized better for your specific needs.

    const getData = async () => {
  return await fetch(
    `https://cdn.builder.io/api/v3/content/${modelId}?apiKey=${APY_KEY}&limit=${_limit}&offset=${_offset}&cachebust=true&includeUnpublished=true${query}${sort}`
  );
};
1 Like