JSS Next.jsアプリでのコンポーネントレベルのデータ取得
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
Next.js、ビルド時または各リクエストで、各レンダリングフォームのページレベルのデータフェッチ戦略を使用してページをプリレンダリングできます。
コンポーネント・レベルでコンポーネント固有のデータをフェッチする場合は、静的生成用のgetStaticProps関数(SG)またはサーバー・サイド・レンダリング用のgetServerSideProps関数(SSR)を実装およびエクスポートすることで、ページ・レベルのデータ・フェッチと同様のメカニズムを使用できます。
シークレットや機密情報をコンポーネント レベルのgetStaticProps関数とgetServerSideProps関数に含めないでください。これらの関数は、クライアント側バンドルに含まれています。また、クライアントバンドルには、クライアント側のコードがインポートを使用していない場合でも、関数が依存するインポートも含まれます。
これは、ページ・レベルのgetStaticPropsおよびgetServerSideProps機能には影響しません。
JSSアプリでのコンポーネント レベルのデータ取得のしくみのデモについては、次のビデオをご覧ください。
ComponentPropsServiceクラス
SitecorePagePropsFactoryクラスは、データの取得が必要なコンポーネントを識別するのに役立つComponentPropsServiceクラスのインスタンスを使用します。ComponentPropsServiceクラスは、NPMパッケージ @sitecore-jss/sitecore-jss-nextjsによって提供されます。
ComponentPropsServiceクラスは、次のパラメーターを受け入れます。
-
componentModule - componentName引数を使用してNext.jsコンポーネントを返す関数。 componentModule関数の定義は、src/temp/componentFactoryファイルにあります。存在しない場合は、scripts/bootstrap.tsを実行して生成します。
-
layoutData - ページのレイアウトサービスデータ。
-
context - Next.js SSGまたはSSRコンテキスト。
ComponentPropsServiceクラスは、レイアウト サービス データを走査し、すべてのレンダリングを確認します。データのフェッチが必要なコンポーネントを見つけるために、サービスはrendering.componentNameプロパティを使用して、src/temp/componentFactoryファイル内のコンポーネント登録の一覧に対してコンポーネントを監視します。
コンポーネントが関数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);