Следует ли использовать next/link (предварительно загруженные переходы на стороне клиента) для страниц с любым динамическим контентом?

От: следующая / ссылка

Вы можете видеть, что <Link> компонент из позволяет переходить на стороне клиента и связывать prefetching, которые являются отличными функциями, но, возможно, не для всех случаев.

Пожалуйста, прочтите предостережение, с которым я столкнулся. Допустим, у меня есть следующие страницы:

  • - Некоторая целевая страница с навигационной панелью
  • - Здесь я вижу свои последние сообщения
  • - Здесь я могу добавить больше сообщений

На странице из приведенного выше примера используется getStaticProps с участием revalidate. Что-то вроде:

      export const getStaticProps : GetStaticProps<HomeRoute> = async () => {
  const preloadedState = await getPreloadedState();
  return({
    revalidate: 1,
    props: {
      preloadedState
    }
  });
};

Теоретически через 1 секунду он должен отправить последний устаревший ответ для следующего запроса и запустить новую статическую регенерацию, которая будет обслуживаться для последующих запросов. Через 1 секунду процесс повторяется, и вы получаете свежие данные, по крайней мере, каждую секунду, что практически сразу же.

Теперь посмотрим на предостережение, с которым я столкнулся:

    1. Пользователь попадает на страницу. Eсть Linkна панели навигации, указывающей на. Эта ссылка будет prefetched от .
    1. В другом браузере admin идет в Admin page и добавляет еще одно сообщение (которое в какой-то момент должно появиться на странице).
    1. Теперь пользователь нажимает на ссылку страницы. Новый пост не существует.
    1. Нажимает на Homeочередной раз. И снова щелкает Latest. Нового поста пока нет и не будет.

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

Единственный способ, которым пользователь когда-либо увидит новое сообщение, - это если он / она нажмет F5сделать полную перезагрузку сайта. И может потребоваться обновить дважды, потому что первая версия может вернуть предыдущую устаревшую версию, вызывая регенерацию для следующей.

Я имею в виду, как можно обойти эту проблему? Я не должен использовать next/linkдля страниц, содержащих какие-либо динамические данные? Должен ли я просто использовать нормальный <a> теги?

1 ответ

Решение

Я разместил этот же вопрос на нескольких форумах и получил такой ответ:

Кажется, то, что вы описали, правда. кеширует результаты на стороне клиента, и ваш посетитель не получит повторно проверенный результат из коробки, если не будет перезагрузки полной страницы.

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

Учитывая этот факт, я буду использовать и переходы на стороне клиента. Но я также использую что-то вроде чтобы время от времени выполнять полную перезагрузку веб-сайта, поэтому я уверен, что мои пользователи в конечном итоге будут получать повторно проверенные страницы.

Другие вопросы по тегам