renderPage

React로 NodeBird SNS 만들기

7-14. react-helmet SSR

작성

461

const page = context.renderPage((App) => (props) => <App {...props} />);

return { ...page, helmet: Helmet.renderStatic() };

추가후 로그인 하면 페이지가 넘어가질 않습니다.

이상태가 되어 버립니다.

javascript react

답변 15

제로초(조현영)

지식공유자

방법은 다 맞는데요. 어딘가에서 에러가 있거나 설정 오타가 있는 것 같습니다. 오타 찾는 게 매우 힘드니 프로젝트 다시 만드시면서 찾아보시는 게 좋습니다.

제로초(조현영)

지식공유자

아뇨 저거면 충분합니다. 빌드를 다시 해보시고 엘레먼트 탭에서 클래스가 제대로 들어갔는지 확인해보세요.

제로초(조현영)

지식공유자

웹팩 설정에서 css 파일 처리를 위한 관련 로더를 추가해주셔야 합니다. css-loader를 추가하시면 됩니다.

제로초(조현영)

지식공유자

이 부분은 next9 버전을 쓰신다면 다른 부분 코드와 충돌이 나기때문에 제가 정확하게 원인을 파악하기 좀 어렵습니다.

제로초(조현영)

지식공유자

위 메시지는 에러가 아니라 경고입니다. 무시하셔도 됩니다. 페이지 넘어가지 않는 것은 다른 문제를 찾아보셔야 합니다. 저 코드가 없다면 원래 페이지가 동작하셨던 건가요? 아니면 document.js가 없었을 때 동작하셨던 건가요?

제로초(조현영)

지식공유자

네네 그냥 지워주세요

제로초(조현영)

지식공유자

_document.js 말씀하시는 거죠? 이 부분은 버전 문제일 수 있습니다. next.js 버전이 올라가서 코드가 바뀌었습니다. 나중에 styled-components까지 같이 쓰시면 저는 코드가 이렇습니다.

import React from 'react';
import Helmet from 'react-helmet';
import Document, { Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';

class MyDocument extends Document {
  static async getInitialProps(context) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = context.renderPage;

    try {
      context.renderPage = () => originalRenderPage({
        enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
      });
      const initialProps = await Document.getInitialProps(context);
      return {
        ...initialProps,
        helmet: Helmet.renderStatic(),
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }

  render() {
    const { htmlAttributes, bodyAttributes, ...helmet } = this.props.helmet;
    const htmlAttrs = htmlAttributes.toComponent();
    const bodyAttrs = bodyAttributes.toComponent();

    return (
      <html {...htmlAttrs} lang="ko">
        <head>
          {this.props.styles}
          {Object.values(helmet).map((el) => el.toComponent())}
        </head>
        <body {...bodyAttrs}>
          <Main />
          {process.env.NODE_ENV === 'production'
          && <script src="https://polyfill.io/v3/polyfill.min.js?features=default%2Ces2015%2Ces2016%2Ces2017%2Ces2018%2Ces2019" />}
          <NextScript />
        </body>
      </html>
    );
  }
}

export default MyDocument;