Next.js：如何在 ISR 重新生效時重置 state

Question

想象一下，我有一個 Next.js 應用程序，它使用 ISR 在主頁上臨時呈現一些內容。 此內容是交互式的，我會在上下文中維護客戶端 state。 每 24 小時，我想重新生成此交互式內容，此時我想清除 state。

我現在實際上還沒有這個應用程序（我正處於計划階段），但我能想到的最好的例子是Wordle ，它每 24 小時生成一次單詞，你需要猜測它； 如果您在重置發生時正在猜測單詞，您的猜測嘗試將重置為零（盡管我沒有檢查過）。

我以為我可以安排一個 Firebase function 來更新我的內容並調用一個端點來觸發按需重新驗證，如此處所述，但是，我仍然不知道如何在此期間/之后重置客戶端 state重新驗證。 有什么想法或建議嗎？

提前謝謝了！

Answer 1

借助 Google Cloud，您可以使用onSnapshot()方法收聽文檔並接收實時數據更新。

對於我的測試，我使用了 React。 如果您使用的是 NextJS，則應運行以下代碼 CSR（客戶端）。 通過在文件開頭添加“使用客戶端”。

使用如下所示的 Cloud Firestore 數據庫：

使用功能組件：

  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>
  </>
  }

代碼非常簡單。

使用此設置，您需要做的就是更新該文檔。 每當您更新文檔的值時，所有查看您組件的客戶都將收到更新。

如果您需要額外的詳細信息，請告訴我。 或幫助構建您想要的任何東西。
您可以在官方文檔中找到更詳細的解釋。

Answer 2

我目前的直覺告訴我，我可以手動清除 state。 我可以使用特定密鑰作為服務器端道具從服務器獲取 output 每日快照。 此密鑰將在本地存儲中有一個匹配的 JSON 條目，如果找不到，將創建一個新條目並清除所有其他條目。 我還沒有對此進行測試，所以我不確定這個解決方案的可行性如何，但這是我的初步答案。