Next.js: как сбросить состояние после повторной проверки ISR

Question

Представьте, что у меня есть приложение Next.js, которое использует ISR для временного отображения некоторого контента на домашней странице. Этот контент является интерактивным, и я бы поддерживал состояние клиента в контексте. Каждые 24 часа я хотел бы регенерировать этот интерактивный контент, после чего я хотел бы очистить состояние.

На самом деле у меня сейчас нет этого приложения (я нахожусь на стадии планирования), но лучший пример, который я могу придумать, — это Wordle, где слово генерируется каждые 24 часа, и вам нужно его угадать; если вы находитесь в процессе угадывания слова, когда произойдет этот сброс, ваши попытки угадать будут сброшены обратно к нулю (хотя я этого не проверял).

Я думал, что у меня может быть запланированная функция Firebase, которая обновит мой контент и вызовет конечную точку, которая вызовет повторную проверку по требованию, как описано здесь , однако я до сих пор не знаю, как я могу сбросить состояние клиента во время/после этого повторная проверка. Любые идеи или предложения?

Спасибо заранее!

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

Код довольно прост.

При такой настройке все, что вам нужно сделать, это обновить этот документ. Всякий раз, когда вы обновляете значение документа, все ваши клиенты, просматривающие ваш компонент, будут получать обновления.

Дайте мне знать, если вам нужна дополнительная информация. или помочь построить все, что вы хотите.
Вы можете найти гораздо более подробное объяснение в официальной документации .