Выборка данных на уровне компонентов в Sitecore JSS с Next.js

Сбор данных на уровне компонентов — это уникальная функция Sitecore JSS с Next.js. Она позволяет создавать фронтенд-приложения с лучшей архитектурой, позволяя создавать больше независимых модульных компонентов.

Что вы узнаете из этой статьи:

  • Как ванильный Next.js ограничивает вас в выборке данных
  • Реализация выборки данных на уровне компонентов в вашем приложении Next.js Sitecore JSS
  • Как продвинутая функция Incremental Static Regeneration (ISR) работает на уровне компонентов.

💡 Что я имею в виду под выборкой данных?

Когда я говорю «выборка данных», я имею в виду сбор контента для создания страницы и впечатлений, которые вы хотите создать для своих посетителей. Таким образом, выборка данных может представлять собой выполнение API-запроса к вашей системе управления контентом (CMS), загрузку изображений из облака, вызов механизма персонализации и многое другое.

Выборка данных в Next.js БЕЗ Sitecore JSS

Делая шаг назад, давайте сначала рассмотрим выборку данных в ванильном приложении Next.js, то есть без Sitecore JSS. Для ванильных приложений Next.js ожидается выборка данных на уровне страницы. Такой подход к выборке данных на уровне страницы работает, но ваши методы выборки данных могут быстро перегрузиться, если вам нужно собрать много данных для всех компонентов на странице.

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

Выборка данных в Next.js с помощью Sitecore JSS

Команда Sitecore JSS расширила возможности получения данных в Next.js, обеспечив получение данных на уровне компонентов. Это означает, что больше не нужно передавать данные из родительского компонента в дочерние. Мы можем получать эти данные внутри самих компонентов, что позволяет сохранить модульность наших фронтендов и следовать принципам разделения задач. См. мою предыдущую статью в блоге Модульные фронтенды с компонентно-ориентированным дизайном, чтобы узнать больше о том, почему это важно.

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

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

Реализация выборки данных на уровне компонентов

Здесь вы можете найти официальную документацию Sitecore по выборке данных на уровне компонентов. По большей части выборка данных в компоненте очень похожа на выборку данных на ваших страницах. Вы создаете свою асинхронную функцию получения данных, getStaticProps или getServerSideProps, и внутри нее обращаетесь к файловой системе, API, базе данных или к тому месту, где находятся ваши данные. Различия начинаются с того, что вы возвращаете из метода получения данных и как вы получаете доступ к этим данным внутри вашего компонента.

Типы возврата GetStaticComponentProps & GetServerSideComponentProps

GetStaticComponentProps и GetServerSideComponentProps — это два типа возврата для статического и серверного методов получения данных. Они отличаются от стандартных типов возврата при выборке данных на уровне страницы.
Самое большое отличие этих типов возврата в том, что вместо возврата объекта свойств вы возвращаете непосредственно объект данных. Если вам нужны данные JSON в вашем компоненте, используйте метод выборки данных, чтобы получить их и вернуть напрямую.

Пример статических данных (💡 Не забывайте о типе возврата GetStaticComponentProps)


import { GetStaticComponentProps } from '@sitecore-jss/sitecore-jss-nextjs';

export const getStaticProps: GetStaticComponentProps = async (rendering, layoutData, context) => {
  const post = await fetch('MyApiEndpoint').then((res) => res.json());
  return post;
};
Вход в полноэкранный режим Выход из полноэкранного режима

Пример данных на стороне сервера (💡 Не забывайте о типе возврата GetServerSideComponentProps)

import { GetServerSideComponentProps} from '@sitecore-jss/sitecore-jss-nextjs';

export const getServerSideProps: GetServerSideComponentProps = async (rendering, layoutData) => {
  const post = await fetch('MyApiEndpoint').then((res) => res.json());
  return post;
};
Вход в полноэкранный режим Выход из полноэкранного режима

Рендеринг UID для доступа к вашим данным

Следующая важная часть, которую необходимо рассмотреть, это то, как получить доступ к данным на уровне компонентов. Здесь на помощь приходит UID рендеринга. Каждый компонент имеет уникальный UID рендеринга, который необходимо передать в специальную функцию useComponentProps внутри вашей функции, экспортирующей HTML для страницы.

import { useComponentProps, ComponentRendering, Field } from '@sitecore-jss/sitecore-jss-nextjs';

type ComponentData = {
  rendering: ComponentRendering;
  fields: {
    Title: Field<string>;
    SessionizeURL: Field<string>;
  };
};

export const Default = (props: ComponentData): JSX.Element => {
  const externalData = useComponentProps<string>(props.rendering.uid);

  return (
    <div>
            { externalData }
    </div>
  );
};
Вход в полноэкранный режим Выход из полноэкранного режима

Выше показан приличный объем кода, поэтому давайте немного объясним его. Сначала мы рассмотрим объект ComponentData. Свойство rendering с типом ComponentRendering является самым важным. В нем хранится нужный вам UID.

Свойство fields — это данные, поступающие из Sitecore XM Cloud, гибридной безголовой CMS, поэтому оно необязательно в зависимости от вашего случая использования. Как минимум, вам нужно свойство ComponentRendering, чтобы у вас был UID для доступа к данным.

Следующим важным элементом является вызов useComponentProps. Это специальный метод Sitecore JSS, который получает данные, которые мы вернули из наших методов getStaticProps или getServerSideProps. <string> в вызове метода указывает на то, что мы ожидаем возврата строки. А props.rendering.uid — это уникальный UID компонента, который JSS использует для определения того, какие данные возвращать этому компоненту.

💡 Важно отметить, что useComponentProps может вернуть неопределенное значение, если по UID не будет найдено никаких данных. Поэтому имейте это в виду при обращении к переменной externalData позже в вашей функции.

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

Выборка данных на уровне компонента и инкрементальная статическая регенерация

Полезной функцией выборки данных Next.js является инкрементная статическая регенерация (ISR). Эта функция позволяет обновлять статические страницы новым содержимым без необходимости полной перестройки. Но ISR работает на уровне страницы, как же использовать ISR при получении данных в компоненте?

❔ Не знакомы с инкрементальной статической регенерацией? Найдите больше информации в моем блоге: Build Times & Incremental Static Regeneration to the Rescue.

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

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

Резюме

Возможность выполнять выборку данных на уровне компонента в Next.js с помощью Sitecore JSS позволяет размещать вызовы выборки данных именно там, где они нужны, а не на уровне страницы и не передавать данные по кругу. Это помогает сделать ваши компоненты более независимыми и модульными.

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

Это отличная особенность Sitecore JSS, которая помогает ему выделиться в качестве инструмента разработки без головы. Отдельное спасибо Адаму Брауэру и всей команде Sitecore JSS за помощь в реализации этой функции в моем собственном приложении и за то, что поделились подробностями о том, как ISR работает внутри ваших компонентов.

Официальная документация Sitecore по выборке данных на уровне компонентов находится здесь: Документация по выборке данных на уровне компонентов

Дополнительную информацию о Sitecore JSS и Headless Services можно найти здесь: Sitecore Developer Portal Headless Services

Оцените статью
devanswers.ru
Добавить комментарий