Next.js Shopify Headless Commerce 構築のことはじめ

Next.jsとShopify Storefrontの構成についてことはじめ的な部分を紹介します。

紹介・使用する技術等

* Next.js
* SSR (Server Side Rendering)
* SSG (Static Site Generation)
* ISR (Incremental Static Regeneration)
* Emotion
* CSS-In-JS
* Apollo
* GraphQL

Transcript

1. Next.js × Shopify Headless Commerce 構築ことはじめ

2. 作成したサンプル
 Shopify公式のサンプルエンドポイントを Storefront APIで叩いて取得したアイテムを 表示する簡単なサンプルです。
 
 Storefront APIはShopifyストア上で商品情 報の取得などを行うことのできるAPI です。
 
 詳細は下記を参照してください。 
 
 https://shopify.dev/api/storefront 

3. 使用するツールその1 
 Next.js ReactでのSSR (サーバーサイドレンダリン グ) やSSG (スタティックサイトジェネレーショ ン) を簡単にやってくれる多機能なフレーム ワークです。
 
 ※ Isomorphicでないライブラリとの共存は 少し工夫する必要があったりします。 

4. 使用するツールその2 
 Apollo Client メジャーなGraphQLライブラリ。
 
 ShopifyはGraphQLでAPIエンドポイントを提 供しています。
 
 今回はApollo Clientを使って Shopifyとデー タのやり取りを行います。

5. 使用するツールその3
 GraphQL Code Generator GraphQLのエンドポイントを指定して 
 対象のAPIとやり取りする関数を生成した り、型の生成を行ってくれます。
 
 Apollo用のプラグインも充実しており、Hooks APIでエンドポイントと疎通する関数や型を 生成してくれます。
 
 

6. 試すこと
 • SSR
 ◦ https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-r endering
 • SSG
 ◦ https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation 
 • ISR
 ◦ https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration 

7. SSRのおさらい
 1: サーバーサイド (Node.js) でReactをコン ポーネントをレンダリングした結果のHTML をブラウザに渡す
 
 2: ブラウザはまず、その静的なHTMLを表 示。
 
 3: 今度はクライアントサイドで同じReactコン ポーネントをレンダリングすることで、クライ アントサイド側のJavaScriptで制御可能にす る。

8. https://github.com/AtaruOhto/nextjs-shop ify-headless-commece-example 
 
 Next.js v.11で作っています。
 
 時間とともにNext.jsのアップデートが進み、 内容が古くなっている可能性があるので適 宜、最新のDocsを参照してください。 
 
 https://nextjs.org/docs/getting-started 
 Githubリポジトリ

9. npm install --save graphql @apollo/client @emotion/react @emotion/styled 
 必要なnpmモジュールをインストール
 yarn add -D @graphql-codegen/cli @graphql-codegen/introspection @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-apollo 

10. データの取得はApollo Clientで行います。
 
 GraphQL Code Generatorを使えば、Apollo でAPIアクセスするための関数を型つきで自 動生成してくれます。
 
 
 設定の一例を見てみましょう。
 
 https://www.graphql-code-generator.com/ 
 Apollo Clientを使ってデータを取得する (設定)

11. graphqlディレクトリにQuery一覧
 を配置して、GraphQL Code Generator のコ マンドを叩くと
 自動生成が走ります。
 
 試しにProductsを取得するQueryを書いて みます。(ProductsExample)
 
 
 ※ 設定で graphqlディレクトリ以下の
 .graphql ファイルから生成するようにしてい ます。
 Apollo Clientを使ってデータを取得する (設定)

12. yarn codegenコマンドを叩くと
 通信のための関数やGraphQLタグ 
 型が自動生成されます。
 Apollo Clientを使ってデータを取得する (設定)

13. GraphQL エンドポイントに対して 
 Apollo Clientでリクエストするためには Apollo ProviderでWrapする必要がありま す。
 
 
 どのページでも使えるように
 pages/_app.tsx など共通で使われるファイ ル等でWrapしておきます。
 Apollo Clientを使ってデータを取得する

14. Next.jsではpagesディレクトリ以下に作った ファイルがそのままページになります。 
 
 例えば、pages/csr.tsx というファイル内部で Reactコンポーネントをdefault export してい たら、/csr でページにアクセスできるように なります。
 
 ※ 各ページがSSRされます。
 ※ サーバー側でデータ取得してSSRする方 法は別途後述します。
 Next.jsでのページの作成

15. SSRされたページの中でクライアン トサイドから追加的にデータを取得 してみます。
 
 /csr ページでは自動生成された Hooks APIによってShopifyから データを取得します。
 
 データは data の中に入っていま す。
 クライアント側のみでデータ取得する(CSR) 

16. この状態で試しにJavaScriptをオフ したブラウザでアクセスしても、レ ンダリングされることはありませ ん。
 
 ※それ以外の箇所はSSRされてい ます。
 
 ※ ここでの「SSR」はサーバーサイ ド側からレンダリングされていると いう意味です。
 クライアント側のみでデータ取得する(CSR) 

17. ブラウザのJavaScriptをオンにする と、正常 にクライアントサイドからもデータを取得で き、Shopifyから取得したアイテムが表示さ れました。
 
 ※ このアイテムの部分はクライアントサイド レンダリングです。
 
 クライアント側のみでデータ取得する(CSR) 

18. サーバーサイド側でもデータを取得する(SSR) 
 このアイテムが例えば、SEO上非常に重要 な意味をもっていて、確実にコンテンツとし てクローラーに認識させることを可能な限り 保証したいなどの意図がある場合
 
 サーバーサイド側 (Node.js側) でもデータを 取得して、SSRすることができます。今度 は、Node.js側でApollo Clientを使って データ 取得してみます。
 
 ※ Storefront APIの利用上限に関する注意 点があります (後述)

19. GraphQL Code Generatorによって 生成された ProductsExampleDocument
 を使って、サーバーサイド側
 でデータを取得します。
 サーバーサイド側でもデータを取得する(SSR) 

20. pagesディレクトリ配下のファイル内部で getServerSideProps() というPropsを返す関 数をExportします。
 
 すると、サーバーサイドレンダリング時に使 用したいデータをコンポーネントに渡す こと ができます。
 
 getServerSidePropsはサーバー側のみで動 作します。クライアント側では動作しません。 
 
 サーバーサイド側でもデータを取得する(SSR) 

21. getServerSidePropsで返したデータは各 ページコンポーネントで default exportして いるコンポーネントでPropsとして受け取るこ とができます。
 
 右の図では、Propsとして受け取った ssrData をそのまま下位のコンポーネントに 流しています。
 
 
 ※ ここではShopifyのProductの情報を取っ てきています。
 サーバーサイド側でもデータを取得する(SSR) 

22. Shopifyから取得したProductsをリストとして 表示しています。
 
 これでこの部分がクライアントサイドレンダリ ングだけでなく、サーバーサイドでもレンダリ ングされます。
 
 
 ※ ブラウザアクセス時には、既にコンテンツ として存在することになります。
 サーバーサイド側でもデータを取得する(SSR) 

23. サーバーサイド側でもデータを取得する(SSR) 
 試しにJavaScriptをオフにしたブラウザ でア クセスしても表示させることができました。 
 
 
 

24. SSR時にStorefront APIを叩く時の注意点
 ShopifyのStorefront APIではIPアドレスベー スでAPIの利用上限が決まっています。
 
 https://shopify.dev/api/usage/rate-limits 
 
 Node.jsサーバーでレンダリングする時には そのサーバーのIPアドレスごとに計算される ので、本当にそのデータをサーバーサイド 側で取得してレンダリングすべきかどうか、 考慮が必要です。

25. SSR時にStorefront APIを叩く時の注意点
 サーバーサイド側でStorefront APIをそのま ま素直に叩くというよりは別途、キーバ リューストアのような機構に一度取得した データを格納しておいてSSR時に使うなどの 対策を講じる必要がありそうです。 
 
 ※ ただ、複雑にはなるので、使用には考慮 が必要だと思います。後述するSSGやISRと 比較してそこまで用いる旨味は少ないと思 います。

26. SSRの代わりにSSGを用いる
 ビルド時に静的ページを生成しておいて、 ユーザーアクセス時にはそれをブラウザに 渡します。
 
 SSRよりも、パフォーマンス面でメリットがあ ります。

27. ビルド時に静的コンテンツを生成(SSG) 
 ビルド時にデータソースにアクセスして、静 的ページを生成します。
 
 getStaticProps()という関数をexport すること で、ビルド時に静的ページを生成できます。
 
 
 商品詳細ページなど、動的にコンテンツを生 成する必要がある場合などは、 getStaticPaths()とともに使います。

28. ユーザーからアクセスがあった時に静的コ ンテンツをビルドします。
 
 revalidateで静的コンテンツの有効期限 を定 めます。
 
 有効期限を過ぎてアクセスがあった場合に は再度データソースからデータを取得して、 静的コンテンツを生成します。
 
 適切なrevalidateとfallback設定でShopifyの Storefront APIと組み合わせやすいと思い ます。
 ISR (Incremental Static Regeneration)

29. Linkコンポーネントのprefetchをfalseに して おかないと、Linkコンポーネントが画面に表 示された時点や、マウスオーバーされた時 点で静的コンテンツがビルドされてしまいま す。
 
 これが原因で、コンテンツの再生成が大量 かつ頻繁に行われてしまうことがある ことに 注意する必要があります。
 ISR使用時の注意点

30. ありがとうございました。