Блог

Этот компонент предназначен для подсчета просмотров на уровне страницы в Next.js приложение, развернутое на AWS Lambda

 function ViewsCounter({ slug }: { slug: string }) {
  const { data } = useSWR(`/api/views/${slug}`, fetcher);
  const views = new Number(data?.total);

  useEffect(() => {
    const registerView = () =>
      fetch(`/api/views/${slug}`, { method: "POST" })
        .catch(console.log);
    registerView();
  }, [slug]);

  return (
    <>
      {views}
    </>
  );
}
 

Этот предназначен для отображения просмотров на главной странице

 function ViewsDisplay({ slug }: { slug: string }) {
  const { data } = useSWR(`/api/views/${slug}`, fetcher);
  const views = new Number(data?.total);

  return (
    <>
      {views}
    </>
  );
}
 

Хотя он работает, как ожидалось, на localhost, похоже, что он отображает только первое полученное значение и по какой-то причине не выполняет его повторную проверку.
При посещении страницы счетчик запускается правильно, и значение изменяется в БД.
Вероятно, это как-то связано с изменением, любые подсказки приветствуются.

useSWR не будет автоматически повторно извлекать данные по умолчанию.

Вы можете либо включить автоматическую повторную выборку, используя эту refreshInterval опцию.

 const { data } = useSWR(`/api/views/${slug}`, fetcher, { refreshInterval: 1000 });
 

Или явно обновите данные самостоятельно, используя мутацию после запроса POST к API.

 function ViewsCounter({ slug }: { slug: string }) {
    const { data, mutate } = useSWR(`/api/views/${slug}`, fetcher);
    const views = new Number(data?.total);

    useEffect(() => {
        const registerView = () =>
            fetch(`/api/views/${slug}`, { method: "POST" })
                .then(() => {
                    mutate();
                })
                .catch(console.log);
        registerView();
    }, [slug]);

    return (<>{views}</>);
}