Next.js: how to reset state upon ISR revalidation

Question

Imagine that I have a Next.js app which uses ISR to temporarily render some content on the home page. This content is interactive and I would maintain the client state in a Context. Every 24 hours, I would like to regenerate this interactive content at which point I would like to clear the state.

I don't actually have this app right now (I'm in the planning stage) but the best example of this that I can think of is Wordle where a word gets generated once every 24 hours and you need to guess it; if you are in the process of guessing the word when this reset happens, your guessing attempts are going to be reset back to zero (although I haven't checked this).

I thought that I could have a scheduled Firebase function that would update my content and call an endpoint that would trigger an on-demand revalidation as described here, however, I still don't know how I could reset the client state during/after this revalidation. Any ideas or suggestions?

Many thanks in advance!

Answer 1

With Google Cloud you can listen to a document with the onSnapshot() method and receive live data updates.

For my test I used React. If you are using NextJS you should run the following code CSR (client side). by adding 'use client' at the beginning of the file.

With a Cloud Firestore db that looks like this:

Using a functional component:

  import { doc, onSnapshot } from "firebase/firestore";
  import { firestore } from "./firebase-config";

  function DisplayMessage() {
    const [message, setMessage] = useState("");

    useEffect(() => {
      const MESSAGE_REF = doc(firestore, "daily_message/static_identifier");
      const observer = onSnapshot(
        MESSAGE_REF,
        (docSnapshot) => {
            if (docSnapshot.exists()) {
            const docData = docSnapshot.data();
            if (docData && docData.message) setMessage(docData.message);
          }
        },
        (err) => {
          console.log(`Encountered error: ${err}`);
        }
      );

      return () => {
        // close/remove the socket connection when closing this component:
        observer();
      };
    }, []);
  
  return <>
    <p>Data from db:</p>
    <p>{message}</p>
  </>
  }

The code is pretty simple.

With this setup all you need to do is update that document. Whenever you update the document's value all your clients viewing you component will receive updates.

Let me know if you need extra details. or help building whatever it is you want.
You can find much more detailed explanation at the official documentation.

Answer 2

My current intuition is telling me that I can clear the state manually. I can output daily snapshots from the server with a particular key as a server-side prop. This key will have a matching JSON entry in the local storage and if it isn't found, a new one will be created and all others will be cleared. I haven't tested this yet, so I'm not sure how viable is this solution, but this is my preliminary answer.