Expose cache to users

[Daiz]

I saw from #4 that there's a plan to expose SWR's (currently internal) cache to users at some point - is there some ETA on that?

My main use case right now would be to improve SSR with Next.js - with the presented example code (similar to code I have in my own Next.js app), getInitialProps will refetch the data every time before switching to the page, even if data already exists for that page in the SWR cache. Thus with exposed cache you could do something along the lines of this instead:

import useSWR, { cacheGet, cacheSet } from "swr";

const path = "/api/data";

App.getInitialProps = async () => {
  let data;  
  if (typeof window === "undefined") {
    // server-side getInitialProps
    data = await fetcher(path); // always fetch on server
  } else {
    // client-side getInitialProps
    data = cacheGet(path); // check cache for data
    if (!data) {
      data = await fetcher(path); // only fetch if data not available in cache
      cacheSet(path, data); // update cache since we got the data for it
     }
  }
  return { data };
}

function App (props) {
  const initialData = props.data;
  const { data } = useSWR(path, fetcher, { initialData });

  return <div>{ data }</div>;
}

This way, you get those nice server side rendered pages while also making in-app navigation snappier for pages you've already visited.

[shuding]

only fetch if data not available in cache
update cache since we got the data for it

I would not suggest you to do that yourself. The idea of SWR is to follow the pattern of "stale-while-revalidate", and hide the cache away from developers (because it's very difficult to do it right).

A better solution I think is get rid of SSR and fetch data in client side. If you have to use SSR, you can just return undefined in client-side getInitialProps, and let the client to render stale data / fetch on page transitions.

Mixing client and server side data fetching, and adding extra cache complexity to it is not a good idea.

[grazianodev]

@quietshu What if I have a list of items with infinite loading, and I want to render the first page on the initial page load (i.e. fetch data on the server) and render the following pages on the client? Then when the user goes back I want to re-render all the pages (including the first one) from cache. What would you suggest in that case?