Shopify Theme × Contentful：外部CMS連携のパフォーマンス問題を解決する

// クライアントサイドでAPIを叩くしかない
fetch('https://cdn.contentful.com/spaces/xxx/entries/yyy')
  .then(res => res.json())
  .then(data => {
    document.getElementById('blog-content').innerHTML = renderContent(data);
  });

import { createClient } from 'contentful';
 
const client = createClient({
  space: process.env.CMS_SPACE_ID ?? '',
  environment: process.env.CMS_ENVIRONMENT ?? 'master',
  accessToken: process.env.CMS_ACCESS_TOKEN ?? '',
  host: 'preview.contentful.com', // Preview APIで下書き確認可能
});
 
export const getCMSPost = async (postId: string) => {
  const result = await client.getEntries({
    content_type: 'blogPost',
    'sys.id': postId,
    include: 3, // 3階層までネストされた参照を解決
  });
 
  return convertCMSItemToPost(result.items[0]);
};

import type { RequestHandler } from 'express';
 
type CMSWebhookTopic =
  | 'ContentManagement.Entry.create'
  | 'ContentManagement.Entry.publish'
  | 'ContentManagement.Entry.unpublish';
 
export const postWebhookHandler: RequestHandler = async (req, res) => {
  const topic = req.headers['x-contentful-topic'] as CMSWebhookTopic;
  const entryId = req.body.sys.id;
 
  switch (topic) {
    case 'ContentManagement.Entry.create':
    case 'ContentManagement.Entry.update':
      await saveArticle(entryId);
      break;
 
    case 'ContentManagement.Entry.publish':
      await updatePublishStatus(entryId, true);
      break;
 
    case 'ContentManagement.Entry.unpublish':
      await updatePublishStatus(entryId, false);
      break;
  }
 
  res.json({ message: 'OK' });
};

import { documentToReactComponents, Options } from '@contentful/rich-text-react-renderer';
import { BLOCKS, INLINES } from '@contentful/rich-text-types';
 
const renderOptions: Options = {
  renderNode: {
    // 外部リンクの処理
    [INLINES.HYPERLINK]: ({ content, data }) => {
      const text = content[0].value;
      const { uri } = data;
      return (
        <a
          href={uri}
          target="_blank"
          rel="noreferrer nofollow"
        >
          {text}
        </a>
      );
    },
 
    // 見出しにアンカーリンクを自動付与
    [BLOCKS.HEADING_2]: ({ content }) => {
      const text = content[0].value;
      return (
        <>
          <a id={text} className="anchor" />
          <h2>{text}</h2>
        </>
      );
    },
 
    // レスポンシブ画像の生成
    [BLOCKS.EMBEDDED_ASSET]: ({ data }) => {
      const asset = data.target;
      return (
        <img
          src={`https:${asset.fields.file.url}?w=1024&fm=webp&q=70`}
          srcSet={`
            https:${asset.fields.file.url}?w=640&fm=webp&q=70 640w,
            https:${asset.fields.file.url}?w=1024&fm=webp&q=70 1024w
          `}
          sizes="(min-width: 1024px) 1024px, 100vw"
          alt={asset.fields.title}
        />
      );
    },
  },
};
 
export const PostBody = ({ content }) => {
  return (
    <div className="post-body">
      {documentToReactComponents(content, renderOptions)}
    </div>
  );
};

export const generateResponsiveImage = (asset, preset = 'content') => {
  const sizes = {
    content: [320, 640, 1024, 1280],
    hero: [640, 1024, 1920],
    thumbnail: [200, 400],
  };
 
  const srcSet = sizes[preset]
    .map(width => {
      const url = `https:${asset.fields.file.url}?w=${width}&fm=webp&q=70`;
      return `${url} ${width}w`;
    })
    .join(', ');
 
  return {
    src: `https:${asset.fields.file.url}?w=${sizes[preset][0]}&fm=webp&q=70`,
    srcSet,
    sizes: '(min-width: 1024px) 1024px, 100vw',
  };
};

{%- if article.metafields.custom.is_cms_managed -%}
  {%- comment -%}
    CMS管理記事用のスタイルを読み込み
  {%- endcomment -%}
  {{ 'cms-article.css' | asset_url | stylesheet_tag }}
 
  <div class="cms-article">
    {{ article.content }}
  </div>
{%- else -%}
  {%- comment -%}
    通常のShopify記事
  {%- endcomment -%}
  <article class="standard-article">
    {{ article.content }}
  </article>
{%- endif -%}