JSS Next.jsアプリでのコンポーネントレベルのデータ取得

Version:

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

Next.jsは、各レンダリングフォームのページレベルのデータフェッチ戦略を使用して、ビルド時または各リクエストでページをプリレンダリングできます。

コンポーネント・レベルでコンポーネント固有のデータをフェッチする場合は、静的生成のgetStaticProps (SG) またはサーバー・サイド・レンダリング (SSR) のgetServerSideProps関数を実装およびエクスポートすることにより、ページ・レベルのデータ・フェッチと同様のメカニズムを使用できます。

メモ

コンポーネントレベルのgetStaticProps関数とgetServerSideProps関数にシークレットまたは機密情報を含めると、その情報は開発モードのクライアント側バンドルにのみ含まれます。

JSSアプリでのコンポーネントレベルのデータ取得のしくみのデモについては、次のビデオをご覧ください。

大事な

コンポーネント・レベルのデータ・フェッチは、エラー・ページでの動作を意図したものではありません。

ComponentPropsServiceクラス

SitecorePagePropsFactoryクラスは、データの取得が必要なコンポーネントを識別するのに役立つComponentPropsServiceクラスのインスタンスを使用します。ComponentPropsServiceクラスは、NPMパッケージ @sitecore-jss/sitecore-jss-nextjsによって提供されます。

ComponentPropsServiceクラスは、次のパラメーターを受け入れます。

moduleFactory - componentName引数を使用してNext.jsコンポーネントモジュールを返す関数。 moduleFactory関数の定義はsrc/temp/componentBuilderファイルにあります。存在しない場合は、scripts/bootstrap.tsを実行して生成します。
layoutData - ページのレイアウトサービスデータ。
context - Next.js SSGまたはSSRコンテキスト。

ComponentPropsServiceクラスは、レイアウトサービスデータを走査し、すべてのレンダリングを確認します。データのフェッチが必要なコンポーネントを見つけるために、サービスはrendering.componentNameプロパティを使用して、src/temp/componentBuilderファイル内のコンポーネント登録の一覧に対してコンポーネントを監視します。

コンポーネントが関数getStaticPropsまたはgetServerSidePropsを定義してエクスポートする場合、ComponentPropsServiceクラスは関数を実行します。すべての副作用を適用した後、コンポーネントデータをcomponentPropsオブジェクトに { rendering.uid: data }の形式で格納します。

たとえば、次のコンポーネントはデータフェッチ関数を定義し、挿入されたコンポーネントのpropsを表示します。

手記

この例のコンポーネントには、getStaticProps関数とgetServerSideProps関数の両方の実装が含まれています。実際のコンポーネントでは、選択したレンダリングモードに応じて、そのうちの1つだけを定義する必要があります。

import {
  Text,
  RichText,
  Field,
  GetServerSideComponentProps,
  GetStaticComponentProps,
  withDatasourceCheck
} from '@sitecore-jss/sitecore-jss-nextjs';
import { ComponentParams, ComponentRendering } from '@sitecore-jss/sitecore-jss-nextjs';

type ComponentProps = {
  rendering: ComponentRendering;
  params: ComponentParams;
};

type ContentBlockProps = ComponentProps & {
  fields: {
    heading: Field<string>;
    content: Field<string>;
  };
};

const ContentBlock = ({ fields }: ContentBlockProps): JSX.Element => (
  <div className="contentBlock">
    <Text tag="h2" className="contentTitle" field={fields.heading} />
    <RichText className="contentDescription" field={fields.content} />
  </div>
);

const fetchPost = () =>
  fetch('https://jsonplaceholder.typicode.com/posts/1').then((res) => res.json());

export const getStaticProps: GetStaticComponentProps = async (rendering, layoutData, context) => {
  const post = await fetchPost();
  return post;
};

export const getServerSideProps: GetServerSideComponentProps = async (rendering, layoutData) => {
  const post = await fetchPost();
  return post;
};

export default withDatasourceCheck()<ContentBlockProps>(ContentBlock);

この記事を改善するための提案がある場合は、お知らせください!

JSS Next.jsアプリでのコンポーネント レベルのデータ取得

ComponentPropsServiceクラス

JSS Next.jsアプリでのコンポーネントレベルのデータ取得