LocalStorage Based persistent cache with Nextjs

[AllanOliveiraM]

Hello!

I have a little problem.

localStorage based cache provider not work with server side (Next) because localStorage API is only client side...

How can I work around this efficiently?

I'm creating an application with nextjs and next-pwa that offers some offline features, and I need to retrieve cache for SWR from localStorage, therefore, the way described in the documentation is not enough

I've tried several times and in different ways but without success.

I'm glad if someone help me inject the cache in a client-side way 😄

package versions:

{
    "swr": "^1.2.2",
    "next": "12.1.4",
}

[AllanOliveiraM]

it was so much simpler to solve than I imagined

simply on the server side I returned an empty Map instance, and on the client side a Map based on localstorage for the provider (using typeof window !== 'undefined') kkkkkk

I haven't been able to do this before because I figured delivering an empty instance without the server side cache would cause an empty delivery to the client too, obviously is wrong kkkk

[OahMada]

This is how I solved this:

'use client';

import * as React from 'react';
import { SWRConfig } from 'swr';

function SWRConfigWrapper({ children }: { children: React.ReactNode }) {
	// https://swr.vercel.app/docs/advanced/cache#localstorage-based-persistent-cache
	// When initializing, we restore the data from `localStorage` into a map.

	let map = React.useMemo(() => new Map<string, object>(), []);
	React.useEffect(() => {
		let savedCache = JSON.parse(window.localStorage.getItem('app-cache') || '[]');
		savedCache.forEach(([key, value]: [string, object]) => {
			map.set(key, value);
		});

		// Before unloading the app, we write back all the data into `localStorage`.
		window.addEventListener('beforeunload', () => {
			const appCache = JSON.stringify(Array.from(map.entries()));
			window.localStorage.setItem('app-cache', appCache);
		});
	}, [map]);

	return <SWRConfig value={{ provider: () => map }}>{children}</SWRConfig>;
}

export default SWRConfigWrapper;