Theo's Typesafe Cult•9mo ago

revalidate cached data on page load app router?

if i fetch a user's profile data with unstable_cache, but in case a user updates their data since last cache, i want to get that update data. is their a way (i believe RQ worked this way) so that you rely on the cached data on page load, but then it refetches in the background and updates if it's new? i came up with this seemingly really hacky client comp that will revalidate the path on page load. i just mount it in the page component. wondering if anyone has a better approach. I might just default to not using unstable_cache, and just always fetch new data

"use client";

import { useEffect, useMemo } from "react";

const useRevalidateOnPageLoad = (revalidate: () => void) => {
  useEffect(() => {
    console.log("running");
    (() => {
      revalidate();
    })();
  }, []);
};

export const RevalOnLoad = (props: { reval: () => void }) => {
  const reval = useMemo(() => props.reval, [props.reval]);
  useRevalidateOnPageLoad(reval);

  return null;
};

"use client";

import { useEffect, useMemo } from "react";

const useRevalidateOnPageLoad = (revalidate: () => void) => {
  useEffect(() => {
    console.log("running");
    (() => {
      revalidate();
    })();
  }, []);
};

export const RevalOnLoad = (props: { reval: () => void }) => {
  const reval = useMemo(() => props.reval, [props.reval]);
  useRevalidateOnPageLoad(reval);

  return null;
};

1 Reply

jackOP•9mo ago

This is actually also happening to me when i don't use unstable_cache

Gaming

Programming

revalidate cached data on page load app router?