-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
emotion SSR 적용 질문있습니다!
21.08.10 20:11 작성 조회수 627
0
안녕하세요 현영님!
styled-components 대신에 emotion 사용해서 실습하고 있는데, emotion 공식문서에서 10버전 이상부터는 next에서 SSR 적용이 된다고 나와있는데요. (현재 11버전 사용중입니다.)
그렇다면, 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: (
<>
{initialProps.styles}
{/* {sheet.getStyleElement()} */}
</>
)
};
} catch (err) {
console.error(err);
} finally {
// sheet.seal();
}
}
render() {
return (
<Html>
<Head />
<body>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default%2Ces2015%2Ces2016%2Ces2017%2Ces2018%2Ces2019" />
<Main />
<NextScript />
</body>
</Html>
);
}
}
styled-components 관련 부분만 제외하고 입력하면 될까요?
답변을 작성해보세요.
답변 1