Next.js styled-component 설정하기 (SSR FOUC 이슈)

📌 Next.js ❤️ styled-component

Next.js 와 Styled Component 를 함께 사용할 때 적절한 설정을 하지 않으면

SSR 시에 FOUC (Flash of Unstyled Content) 현상이 발생하게 됩니다.

🤔 FOUC?

페이지의 스타일시트 정보가 로드 시점에 포함되지 않아

잠시 스타일이 적용되지 않은 페이지가 나타나는 현상입니다.

📌 FOUC 원인 파악하기

Next.js SSR (Pre Rendering)

Server-side Rendering 과 Static Generation 모두 Pre-rendering 방식이며

필요한 data fetching 과 HTML 렌더링이 client 에게 보내지기 전에 이미 수행됩니다.

이를 통해 client 는 non-interactive 한 페이지를 빠른 시간에 전달 받을 수 있고,

컴포넌트에 필요한 이벤트 리스너와 같은 interactive 속성들은 별도의 번들로 전달받아

client 단에서 hydration 이 이루어진 뒤 우리가 상호작용하는 웹앱이 됩니다.

css-in-js

이 때문에 ssr 에서 styled component 와 같은 css-in-js 를 사용할 때 문제가 발생합니다.

hydrate 과정에서 다운로드 받은 JS 를 통해 지정된 스타일 정보가 생기기 때문에

페이지 로드시 잠깐 스타일이 누락된 화면이 보여지게 됩니다.

이는 사용자에게 좋지 않은 UX 경험을 제공할 수 있는 요소로 볼 수 있습니다.

📌 Styled Component SSR 설정

다행히도 styled-component 는 SSR 를 지원하며 이 문제를 해결할 수 있습니다.

Next.js 버전에 따라 swc 혹은 babel 사용 여부가 다르기 때문에 대응 방법이 다릅니다.

1️⃣ Next.js v11 이하

안정적인 ssr 를 위해 babel-plugin-styled-components 플러그인 설정이 필요합니다.

해당 플러그인을 통해 각각의 styled-component 의 checksum 불일치를 방지합니다.

// .babelrc

{
  "plugins": ["babel-plugin-styled-components"]
}

이후 custom Document 를 정의한 뒤, getInitialProps 에서 각각의 페이지에 들어갈 <head> 태그에

SSR 에서 반영되어야 할 styled-component 정보를 주입합니다.

// pages/_document.js

import Document, { DocumentContext, DocumentInitialProps } from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
  static async getInitialProps(
    ctx: DocumentContext
  ): Promise<DocumentInitialProps> {
    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() { /** */ }
}

next.js/_document.tsx at canary · vercel/next.js

GitHub - vercel/next.js: The React Framework

The React Framework. Contribute to vercel/next.js development by creating an account on GitHub.

github.com

2️⃣ Next.js v12 이상

Next.js v12 이상부터는 swc 를 통해 JS 번들을 컴파일합니다.

이 경우 별도의 babel 설정 없이 자체적으로 styled-component 의 ssr 설정이 가능합니다.

// next.config.js

const nextConfig = {
  compiler: {
    styledComponents: true,
  },
}

module.exports = nextConfig

이후 Next.js v11 과 동일하게 _document.js 에서 custom Document 를 정의하고

getInitialProps 내에서 스타일 정보를 주입합니다.

// pages/_document.js

import Document, { DocumentContext } from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    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() { /** */ }
}

next.js/_document.tsx at canary · vercel/next.js

GitHub - vercel/next.js: The React Framework

The React Framework. Contribute to vercel/next.js development by creating an account on GitHub.

github.com

보다 자세한 내용은 styled-component 문서를 참고하면 됩니다.

styled-components: Advanced Usage

Theming, refs, Security, Existing CSS, Tagged Template Literals, Server-Side Rendering and Style Objects

styled-components.com

📌 참고자료

Server-side rendered styled-components with Nextjs

Advanced Features: Custom Document | Next.js

'👨‍💻 web.dev > fe' 카테고리의 다른 글

React Framer Motion 톺아보기 (0)	2023.03.27
프론트엔드 E2E 테스팅 (with Cypress) (2)	2023.03.19
AWS SDK 로 s3 파일 사이즈 조회하기 (0)	2022.11.26
React 이벤트 처리방식과 SyntheticEvent (0)	2022.10.17
File API 를 이용한 Input 컴포넌트 만들기 (2)	2022.08.13

sondev.log

Next.js styled-component 설정하기 (SSR FOUC 이슈)