className과 SSR

Question

_document.js를 만들고 styled-components를 설정후에도 className 오류가 여전히 브라우저에서 발생합니다. 설정이 잘못된 걸까요? 코드에 문제는 없어 보입니다. import React from ' react ' ; import Document, { Html, Head, Main, NextScript } from ' next/document ' ; import { ServerStyleSheet } from ' styled-components ' ; export default class MyDocument extends Document { static async getInitialProps ( ctx ) { const sheet = new ServerStyleSheet (); const originalRenderPage = ctx .renderPage; try { ctx . renderPage = () => originalRenderPage ({ enhanceApp : ( App ) => ( props ) => sheet . collectStyles (< App {... props } />), }); const initialProps = await Document . getInitialProps ( ctx ); return { ... initialProps , styles : ( <> { initialProps .styles } { sheet . getStyleElement () } ), }; } finally { sheet . seal (); } } render () { return ( < Html > < Head /> < body > < Main /> < NextScript /> ); } } 또한, 서버 사이드 렌더링시 console.log가 뜨지 않는것을 확인하였습니다. 데이터는 잘 들어가는거 같은데 콘솔이 뜨지 않을걸 보아 SSR이 되지 않는 건지 의심이 가네요. profile.js 페이지입니다. export const getServerSideProps = wrapper . getServerSideProps ( ( store ) => async ({ req }) => { console . log ( ' getServerSideProps start ' ); const cookie = req ?.headers.cookie; axios .defaults.headers.Cookie = '' ; if ( req && cookie ) { axios .defaults.headers.Cookie = cookie ; } store . dispatch ( loadMyInfoRequestAction ()); store . dispatch ( END ); console . log ( ' getServerSideProps end ' ); await store .sagaTask. toPromise (); } );

NOAH · Answer

이 에러입니다. 주말에 답변 감사합니다.. 서버쪽에는 따로 에러가 없는거보니 .. 프론트 문제겠네요.

zerocho · Answer

오류 메시지를 보여주세요. 그리고 서버사이드렌더링 콘솔은 서버쪽에서 뜹니다.