> ## Documentation Index
> Fetch the complete documentation index at: https://dev.smile.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Preloading resources

The SDK allows you to fetch and cache ("preload") multiple resources from the Smile API in a single call, offering improved performance as compared to making multiple individual `get()` calls. Preloaded data is stored in an internal cache and can be accessed through `preloaded()` methods on each resource.

<Tip>
  Use preloading when you need to load multiple different resources at once. Otherwise, use `get()` methods.
</Tip>

## Resources that can be preloaded

Preloading is possible for a variety of resources using the corresponding resource key. Some resources are customer-specific and require a customer to be logged-in before they can be preloaded, while other resources are not and can be preloaded regardless of whether there is a currently logged-in customer.

| Resource                                                                  | Resource key             | Requires a logged-in customer |
| ------------------------------------------------------------------------- | ------------------------ | ----------------------------- |
| [Customer Points Products](/js/resources/customer-points-products/object) | `customerPointsProducts` | Yes                           |
| [Customer Points Wallet](/js/resources/customer-points-wallet/object)     | `customerPointsWallet`   | Yes                           |
| [Customer VIP Status](/js/resources/customer-vip-status/object)           | `customerVipStatus`      | Yes                           |
| [Earning Rules](/js/resources/earning-rules/object)                       | `earningRules`           | No                            |
| [Points Products](/js/resources/points-products/object)                   | `pointsProducts`         | No                            |
| [Points Settings](/js/resources/points-settings/object)                   | `pointsSettings`         | No                            |
| [Referral Settings](/js/resources/referral-settings/object)               | `referralSettings`       | No                            |
| [Reward Fulfillments](/js/resources/reward-fulfillments/object)           | `rewardFulfillments`     | Yes                           |
| [VIP Tiers](/js/resources/vip-tiers/object)                               | `vipTiers`               | No                            |

## How to preload resources

Resources can be preloaded at multiple points in the SDK lifecycle, using any of the supported preloading methods:

1. **During initialization** - By passing a `preload` parameter to [`Smile.initialize()`](/js/smile/initialize)
2. **During customer login** - By passing a `preload` parameter to [`Smile.customer.login()`](/js/resources/customer/login)
3. **Any other time** - By calling [`Smile.preload()`](/js/smile/preload)

Once a resource is preloaded, it can be instantly accessed using the corresponding `preloaded()` method on the resource class.

## Understanding the cache

The internal cache is updated any time a resource is preloaded using any of the supported preloading methods. Whenever you preload a resource, the SDK will:

1. Fetch the latest entries for the specified resource from the API.
2. Remove any existing entries from the cache for the specified resource.
3. Add the newly retrieved entries from the API to the cache.

If the initial API call to retrieve the latest entries does not succeed, the cache will remain unaltered.

### Refreshing cached data

To refresh cached data for a given resource, call `Smile.preload()` (or any other of the supported preloading methods) again with the same resource key.

<Warning>
  Calling `get()` methods does not update the cache.
</Warning>

### Cached data persistence

Preloaded data persists in the cache until either:

* [`Smile.reset()`](/js/smile/reset) is called or a hard page reload occurs — at which point all preloaded resources are removed from the cache.
* [`Smile.customer.logout()`](/js/resources/customer/logout) is called — at which point only customer-specific preloaded resources are removed from the cache.

## Sample code

```javascript JavaScript lines theme={null}
// Preload during initialization
await Smile.initialize({
  publishableKey: 'your-publishable-key',
  customerToken: 'your-customer-token',
  preload: ['pointsSettings', 'customerPointsProducts']
});

// Access preloaded data instantly (no API call)
const settings = Smile.pointsSettings.preloaded();
const products = Smile.customerPointsProducts.preloaded();

// Preload additional resources later
await Smile.preload(['rewardFulfillments']);
const fulfillments = Smile.rewardFulfillments.preloaded();
```