nextjs SSG에서 "createContext 에러"의 원인을 모르겠습니다

Question

안녕하세요. Next.js에서 “use client” 관련하여 몇 가지 질문을 작성하다보니 SSG에서의 서버 컴포넌트에 대해서도 궁금증이 일어 글을 남깁니다.우선, 저는 아래와 같이 작업을 진행하였습니다.Next.js SSG 방식 사용styled-components와 context API를 이용하여 ThemeContext 직접 만들어 추가layout.jsx 컴포넌트를 서버 컴포넌트로 유지하기 위해 useContext 코드를 포함하는 클라이언트 컴포넌트인 ThemeProviderWrapper 컴포넌트 생성구조는 아래와 같습니다.layout.jsx (서버 컴포넌트)ThemeProviderWrapper.jsx (클라이언트 컴포넌트)page.jsx (서버 컴포넌트)아래는 실제 작성한 코드입니다.1. 발생한 문제와 해결한 방법새로고침 시 index.js:644 Uncaught TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. 에러가 발생하고 있습니다.위 에러는 page.jsx 파일에 “use client”를 추가함으로써 해결이 되었습니다.+) 지금 보니 createContext를 삭제하고, 심지어 context API와 Theme 관련 코드까지 전부 삭제해도 page.jsx에서 styled-components를 이용해 태그를 만들면 위 에러가 발생합니다.next 빌드 폴더를 지우고 다시 실행해봤는데도 시크릿 모드에서도 똑같은 에러가 내려오네요. // @/app/layout.jsx export default function RootLayout({ children }) { return ( {children} ); } // @/app/components/layout/ThemeProviderWrapper.jsx "use client"; const ThemeContext = createContext(null); export const useTheme = () => useContext(ThemeContext); export default function ThemeProviderWrapper({ children }) { const [theme, setTheme] = useState("light"); return ( {children} ); } // @/app/pages.jsx "use client"; // 이걸 삭제하면 위 에러가 발생합니다. import styled from "styled-components"; const Wrapper = styled.div` color: red; `; export default function Home() { return page; } 2. 문제 원인 추측그런데 어째서 이 방법으로 위 문제가 해결되는지를 잘 모르겠습니다.“createContext는 클라이언트 컴포넌트에서만 작동한다. createContext가 위치하는 ThemeProviderWrapper는 클라이언트 컴포넌트이다.”→ 그렇다면 여기에서 createContext는 정상적으로 동작했어야 하는 거 아닌가요?pages.jsx는 그 하위 컴포넌트인데 왜 이걸 클라이언트 컴포넌트로 만드는 게 해결책이 되는 건지 이해가 가지 않습니다. page.jsx가 서버 컴포넌트인 게 ThemeProviderWrapper의 createContext와 어떤 관련이 있어서 에러가 나는 걸까요?next.js는 클라이언트 컴포넌트 아래에 서버 컴포넌트 둘 수 없다고 알고 있습니다. 다만 상위 클라이언트 컴포넌트가 children(서버 컴포넌트)을 직접 조작하지 않는 경우에는 가능하다고 알고 있습니다.위 경우에는 상위 클라이언트 컴포넌트인 ThemeProviderWrapper가 하위 서버 컴포넌트인 pages.jsx에 직접적인 영향을 끼치기 때문에 위와 같은 에러가 발생하는 걸까요?맞게 추측한 건지는 모르겠지만, 만약 그렇다면 직접 ThemeContext를 만들어 사용하는 경우에는 그 하위 컴포넌트들은 전부 무조건 use client를 추가해서 클라이언트 컴포넌트로 만들어야만 하는 걸까요?ThemeContext를 사용하면서 하위 컴포넌트를 서버 컴포넌트로 유지할 수 있는 방법은 없을까요?+) 좀더 찾아보니 ThemeContext가 문제가 아니라 styled-components가 서버 컴포넌트를 지원하지 않기 때문에 발생한 문제라는 것을 알게 되었습니다. 그런데 여전히 이게 createContext와 어떤 관계가 있는 건지는 잘 모르겠습니다. styled-components에서 createContext를 사용하고 있는 걸까요?3. SSG에서 서버 컴포넌트가 어떻게 쓰이는지계속 서버 컴포넌트에만 집착하고 있다가 갑자기 궁금증이 들어 추가적으로 여쭤봅니다.SSG에서 서버 컴포넌트가 어떻게 쓰이는지가 궁금합니다.정적 빌드를 하기 때문에 초기 로딩 시에는 정적 파일을 그대로 불러와 보여주고 이후부터 javascript를 통해 화면을 그려주는 걸로 알고 있습니다. 초기 로딩 시에는 정적 파일을 그대로 받아와 보여주기에 서버에서 렌더링해서 화면을 보여주지 않고, 이후부터는 클라이언트에서 javascript를 통해 화면을 보여주는 것으로 이해했습니다.그런데도 SSG에서 굳이 서버 컴포넌트를 써야 하는 이유가 있을까요?문득 제가 괜히 집착하고 있었던 건가 싶은 생각이 들어 여쭤봅니다..질문이 좀 많은 거 같은데 꼬리에 꼬리를 물다보니 어떻게 정리해야 할지 잘 모르겠어서 글이 많이 길어진 거 같습니다.긴 글 읽어주셔서 감사합니다. (_ _)

nippori · Answer

gpt 한테 물어보셨나요? 물어봤는데 답변이 좋아서 붙여 넣겠습니다.1. “createContext 에러”의 원인 및 해결 방법원인:Next.js 13부터는 클라이언트 전용 훅(예: useState, useContext, createContext 등)을 사용하는 파일은 반드시 파일 상단에 "use client" 지시어가 있어야 합니다.• styled-components와 ThemeProvider:styled-components의 ThemeProvider는 내부적으로 React의 createContext를 사용하여 테마 정보를 전달합니다. 이 createContext 호출은 클라이언트 전용으로 설계되어 있기 때문에, 이를 포함하는 컴포넌트(또는 해당 컴포넌트를 임포트하는 상위 컴포넌트)가 서버 컴포넌트로 처리되면 에러가 발생합니다.• 구조상의 문제:귀하의 경우, ThemeProviderWrapper.jsx는 클라이언트 컴포넌트(“use client” 선언 있음)로 작성되어 있지만, 이를 포함하는 page.jsx가 서버 컴포넌트로 남아있으면, Next.js가 해당 트리의 일부를 서버에서 렌더링하려고 하면서 클라이언트 전용 기능(createContext 등)이 호출되어 에러가 발생합니다.해결 방법:• 해결책은 page.jsx도 클라이언트 컴포넌트로 전환하는 것입니다.즉, 상위 컴포넌트(여기서는 page.jsx)에 "use client"를 추가하여 전체 컴포넌트 트리가 클라이언트 환경에서 렌더링되도록 해야 합니다. 이렇게 하면, ThemeProviderWrapper 내에서 사용되는 createContext(및 styled-components 내부의 createContext 호출)도 클라이언트 환경에서 정상적으로 작동하게 됩니다.참고:• Next.js 공식 문서에서는 클라이언트 전용 훅을 사용하는 컴포넌트에 반드시 "use client" 지시어를 추가해야 한다고 설명합니다.• styled-components는 ThemeProvider 내부에서 createContext를 사용하기 때문에, 서버 컴포넌트에서 사용 시 문제가 발생할 수 있음을 주의해야 합니다.2. ThemeContext를 사용하면서 하위 컴포넌트를 서버 컴포넌트로 유지할 수 있는가?• 현재 Next.js의 제한 사항:클라이언트 전용 훅(예: createContext, useState 등)은 서버 컴포넌트 내에서 사용할 수 없습니다. 따라서, ThemeContext와 같이 클라이언트 전용 기능을 사용하는 경우, 해당 컨텍스트를 사용하는 모든 하위 컴포넌트도 클라이언트 컴포넌트여야 합니다.• 대안:만약 서버 컴포넌트에서 일부 정적 데이터를 렌더링하면서도 테마 관련 정보를 사용하고 싶다면, 서버 컴포넌트에서는 클라이언트 전용 기능을 사용하지 않고 단순히 props나 초기 데이터를 전달하는 방식으로 구현해야 합니다.즉, 테마 관련 상호작용이나 동적 업데이트가 필요 없다면 서버에서 정적으로 데이터를 준비한 후, 클라이언트 컴포넌트에서 해당 데이터를 받아 사용하는 구조로 분리하는 방법이 있습니다.요약:ThemeContext를 직접 생성하여 사용하는 경우, 이를 사용하는 컴포넌트는 모두 클라이언트 컴포넌트여야 합니다. 서버 컴포넌트에서는 클라이언트 전용 훅을 사용할 수 없으므로, 클라이언트와 서버를 명확히 구분하여 설계해야 합니다.3. SSG에서 서버 컴포넌트가 왜 필요한가?'use client'를 붙여도 html, css를 이용한 렌더링은 서버에서 됩니다. 그 리소스를 받아온 후에 클라이언트 측에서 js파일로 받아서 event lisner 를 붙이는 등의 작업을 하여 react 컴포넌트로 바꿔주죠. hydration에 관해 공부해보면 좋을것 같습니다. 질문에 대한 답은 노마드코더님 영상을 보는게 빠를것 같아서 링크 달아두겠습니다.https://www.youtube.com/watch?v=fwJ5Os49oU8&t=16s

nextjs SSG에서 "createContext 에러"의 원인을 모르겠습니다

1개의 답변

#theme 목록