아래 두 사진을 보았을 때, 약간의 차이점을 찾을 수 있는데, 페이지를 이동하면서 다시 확인을 하면 그제서야 padding 값이 적용되는 것을 확인할 수 있었습니다.
이는 서버사이드 렌더링을 하면서 CSS 코드는 서버사이드 렌더링이 적용되지 않아 스타일드 컴포넌트 코드가 저장되지 않았던 문제입니다.
넥스트 또한 내부적으로 웹팩과 바벨이 동작하는데, 바벨 설정을 임의로 바꿔줄 겁니다.
1. .babelrc 파일 생성
- front 의 루트 폴더에서 바벨을 커스터마이징하기 위한 설정내용을 적을 .babelrc 파일을 생성합니다.
2. babel-plugin-styled-components 설치
npm i babel-plugin-styled-components- babel 을 통해 styled-components 의 설정을 변경해주기 위해 babel-plugin-styled-components 라이브러리를 설치합니다.
3. babel 설정
front/.babelrc
{
"presets": ["next/babel"],
"plugins": [
[
"babel-plugin-styled-components",
{
"ssr": true,
"displayName": true
}
]
]
}- Presets:
- "presets": ["next/babel"]: Next.js에서 사용하는 Babel 프리셋을 설정합니다. 이는 Next.js 프로젝트에서 필요한 Babel 플러그인과 구성을 자동으로 추가합니다.
- Plugins:
- "plugins": [...]: Babel 플러그인을 추가합니다.
- babel-plugin-styled-components: styled-components를 서버 측 렌더링(SSR)에서 사용할 수 있도록 하는 플러그인입니다.
- "ssr": true: 서버 측 렌더링에서 styled-components를 사용하도록 설정합니다.
- "displayName": true: 개발 환경에서 styled-components의 displayName을 활성화합니다. 이는 개발자 도구에서 스타일 구성 요소의 이름을 보다 쉽게 식별할 수 있도록 합니다.
Next.js에서 서버 측 렌더링과 styled-components를 함께 사용할 때 필요한 구성입니다. 이렇게 설정하면 개발 환경에서 styled-components의 디버깅이 용이하고, 서버 측에서도 스타일이 적용되도록 할 수 있습니다.
4. _document.js 파일 생성
front/pages/_document.js
- _document.js 파일은 Next.js 애플리케이션에서 사용되는 특별한 파일로, 서버 측 렌더링(SSR) 시에 전체 페이지의 레이아웃을 제어하는 데 사용됩니다. 이 파일은 주로 문서(Document)의 골격을 정의하고, 공통된 HTML 구조나 전역 스타일, 스크립트 등을 추가하는 데 활용됩니다.
- pages 디렉토리 안에 위치하며, Next.js 애플리케이션이 서버 측에서 페이지를 생성할 때 한 번만 불러와지고 캐시되므로 성능적인 이점이 있습니다.
용도 네 가지
- HTML 구조 정의: _document.js 파일에서 <Html>, <Head>, <body>, <Main>, <NextScript> 등의 컴포넌트를 사용하여 전체 페이지의 HTML 구조를 정의할 수 있습니다.
- 서버 사이드 렌더링(SSR)을 위한 스타일 수집: _document.js 파일에서 서버 사이드 렌더링 시에 필요한 스타일을 수집하고 초기 렌더링에 포함시키는 작업을 할 수 있습니다.
- 전역 스타일, 폰트 또는 스크립트 추가: 전역 스타일, 특정 폰트, 외부 스크립트 등을 추가하여 전체 애플리케이션에 적용할 수 있습니다.
- 폴리필 추가: 브라우저가 지원하지 않는 JavaScript 기능을 폴리필로 제공하여 브라우저 간의 호환성을 유지할 수 있습니다.
5. _document.js 파일 작성
Next.js에서 사용되는 Document 컴포넌트를 확장하고, 서버 사이드 렌더링(SSR)을 위한 스타일 시트를 수집하는 방법을 구현한 것입니다. 또한, 폴리필을 추가하여 브라우저에서 필요한 JavaScript 기능을 지원합니다.
front/pages/_document.js
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 originalRednderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRednderPage({
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>
<Main />
<sript src='https://polyfill.io/v3/polyfill.min.js?features=default%2Ces2015%2Ces2016%2Ces2017%2Ces2018%2Ces2019'></sript>
<NextScript />
</body>
</Html>
);
}
}- static async getInitialProps(ctx) { ... }: 이 부분은 서버 측에서 초기 페이지 렌더링 시 호출되는 메서드로, 스타일 시트를 수집하여 페이지의 초기 스타일을 가져옵니다. ServerStyleSheet 클래스를 사용하여 스타일을 수집하고, ctx.renderPage를 이용하여 페이지를 렌더링하고 스타일을 수집하는데 필요한 기능을 추가합니다.
- initialProps.styles: 스타일을 수집한 후, getInitialProps 메서드에서 반환된 initialProps에 스타일을 추가합니다. 이렇게 하면 서버 측 렌더링 시에 초기 스타일이 포함된 페이지가 클라이언트로 전달됩니다.
- : 이 부분은 페이지에서 사용하는 JavaScript의 특정 기능을 폴리필로 제공합니다. 폴리필은 브라우저에서 지원하지 않는 기능을 채워주는 역할을 합니다. 여기서는 ES2015 이상의 기능들을 폴리필로 제공하고 있습니다.
이러한 설정은 주로 서버 측 렌더링과 스타일 시트 수집을 위해 일반적으로 통용되는 코드입니다. 필요에 따라 추가적인 헤드 엘리먼트나 폴리필 설정을 변경하거나 추가할 수 있죠.
'Next.js' 카테고리의 다른 글
| [NNN]_getStaticPaths (0) | 2024.02.26 |
|---|---|
| [NNN]_서버사이드렌더링 준비 (0) | 2024.02.26 |
| [NNN]_트러블슈팅3_SSR시 쿠키 공유하기 (0) | 2024.02.24 |
| CSR 과 SSR (0) | 2024.02.24 |
| [NNN]_트러블슈팅2_Infinite Scroll 멈추기 (0) | 2024.02.22 |
