Caching Document Data in React-Native Application

Developing with Prismic
,
1

Context

I am working on a mobile application in react-native using expo. This application relies on prismic documents for the content to be displayed to users. Everything ranging from the initial splash screen logo to the text displayed on pages, is all fetched from prismic. For this, I am utilising the prismicio/client javascript library.

Issue

The issue is the complexity that this logic brings. Everytime a page is navigated to, the prismic api is used and the latest content for the page is fetched. This leads to noticeable wait/load time for a page which negatively impacts user experience.

Solution in Mind

I want to implement a sort of caching to prevent this. Initially on app load our load time would be high, but then every page and it's content would be cached so that re-navigation on subsequent app loads is a breeze. It is reasonable to assume that the content on pages would not be changing frequently on prismic.

Question

Considering this scenario, how would I go about implementing this cache based approach in react-native using the prismicio/client library? I would need to be able to check if the content of the page has changed and then trigger some sort of update. Does the library provide the necessary functionality to check if the document has been updated? Is there another approach to caching that I am missing?

It is also important to note that caching would need to be implemented on all fields of a page including images, text, etc.

Any help or guidance would be appreciated, thanks!

2

Hi @muhammad.umer ,

Thanks for the detailed explanation.

You’re absolutely right that fetching documents from the Prismic API on every page navigation can introduce latency, especially in mobile apps where performance and user experience are crucial. You’re also on the right track considering caching.

CDN Endpoint Optimization

First, a quick note: Prismic serves all content via a high-performance CDN, so if you’re using the default @prismicio/client setup, your requests already hit a globally distributed cache. However, these are still network calls, and on mobile, even fast calls can feel slow if made frequently.

If you’re not already using the cdn.prismic.io endpoint, make sure your API endpoint starts with that. This ensures you’re getting the benefits of CDN caching.

Caching on the Client (React Native)

Since your app’s content doesn’t change often, a local caching strategy makes sense. Here’s a typical approach you could consider:

1. Use a persistent storage layer

React Native provides options like AsyncStorage, or for more complex needs, libraries like react-query (with custom persistence) or react-native-mmkv for fast key-value storage.

You could:

  • Fetch and store Prismic documents (as JSON) on initial load.
  • On subsequent app launches, check storage first before fetching.

2. Check for updates using last_publication_date

The Prismic API includes metadata like last_publication_date in each document. You can:

  • Store this date locally along with the document.
  • On a background thread or periodic sync, re-fetch only the documents where the last_publication_date has changed.

Alternatively, you could:

  • Use Prismic’s ref system to track the current content version (e.g., by storing the masterRef on app load and checking if it has changed since the last fetch).
1 Like