This document aims to address the challenges faced by Korean users learning Framer due to a lack of Korean resources by translating official blog content into Korean and adding practical information. We hope it provides some assistance to Framer users.

Reasons for Optimization Issues

Framer pre-renders pages on the server to enhance performance and compatibility across all devices. However, this process has the following limitations:

• Browser-specific APIs like window, document, and navigator cannot be used on the server, as it is not a browser environment.

• Custom code that relies on these browser APIs can lead to errors during pre-rendering.

Avoid Using Browser-Specific APIs

Try to write JavaScript that does not depend on browser APIs at the rendering stage. For instance, instead of using window.innerWidth, it's better to use CSS media queries for responsive layouts.

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>
  </>
}

Place Browser APIs Inside useEffect

If using browser APIs is necessary, it is recommended to put them inside useEffect. This ensures they are executed after the page loads in the browser, preventing optimization errors during server rendering.

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

  return <div>Hello!</div>
}

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

  return <div>Hello!</div>
}

Using Placeholders for Browser-Dependent Data

When information like document.cookie or navigator.language is required, which can only be accessed in the browser, consider the following methods:

1. Display only placeholders during server rendering.

2. Update components based on that data once the page fully loads.

Example: framer-optim-1.jsx

Excluding from Optimization

If necessary, you can opt out certain components from optimization:

• Skip pre-rendering by using server-side logic.

Important Considerations

• The content of that component will not be exposed to search engines.

• It will only be displayed once the entire page has loaded.

• It is advisable to provide placeholders for usability.

Example: framer-optim-2.jsx

Apply the Same Approach to Overrides

The same methods apply for custom overrides:

• Use placeholders or

• Opt out of optimization.

Example: framer-optim-3.jsx

Need Further Assistance?

If you couldn't solve the problem, please contact us via the Framer Contact Page or check the Developer Space.

This article is a translated and adapted version of 'How to fix custom code optimization errors like “Cannot Set Property of Undefined"' from the Framer official blog.