Итак, вы хотите улучшить предварительный рендеринг ваших компонентов? Вы попали в нужное место!

Основная сила NextJS в отношении SSG заключается в предварительном рендеринге, быстрой сборке и хорошем опыте разработки.


Зачем мне предварительный рендеринг?

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

Описание изображения
(источник: Версель)

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

Второй шаг — получить данные через getStaticProps из API или CMS (вы можете использовать Strapi, Contentful, Sanity и т. д.).

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


Понизьте зависимости браузера, только реагируйте на хуки.

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


Что я должен предварительно отрендерить, если компонент только клиентский?

Для удобства пользователей у вас есть два варианта: загрузка или скелетный компонент. Скелетный компонент рассматривался как лучший кандидат, потому что он обманывает ваш разум тем, что компонент рендерится быстро.


Что мы должны предварительно отрендерить, если у нас есть сложные компоненты для настольных компьютеров, планшетов и мобильных страниц?

Вы можете использовать промежуточное ПО nextJS и проверить пользовательский агент:

  • Мы будем фильтровать с помощью запроса пользовательского агента и сопоставлять макет экрана с нашей страницей.

Например, у вас может быть мобильная страница, страница для рабочего стола и страница для планшета (например, homepage-mobile.tsx, homepage-desktop.tsx). Вы выберете нужную страницу и соответствующим образом измените ответ.


Как проверить, как ваша страница предварительно отображается?

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