css 서버사이드 랜더링 적용이 되지 않아 질문드립니다.

[리뉴얼] React로 NodeBird SNS 만들기

배포 전 Q&A

해결된 질문

21.09.01 00:16 작성

325

크롬에서 disable javasrcript 하고 나서 새로고침을 하여 ssr css 확인을 해보았더니

css가 적용이 되어 있지 않아서 질문드립니다.

원인을 좀 찾아 보려고 서버사이드 랜더링시 디버깅을 하여 각각 값이 잘 들어오나 _document.js 쪽 확인을 해보았는데 style쪽이 빈 배열로 나오는데 혹시 이게 원인일까요..?

문제 스크린샷

network 스크린샷

디버깅한 값 스크린샷

소스코드

_app.js (/prepare/front/pages/_app.js)

import 'antd/dist/antd.css'
import Prototype from 'prop-types'
import Head from 'next/head'

import wrapper from '../store/configureStore';

const App = ({ Component }) => {

    return (
        <>
            <Head>
                <meta charSet='utf-8'></meta>
                <title>NodeBird</title>
            </Head>
            {/* <div>공통메뉴</div> */}
            <Component />
        </>

    );
}

export default wrapper.withRedux(App);

App.Prototype = {
    Component: Prototype.elementType.isRequired,
}

_document.js (/prepare/front/pages/_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: (
                    <div>
                        {initialProps.styles}
                        {sheet.getStyleElement()}
                    </div>
                ),
            };
        } catch (error) {
            console.error(error);
        } finally {
            sheet.seal();
        }
    }

    render() {
        return (
            <Html>
                <Head />
                <body>
                    <script src="https://polyfill.io/v3/polyfill.min.js?features=default%2Ces2015%2Ces2016%2Ces2017%2Ces2018%2Ces2019"></script>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
}

바벨 설정 (/prepare/front/.babelrc)

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "fileName": true,
        "displayName": true,
        "pure": true,
        "ssr": true,
        "preprocess": false
      }
    ]
  ]
}

nodejs redux react express Next.js

답변 1