Prefetch static resources

Prefetch static resources

By default, the SDK fetches application resources when the embedded app content is requested. For optimal performance and faster loading of embedded objects, we recommend prefetching static resources and serving these static assets from the local cache of the user’s browser.

Note

Prefetching static resources is only effective when you can cache static resources before rendering the embed. In other words, prefetch static resources as your user navigates to pages in your application that are loaded before the user navigates to the page that contains the embed.

To prefetch static resources, use one of these options:

  • Use the prefetch method (Recommended)

    The prefetch method in the SDK allows your web browsers to prefetch static resources from a given URL on application load. In the prefetch method, you can define the prefetch URL and specify the embed components for which you want to prefetch resources. To improve application response time, ThoughtSpot recommends that you call the prefetch method as soon as possible when your application initializes.

    In the following example, the prefetch method is called before init to prefetch resources before the authentication process is initialized.

    // App.jsx
    import {
       prefetch,
       PrefetchFeatures
    }
    from '@thoughtspot/visual-embed-sdk';
    ...
    prefetch ("https://<hostname>:<port>", [PrefetchFeatures.LiveboardEmbed,PrefetchFeatures.VizEmbed]);
    ...
    // post-login.jsx
    // might need to be called after login to get
    // the user's context.
    
    import {
       AuthType,
       init,
    }
    from '@thoughtspot/visual-embed-sdk';
    init
       ({
          thoughtSpotHost: "https://<hostname>:<port>",
          authType: AuthType.None,
       });
  • Call prefetch in init

    Call prefetch in init (a viable alternative if init can be called early in your application, before you render the embed). You can call prefetch in the init method by setting the callPrefetch attribute to true.

    import {
       LiveboardEmbed,
       AuthType,
       init,
       prefetch,
    }
    from '@thoughtspot/visual-embed-sdk';
    init
       ({
          thoughtSpotHost: "https://<hostname>:<port>",
          authType: AuthType.None,
          callPrefetch: true
       });