ISR - это метод гибридного рендеринга в next.js, который полезен для SEO и улучшения пользовательского опыта. В этой статье я объясню, как работает ISR в next.js, покажу примеры реализации ISR как в маршрутизаторе страницы, так и в маршрутизаторе приложения, и, наконец, отвечайте на некоторые общие вопросы о ISR в next.js.

] Что такое ISR?

ISR - это метод гибридного рендеринга в next.js. Он регенерирует статические страницы с определенными интервалами, что помогает с SEO и улучшает пользовательский опыт, поддерживая контент в курсе без перестройки всего сайта.

] Как ASR улучшает SEO и пользовательский опыт?

Если вы использовали React.js или традиционное одностраничное приложение (SPA), вы знаете, что в спа -салоне обычно есть только один HTML -файл. Когда пользователь сначала посещает веб -сайт SPA, SPA отправляет минимальный HTML -файл (в React, это обычно index.html). После этого он получает CSS, JavaScript и другие ресурсы, необходимые для запрошенной страницы. Эти ресурсы затем отображаются и объединяются в HTML, как только они достигают клиента (браузер). Однако, как упоминалось ранее, начальный HTML -файл, отправленный спа -салоном, содержит мало или нет контента.

теперь представьте себе Google Bot, запрашивающий веб -сайт вместо пользователя. В то время как современные боты Google могут выполнять JavaScript, чтобы получить контент, полагаться исключительно на это может по -прежнему негативно повлиять на SEO. Бот может рассматривать начальный HTML как пустой, который может задержать индексацию содержания страницы, что может повредить вашему поисковому рейтингу.

next.js решает это с помощью методов рендеринга на стороне сервера, таких как предварительное использование сервера. Мы поговорим о том, чтобы узнать подробно позже, но вот краткий обзор. При предварительном использовании сервера HTML для каждого маршрута генерируется на сервере и отправляется непосредственно клиенту. Файлы CSS и JavaScript обычно связаны и кэшируются.

Итак, когда пользователь или бот Google посещают сайт, он сразу же видит полностью отображаемую страницу. Это улучшает SEO, потому что Google Bot может мгновенно увидеть контент в HTML. Это также улучшает пользовательский опыт, ускоряя загрузку страницы, что означает, что пользователям не нужно ждать динамической загрузки контента.

] Как работает ISR?

Если вы хотите лучше понять, как работает ISR (инкрементальная статическая регенерация), позвольте мне объяснить с примером. Представьте, что вы администратор, который управляет списком блогов на вашем сайте. Вы не хотите восстанавливать свой проект каждый раз, когда вы публикуете новый блог. Вместо этого вы хотите, чтобы страница списка блога обновлялась автоматически, скажем, каждые 60 секунд. Итак, когда вы пишете новый блог, вы хотите, чтобы он появился без ручного восстановления вашего проекта. Здесь появляется ISR. Хотя вы можете использовать такие методы, как SSR (рендеринг на стороне сервера), если вы хотите, чтобы ваш сайт обновлялся с определенными интервалами, ISR-это путь. Позже мы поговорим о SSR.

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

, как только 60 секунд будут вступлены, ISR проверяет новые данные, видит, что есть новое сообщение в блоге, и восстанавливает статическую страницу с обновленным контентом. Затем он кэширует новую версию на сервере. Вот что -то важное, чтобы отметить: в то время как ISR восстанавливает страницу, пользователи все еще видят старую версию, пока новая не будет готова. Таким образом, после завершения ISR любые новые посетители увидят обновленную страницу, но пользователи, которые уже были на сайте до переоценки, все равно увидят старую страницу, если они не обновляют ее.

Еще одна ключевая вещь, которую нужно помнить, заключается в том, что когда вы создаете свой веб -сайт с помощью NPM Run Build, начальная статическая страница генерируется SSG (статическое генерация сайта), а не ISR. После первой сборки ISR начинается, чтобы справиться с процессом регенерации. Кроме того, ISR не восстанавливает весь ваш сайт; Он только восстанавливает конкретную страницу, где реализован ISR. Итак, когда ISR восстанавливается, обновляется только эта конкретная страница, а не весь проект.

] Как реализовать ISR в маршрутизаторе приложения

Для реализации ISR (инкрементная статическая регенерация) в маршрутизаторе приложения важно знать, что ISR должен использоваться в компонентах сервера, а не с клиентскими компонентами. Это связано с тем, что ISR-это метод сервера, а не на стороне клиента. Таким образом, вы должны разместить ISR в такие файлы, как приложение/blog/page.tsx или приложение/blog/page.jsx.

Один ключевой момент, который следует помнить, заключается в том, что если вы не вызовите свой API в компоненте сервера, где установлен параметр Revalidate, ISR не будет работать. Компонент сервера должен быть в состоянии получить новые данные, чтобы восстановить страницу, в противном случае обновления не произойдет.

, чтобы включить ISR, все, что вам нужно сделать, это добавить свойство Revalidate в метод Fetch. Если вы предпочитаете использовать Axios вместо получения, вы все равно можете использовать его, настраивая запрос аналогичным образом, но сейчас я буду использовать Fetch. Может, позже я объясню, как сделать это с Axios.

я дал пример с TSX File и JSX Fiel:

Это пример реализации в TSX File

это пример реализации в файле JSX:

] Как реализовать ISR в маршрутизаторе страницы?

Для реализации ISR в маршрутизаторе страницы вы должны экспортировать getStaticProps из своего компонента и добавить свойство Revalidate в эту функцию. Эта функция работает только во время рендеринга на стороне сервера, поэтому вам необходимо убедиться, что вы называете ваш API внутри GetStaticProps. Как упоминалось в предыдущем разделе, вы можете использовать Fetch или Axios для получения ваших данных, но имейте в виду, что вызов API должен быть сделан внутри GetStaticProps, иначе ISR не будет работать.

снова, эта функция выполняется на сервере, а не на клиенте. Вот пример продемонстрировать:

это пример реализации в файле TSX:

это пример реализации в файле JSX:

] Заключение

isr в next.js - это метод рендеринга сервера, который улучшает как SEO, так и пользовательский опыт.
] Вы можете создать свой компонент, используя другие методы, такие как SSR или SSG, но иногда ISR необходим для конкретных вариантов использования.

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

спасибо, что прочитали этот блог, и я надеюсь, что вам понравилось!