티스토리 뷰

React/Next.js

[Next.js]getInitalProps를 사용하여 css 깨짐을 방지해보자!

Xion 2021. 4. 22. 15:31

 

리액트와 next를 사용하여 SSR 적용 중 className 오류가 났다.

원인은 nextjs 사용시 css 마찬가지로 SSR 렌더링도 먹여줘야 하는것이었다.

 

"styled components는 따로 SSR 세팅(_document.js)을 안 하면 서버사이드 렌더링이 안 되므로 동적으로 스타일 태그를 생성하기 때문입니다.

기본적으로 next의 pages는 서버사이드 렌더링이 된다.

getServerSideProps는 추가적으로 데이터까지 가져오는 것이고, ssr을 제외한 상황에서는 모두 styled-components가 동작한다"

 

 

 

 

그럼 SSR을 적용해 보자!

주의할 점은 getInitialProps는 주로 사용 안 하고 Document에서만 사용한다는 점 꼭 이억하자.

 

_document.js 기본 형태

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 />
        </body>
      </Html>
    );
  }
}

 

 

추가적으로

CSS가 SSR이 적용되는지 확인하는 방법은 

 

shortcuts에서 javascript를 비활성화 시켜준 후 사이트를 새로고침 해보면 알 수 있다 !

저작자표시

'React > Next.js' 카테고리의 다른 글

[Error]Nextjs hot reload 오류 핫 리로드 오류  (0) 2022.01.05
[Nextjs] getInitialProps should resolve to an object오류  (0) 2021.09.08