개발자
nextjs styled-component ssr 에러
모든 분들이 격어보셨을 에러에 대해 해결이 되지 않아 질문 드려봅니다. 아래 참고를 통해 nextjs ssr에서 styled-component가 적용되게 시도했습니다 (현재 app router 방식을 사용하고 있습니다) 하지만 동일하게 했을 때 여전히 아래와 같은 오류가 떴습니다. babel, swc 둘 다 시도 했을 때 동일 했고 혹시 제가 놓지고 있는 부분이 있을까요? 4번까지 진행했습니다. nextjs styled-component typescript 오류 : Error: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component 참고 : https://dev.to/rashidshamloo/using-styled-components-with-nextjs-v13-typescript-2l6m#5
1//page.tsx
2 <html lang="en">
3 <body className={inter.className}>
4 <StyledComponentsRegistry>
5 {children}
6 </StyledComponentsRegistry>
7 </body>
8 </html>
9
10//StyledComponentsRegistry.tsx
11'use client'
12
13import React, { useState } from 'react'
14import { useServerInsertedHTML } from 'next/navigation'
15import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
16
17export default function StyledComponentsRegistry({
18 children,
19 }: {
20 children: React.ReactNode
21}) {
22 // Only create stylesheet once with lazy initial state
23 // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
24 const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
25
26 useServerInsertedHTML(() => {
27 const styles = styledComponentsStyleSheet.getStyleElement()
28 styledComponentsStyleSheet.instance.clearTag()
29 return <>{styles}</>
30 })
31
32 if (typeof window !== 'undefined') return <>{children}</>
33
34 return (
35 <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
36 {children}
37 </StyleSheetManager>
38 )
39}
답변 2
인기 답변
Next.js 공식 문서(https://nextjs.org/docs/app/building-your-application/styling/css-in-js)에 의하면, App Router를 use client 지시자 없이 사용하는 건 아직 불가능한 것 같습니다. > 경고: 런타임 자바스크립트가 필요한 CSS-in-JS 라이브러리는 현재 서버 컴포넌트에서 지원되지 않습니다. 서버 컴포넌트 및 스트리밍과 같은 최신 React 기능과 함께 CSS-in-JS를 사용하려면 라이브러리 작성자가 동시 렌더링을 포함한 최신 버전의 React를 지원해야 합니다. 저희는 React 서버 컴포넌트 및 스트리밍 아키텍처를 지원하는 CSS 및 JavaScript 에셋을 처리하기 위해 업스트림 API에 대해 React 팀과 협력하고 있습니다. Styled Component 공식 문서(https://styled-components.com/docs/advanced#app-directory)에서도 같은 내용을 언급하고 있습니다. > For routes defined in the app/ directory, in Next.js v13+, you'll need to put a styled-components registry in one of your layout files, as described in Next.js docs. Note that this depends on styled-components v6+. Also note that the 'use client' directive is used - so while your page will be server-side rendered, styled-components will still appear in your client bundle.
성지수
작성자
web developer • 2024년 03월 07일
styled-component만 ssr에서 사용 불가능하다는 말씀이시죠? 1. page router 로 변경 2. tailwind 로 변경 둘 중 하나로 보면 후자가 낮겠네요 ㅎㅎ
해당 코드에서 발생하는 오류가 맞나요 ?
정 훈
FE • 2024년 03월 06일
문득 드는 생각입니다만, 위 처럼 설정을 해줬다고 하더라도 styled-components 사용하는 컴포넌트 내에서는 'use client' 작성 해주셔야 합니다.
성지수
작성자
web developer • 2024년 03월 07일
그렇게 된다고 하면 styled-component를 사용하는 모든 곳(스타일링) 에서는 전부 csr 로 동작하게 해야된다는 이야기이신가요??? ㅠ 제가 이해 했던 부분은 저렇게 세팅해주면 styled-component(스타일링)을 ssr에서도 가능해서 적용하려고 했습니다.
정 훈
FE • 2024년 03월 07일
네, 저도 그렇게 이해하고 위 처럼 적용했었는데 막상 사용하는 컴포넌트가 클라이언트 컴포넌트가 아니면 안되더라구요
성지수
작성자
web developer • 2024년 03월 07일
네 ㅠㅠ 방법을 찾으신 분 있으면 좋겠네요 혹시 다른 css 라이브러리도 동일한가요?
정 훈
FE • 2024년 03월 07일
tailwind, vanilla-extract, panda css 등을 사용하시면 해당 문제는 없습니다.
정 훈
FE • 2024년 03월 07일
추가적으로 검색해보니 작년 3월에 open된 이슈를 찾을 수 있었는데요, 아래 이슈에서도 "styled components를 사용하는 모든 곳에서 use client를 써여한다면 Next를 쓰는 이유가 없지 않냐?" 라는 질문을 하고있는데, 아직 정식적으로 해결방안은 없는 것 같습니다. 댓글에서도 앞서 말씀드린 tailwind나 vanilla를 사용하라고 하네요. (이슈 링크 : https://github.com/styled-components/styled-components/issues/4025) 제가 생각해본 방법으로는 styled component로 작성된 컴포넌트를 use client를 사용하는 별도의 파일로 분류하고 서버 컴포넌트에서 이들을 import해서 사용하는 방법이 최선이지 않을까 싶습니다. 또, use client를 사용하더라도 csr에서만 작동하는것이 아닌 ssr, csr에서 모두 작동하기 때문에 ssr에서 스타일링이 적용되는건 맞을겁니다.
성지수
작성자
web developer • 2024년 03월 07일
네 ㅎㅎ 불편해도 쓰거나 바꾸거나 해야겠네요 감사합니다
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 03월 05일
Next.js 12는 서버 컴포넌트를 도입했으며 기존의 SSR 또는 ISR에 사용되던 getServerSideProps나 getInitialProps와 같은 메서드를 명시적으로 '서버 컴포넌트' 또는 '클라이언트 컴포넌트'로 구분하여 처리하게 되었습니다. 서버 컴포넌트에서는 특정 Node.js 모듈(특히 FS 및 HTTP 모듈)만 사용할 수 있으며, 클라이언트 사이드 전용 코드가 실행되지 않도록 제한합니다. createContext 함수를 사용하면 클라이언트 사이드에 종속된다고 판단될 수 있음으로 "createContext only works in Client Components." 오류가 발생하는 것입니다. typescript 파일 상단에 `//@use-client-component` 이라고 추가해 보세요. 이 주석은 해당 컴포넌트를 클라이언트 전용으로 설정하며, 그 결과로 React.createContext 함수 호출을 허용하게 됩니다. 오류가 여전히 발생한다면 문제의 원인을 찾기 위해 프로젝트의 전체 구조와 설정을 확인해 보아야 할 수도 있습니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!