[SDK]: keeping fresh data even when the server uses caching mechanisms

[Marvin Frachet]

Describe the bug

Let's say I'm running a nextjs application in which I want to add a max-age=300.

When retrieving the Nexjs data (user lands) using getServerSideProps, the application will send a request to Progressively to get the feature flags value.
On subsequent requests on the Nextjs application, during the next 300s, the browser will serve the cached HTML file with the old feature flag stored in this cache.

To Reproduce

• Set a max-age=300 on a server side application
• Make a request and get the flag variation
• Change the flag status
• Refresh the page (⚠️ without hard refresh)

The page shows the old variant.

Expected behavior

The page should show the new variant

Solution 1

In any case, after the page has finished loading from the cache, and it has finished hydrating, make a request to resolve the flags from the client (XHR).

Main drawback: the app can flicker if the flag resolved is different from the one cached

PR: #56

Solution 2

• When getting the flags from the API, make sure to attach a updatedAt field with a server-generated timestamp
• When requesting the Nextjs cached page, the updatedAt field will remain the same (since cached and available in nexttjs SSR data)
• When updating a flag using WebSockets ("real-time", no caching involved), set the flags in local storage AND also add an updatedAt field to the message.
• On subsequent requests, even the cached one, compare the updatedAt value from local storage and the Nextjs data and provide with the freshest one. Update local storage accordingly

Main drawback: if a users is not on the browser when the real time push happens, they still have the old variants available