Enabling cache persistence between page reloads in Next.js

[znadir]

Hi everyone,

I've been trying to implement a persistent cache using SWR in my Next.js app, following the example in the official documentation (https://swr.vercel.app/docs/advanced/cache#localstorage-based-persistent-cache). However, I'm running into a ReferenceError: localStorage is not defined error.

Can anyone provide guidance on how to fix this error and enable cache persistence between page reloads in Next.js? If possible, could you also provide a working example?

Thank you in advance!

[Weixuanf]

Ok first you need to add check for window !== undefined:

export function swrLocalStorageProvider() {
  if (typeof window === "undefined") { // add this check to avoid the error
    // Return a dummy storage for server-side rendering
    return new Map();
  }

  const map = new Map<string, any>(
    JSON.parse(localStorage.getItem("app-cache") || "[]"),
  );

  window.addEventListener("beforeunload", () => {
    const appCache = JSON.stringify(Array.from(map.entries()));
    localStorage.setItem("app-cache", appCache);
  });

  return map;
}

Put the <SWRConfig provider={swrLocalStorageProvider}> in your root layout.tsx or _app.tsx

then you need to make all the components calling useSWR() client rendering to avoid this error.

In nextjs pages router you need to do:

import { swrLocalStorageProvider } from "@/utils/swrutils";
import GalleryPage from "@/components/gallery/GalleryPage";
import { useEffect, useState } from "react";

export default function Page() {
  const [isClient, setIsClient] = useState(false);
  const { data, error, isLoading } = useSWR<{ data: RunJob[] }>(
    "/api/workflow/listMyRunJob",
    swrFetcher,
  );

  useEffect(() => {
    setIsClient(true);
  }, []);

  if (!isClient) { // return null in server rendering pass
    return null;
  }
  return (
      <div>
       My client redering gallery page: {data}
      </div> 
  );
}

in app router, you do 'use client' to make the component client component to use swr

'use client'
import useSWR from 'swr'
export default Page() {
  const { data } = useSWR('/api/user', fetcher)
  return <h1>{data.name}</h1>
}