最適化の問題が発生する理由

Framerはすべてのデバイスでのパフォーマンスと互換性を高めるために、ページをサーバーで事前にレンダリング(pre-rendering)します。しかし、この過程で次のような制約があります。

• window、document、navigatorのようなブラウザ専用のAPIはサーバーでは使用できません。サーバーはブラウザ環境ではないからです。

• このようにブラウザAPIに依存するカスタムコードは、事前レンダリング中にエラーを引き起こす可能性があります。

ブラウザ専用APIの使用を避けてください

レンダリング時にブラウザAPIに依存しないJavaScriptを作成してください。例えば、window.innerWidthを使用する代わりに、CSSメディアクエリを利用してレスポンシブレイアウトを実現するのが良いでしょう。

jsx
// ❌️ 잘못된 예시: 최적화 문제 발생
export function Component() {
  const windowWidth = window.innerWidth

  return windowWidth < 768 ? <MobileVideo /> : <DesktopVideo />
}

// ✅ 올바른 예시: 최적화 문제 없음
function Component() {
  return <>
    <style>{`
      .my-component-video-mobile { display: block }
      .my-component-video-desktop { display: none }
        
      @media (min-width: 768px) {
        .my-component-video-mobile { display: none }
        .my-component-video-desktop { display: block }
      }
    `}</style>
    <div className="my-component-video-mobile"><MobileVideo /></div>
    <div className="my-component-video-desktop"><DesktopVideo /></div>
  </>
}

useEffect内にブラウザAPIを入れてください

ブラウザAPIの使用が必要な場合は、useEffect内に入れることをお勧めします。useEffectはページがブラウザでロードされた後に実行されるため、サーバーレンダリング中に呼び出されず、最適化エラーを防ぐことができます。

jsx
// ❌️ 잘못된 예시: 최적화 문제 발생
function Component() {
  window.gtag("event", "component_rendered")

  return <div>Hello!</div>
}

// ✅ 올바른 예시: 최적화 문제 없음
function Component() {
  useEffect(() => {
    window.gtag("event", "component_rendered")
  }, [])

  return <div>Hello!</div>
}

ブラウザ依存データ用のプレースホルダーを使用

document.cookieやnavigator.languageのようにブラウザでしか得られない情報が必要な場合、次のような方法をお試しください：

1. サーバーレンダリング時にはプレースホルダーのみを表示します。

2. ページが完全にロードされた後、該当データに基づいてコンポーネントを更新します。

例: framer-optim-1.jsx

最適化から除外する方法

避けられない場合、該当コンポーネントを最適化の対象から除外(opt-out)することができます：

• サーバーサイドのロジックを使用して事前レンダリングをスキップします。

注意事項

• 該当コンポーネントの内容は検索エンジンに表示されません。

• ページ全体がロードされた後にのみ表示されます。

• ユーザー体験のためにプレースホルダーを提供するのが良いです。

例: framer-optim-2.jsx

オーバーライドにも同様のアプローチを適用

カスタムオーバーライドの場合にも次のような方式が必要です：

• プレースホルダー使用または

• 最適化から除外

例: framer-optim-3.jsx

追加のサポートが必要ですか？

問題を解決できなかった場合は、Framerコンタクトページからお問合せいただくか、Developer Spaceを参照してください。

本記事はFramer公式ブログの'"Cannot Set Property of Undefined"のようなカスタムコード最適化エラーを修正する方法'を翻訳・改編したコンテンツです。