Statically given initialData should be used only once per page for a given URL.

[trm217]

Hey everyone, I recently ran into a problem while using an useSWR-hook with the initialData-option.

Example on how one might run into this issue

Consider the following page usage:

1. Client: A user requests the website URL /product/5.
   1.1 Server: Fetch the product from the API and prerender the page using the fetched data as the initialData inside the useSWR hook.
   1.2 Client: The prerendered page is loaded and shown to the user. The useSWR does not fetch the given URL since the initialData-option is given.
2. Client: The user navigates to a different site using client-side routing.
3. Client: After some time the user comes back to the page he initially loaded using client-side routing.
   3.1 Client: Since the page hasn't been reloaded when entering the page, the initialData value is still the same as when the user loaded the prerendered page when he initially loaded the page. Since the initialData-option is given, the useSWR hook does not fetch the api.

Description of the issue

As you can see the page data has only been fetched a single time on the server during the initial page load. Thus the data might no longer be up to date. If the user would reload the page now, he could find that the data has changed since he initially loaded the site.

Using the revalidateOnMount-option

The above mentioned problem could be solved when using the revalidateOnMount-option inside the useSWR hook.
However this does more than would be required. With the revalidateOnMount-option when going through the above mentioned flow the data would be fetched three times instead of two times:

1. Server: Data is fetched during the prerendering.
2. Client: Data is fetched again directly after the prerenderd page is loaded.
3. Client: The data is fetched again after one navigates back to the page using client-side routing.

So let's say we have 50'000 users that do this at the same time we would have 150'000 requests instead of 50'000.
That for I don't consider this a viable solution.

Proposed solution

I believe initialData provided by static-generation should only be used once when the page has been initially loaded.
When navigating back to a previously prerendered site using client-side routing, the initalData value should be ignored and the data should be fetched by the useSWR hook.

I suppose this could be implemented by either caching on what routes what hook has been used with initialData or by checking if the page was entered using client-side routing or not. I believe the first option would be better, since unlike the second it's framework agnostic.

In case I missed something, I would highly appreciate it, if you could tell me where I went wrong.
If you believe my proposition to be a good idea, how would you like to see this implemented?

---

Example code (Next.js & SWR)

The dummy-code below would result in the given

   type Props = {
      initialData: Product;
   }
  
   const ProductDetailPage = ({ initalData }: Props) => {
     const { query: { id } } = useRouter();
   
      const { data: product, error: productError } = useSWR<Product[]>(
        `/product/${id}`, 
         {
            initialData: initialData
         }
      );
   
      return (
         <ProductDetailTemplate 
            product={product}
            loading={!product && !productError}
          />
      );
   }
   
   export const getStaticProps = async (ctx) => {
      const products = await cms.getAllProducts()
      
      const paths = posts.map((product) => ({
           params: {
              id: product.id
           }
       }));
      
      return {
         paths: paths,
         fallback: true
      }
   }
   
   export const getStaticProps = async (ctx) => {
      const product = await cms.getProduct(ctx.params.id);
      
      return {
         props: {
            initialData: product
         },
         revalidate: 5,
      } 
   }
   

[trm217]

An other possible solution

Perhaps another option would be to allow setting a duration for which the initialData is considered valid.

This could be achieved by setting a timeout relative to the time when the page was initially loaded, this information can be accessed via the performance API.

Here an example of how I could image this working:

 useSWR(`/product/5`, {
   initialData: product,
   initialDataTimeout: 5000
 })

If the user remains on the page after opening a timeout is set that waits for 5000ms. If the timeout is reached, the data gets fetched by the hook.
If the user reenters the page using client-side routing and the page has been open for more than 5000ms, the hook fetches the data and uses the initalDate as the stale state and revalidates it.