Content Filtering in PageBuilder Engine

You can always create a content source that returns the entirety of an ANS-compliant document or any other external data format with no filtering or refinement at all if you so desire. However, you will likely run into a scenario in which you will not want the entirety of an API response or document delivered to the front-end for a feature to use.

PageBuilder Engine content sources provides a filtering method that you can easily optimize your content source outputs. Optimizing your content source outputs using transform is a very effective way to:

• Content cache that gets serialized and returned in the server-side rendered HTML page. This is really important to make sure your HTML pages stay lean. Clients who don’t refine and optimize their content source responses can easily bloat your front-end and page render performance. This can also have direct impact on your Web Vitals.
• Service-side cache performance can also get impacted by unoptimized content source outputs. Especially on content sources that process feed/list data. When unoptimized, these objects can become really large, in rare cases exceed our cache service object size. This may impact your cache service response speed, possibly your server-side render timing too.

Here’s an example of a sample weather service content source from before but with same filtering applied at the content source level:

export default {
    resolve: query => `https://api.darksky.net/forecast/YOUR_API_KEY/${query.lat},${query.long}`,
    params: {
        lat: 'number',
        long: 'number'
    },
    transform: (response) => {
        let transformedResponse = response
        // Your transformations on the response object before it gets cached, or returned to the component
        return transformedResponse
    }
}

Now any fetches for this content source will apply that filter and return refined data.