---
schema_version: "1"
id: 7f8bdac4319613011a93d6e8e455272f7ddeca1d20b3c524139635e68f67dd54
title: Access Site Preferences in Your Composable Storefront from the MRT Data Store
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/commerce-cloud/pwa-kit-managed-runtime/guides/pwa-site-prefs.md
canonical_url: https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/pwa-site-prefs.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 36faf87a7d589671f3c1c45a6d7b00ec83151c72f8f20efb6a2400da8053d107
products:
  - Composable Storefront
  - Salesforce APIs
---
# Access Site Preferences in Your Composable Storefront from the MRT Data Store

If your composable storefront code requires access to the site preferences that administrators manage in Business Manager, access site preferences directly from the Managed Runtime (MRT) Data Store. Accessing site preferences from the MRT data store is faster than making a Salesforce B2C Commerce API (SCAPI) call. Enable the MRT data store by using a configuration or an environment variable.

## Prerequisites

- [PWA Kit](https://github.com/SalesforceCommerceCloud/pwa-kit) v3.21 or later.

## Enable the MRT Data Store

Before accessing the MRT Data Store, enable it in the app configuration file or by using an MRT environment variable.

Enable the MRT Data Store in the app configuration value in `config/default.js` as shown in this example.

```
module.exports = {
    app: {
        mrtDataStore: {
            enabled: true  // Enable MRT Data Store bootstrap
        },
        // ... rest of config
    }
}
```

Alternatively, use an environment variable to enable the MRT Data Store.

```
PWAKIT_MRT_DATA_STORE_ENABLED=true npm start
```

**note:** If the `PWAKIT_MRT_DATA_STORE_ENABLED` environment variable is set to a valid value, it takes precedence over the app configuration value.

## Usage in ssr.js (Server Middleware)

Access preferences at the server middleware layer, before React renders. The async `getCustomSitePreferences` and `getCustomGlobalPreferences` functions from `@salesforce/pwa-kit-runtime/utils/ssr-server` let you inspect preference values and modify the HTTP response—for example, returning a 503 status during maintenance or populating an API endpoint with feature flags. Because middleware runs before rendering, this is the right place when preferences need to gate or redirect requests. To access preferences inside React components instead, use the utility functions or hooks.

```
// app/ssr.js
import {
    getCustomSitePreferences,
    getCustomGlobalPreferences
} from '@salesforce/pwa-kit-runtime/utils/ssr-server'

export default function(app) {
    app.use(async (req, res, next) => {
        const siteId = res.locals.site?.id

        const [sitePrefs, globalPrefs] = await Promise.all([
            getCustomSitePreferences({siteId}),
            getCustomGlobalPreferences()
        ])

        if (sitePrefs.maintenanceMode) {
            return res.status(503).send('Maintenance')
        }

        next()
    })

    app.get('/api/config', async (req, res) => {
        const siteId = res.locals.site?.id
        const prefs = await getCustomSitePreferences({siteId})

        res.json({
            enableFeature: prefs.enableFeature || false
        })
    })
}
```

### Usage in React Components (Utilities)

Use the utility functions from `@salesforce/pwa-kit-runtime/utils/ssr-server` when you need direct control over how preferences are fetched and cached. Wrap them in `useQuery` from `@tanstack/react-query` to configure caching behavior—for example, `staleTime: Infinity` fetches data once per session, and `enabled: Boolean(siteId)` prevents the query from running until a site ID is available. Extract this logic into shared custom hooks and call them from any component that needs to conditionally render content based on preference flags.

```
// app/hooks/useStorePreferences.js
  import {useQuery} from '@tanstack/react-query'
  import {
      getCustomSitePreferences,
      getCustomGlobalPreferences
  } from '@salesforce/pwa-kit-runtime/utils/ssr-server'

  export function useSitePreferences(siteId) {
      return useQuery({
          queryKey: ['sitePreferences', siteId],
          queryFn: () => getCustomSitePreferences({siteId}),
          staleTime: Infinity,
          enabled: Boolean(siteId)
      })
  }

  export function useGlobalPreferences() {
      return useQuery({
          queryKey: ['globalPreferences'],
          queryFn: () => getCustomGlobalPreferences(),
          staleTime: Infinity
      })
  }

  // app/pages/home/index.jsx
  const Home = () => {
      const {data: sitePrefs} = useSitePreferences('RefArch')
      const {data: globalPrefs} = useGlobalPreferences()

      return (
          <div>
              {sitePrefs?.showBanner && <HeroBanner />}
              {globalPrefs?.enableChat && <ChatWidget />}
          </div>
      )
  }
```

## Usage in React Components (Hooks)

Use the React hooks for the most idiomatic way to access preferences in React function components. The `useCustomSitePreferences` and `useCustomGlobalPreferences` hooks from `@salesforce/pwa-kit-react-sdk/ssr/universal/hooks` integrate with React's component model, follow standard hook conventions, and can be composed into custom hooks. This is the recommended approach for React function components.

```
// app/pages/home/index.jsx
import React from 'react'
import {
    useCustomSitePreferences,
    useCustomGlobalPreferences
} from '@salesforce/pwa-kit-react-sdk/ssr/universal/hooks'

const Home = () => {
    const sitePrefs = useCustomSitePreferences()
    const globalPrefs = useCustomGlobalPreferences()

    return (
        <div>
            {sitePrefs.showBanner && <HeroBanner />}
            {globalPrefs.enableChat && <ChatWidget />}
        </div>
    )
}
```

## Local Development

Use `MRT_DATA_STORE_DEFAULTS` to seed values without a real data store for local testing. You can use either a flat object or the SCAPI envelope format with `data` and `total`.

Use flat objects for simplicity:

```
MRT_DATA_STORE_DEFAULTS='{
  "custom-global-preferences":{
    "enableChat": true,
    "maintenanceMode": false
  },
  "RefArch-custom-site-preferences":{
    "productsPerPage": 24,
    "showBanner": true
  }
}' PWAKIT_MRT_DATA_STORE_ENABLED=true npm start
```

Or use the SCAPI envelope format to match the actual data store structure. Include both `data` (array) and `total` (number) — both fields are required to trigger envelope unwrapping:

```
MRT_DATA_STORE_DEFAULTS='{
  "custom-global-preferences":{
    "data": [{ "enableChat": true, "maintenanceMode": false }],
    "total": 1
  },
  "RefArch-custom-site-preferences":{
    "data": [{ "productsPerPage": 24, "showBanner": true }],
    "total": 1
  }
}' PWAKIT_MRT_DATA_STORE_ENABLED=true npm start
```

For example, based on the `MRT_DATA_STORE_DEFAULTS` definition, `getCustomSitePreferences({siteId: 'RefArch'})` returns:

```
{
  productsPerPage: 24,
  showBanner: true
}
```

And `getCustomGlobalPreferences()` returns:

```
{
  enableChat: true,
  maintenanceMode: false
}
```

## Data Store Structure

The MRT Data Store is populated automatically when enabled. You don't need to manually configure keys. The utilities and hooks handle key resolution internally based on the site ID you provide.

**For reference, data is stored under these keys:**

- Global preferences: `custom-global-preferences`
- Site preferences: `{siteId}-custom-site-preferences`

The exact structure of the preference objects depends on the custom preferences defined in Business Manager for your B2C Commerce instance.