728x90
반응형

Next.js를 사용할 때 생겼던 Hydration 이슈이다. Hydration이란 Next.js의 SSR 특성 때문에 생기는 오류이다.

Next.js의 SSR 특성은 정적 HTML 파일을 먼저 서버에서 가지고 와서 브라우저에서 js파일로 다시 랜더링해주는 특성이다. 이 특성으로 인하여 사용자는 더 빠르게 화면을 볼 수 있다.

Hydration error는 SSR에서 생기는 부작용인데 SSR또는 SSG에 의하여 pre-render되는 React tree와 브라우저에서 render되는 React tree가 달라서 발생하는 문제이다.

SSR에서 render되는 것을 Hydration이라고 하기 때문에 Hydration Error라고 한다.

 

해결방안 1

보통 이런 이슈는 특정 라이브러리나 application code에서 pre-render되는 것과 browser에서 render되는것과의 차이에 의해서 생긴다.

예를 들어 ‘window’라는 component가 rendering되는 것을 보자.

function MyComponent() {
  // This condition depends on `window`. During the first render of the browser the `color` variable will be different
  const color = typeof window !== 'undefined' ? 'red' : 'blue'
  // As color is passed as a prop there is a mismatch between what was rendered server-side vs what was rendered in the first render
  return <h1 className={`title ${color}`}>Hello World!</h1>
}

이 코드는 React의 Hook중에서 useEffect를 사용하여 아래와 같이 수정할 수 있다.

// In order to prevent the first render from being different you can use `useEffect` which is only executed in the browser and is executed during hydration
import { useEffect, useState } from 'react'
function MyComponent() {
  // The default value is 'blue', it will be used during pre-rendering and the first render in the browser (hydration)
  const [color, setColor] = useState('blue')
  // During hydration `useEffect` is called. `window` is available in `useEffect`. In this case because we know we're in the browser checking for window is not needed. If you need to read something from window that is fine.
  // By calling `setColor` in `useEffect` a render is triggered after hydrating, this causes the "browser specific" value to be available. In this case 'red'.
  useEffect(() => setColor('red'), [])
  // As color is a state passed as a prop there is no mismatch between what was rendered server-side vs what was rendered in the first render. After useEffect runs the color is set to 'red'
  return <h1 className={`title ${color}`}>Hello World!</h1>
}

 

또한 css-in-js 라이브러리를 사용할 경우에의 문제일 수도 있다.

css in js 라이브러리의 종류에는 Styled-Components나 Emotion 같은 것이 있는데, css in js l라이브러리가 pre-render되지 않는다면 hydration mismatch로 이어질 수 있다.

 

나의 경우

나의 경우 Cookie를 사용하는 Website를 만들고 있었는데 처음에 User의 정보가 Cookie에 있으면 로그인을 유저의 이름으로 바꾸어줄려고 했다.

이 코드를 컴포넌트 내에서 사용할 때 useEffect로 Cookies.get 함수를 넣어서 바꾸어주어 해결하였다.

const [logined, setLogined] = useState(false);
  useEffect(() => {
    if (
      Cookies.get("userInfo") !== "null" ||
      Cookies.get("userInfo" !== "undefined")
    ) {
      setLogined(true);
    } else {
      setLogined(false);
    }
  });

 

해결 방안 2

pages/_document가 없거나 Babel plugin이 없다면 추가하여서 사용하도록 하자.

// .babelrc를 만들어서 아래 코드를 추가해주자
{
    "presets": [
        "next/babel"
    ],
    "plugins": [
        "babel-plugin-styled-components"
    ]
}

 

그 외의 이슈는 아래 공식문서를 참고하면 될 것 같다.

https://nextjs.org/docs/messages/react-hydration-error

 

react-hydration-error | Next.js

React Hydration Error While rendering your application, there was a difference between the React tree that was pre-rendered (SSR/SSG) and the React tree that rendered during the first render in the Browser. The first render is called Hydration which is a f

nextjs.org

 

728x90
반응형
728x90
반응형

제목 그대로 새로고침하면 스타일이 적용안되는 문제가 생겼다.

Next.js가 서버 사이드 렌더링이라 나는 material ui를 사용하고 있었는데 스타일이 정상적으로 먹히지 않았다.

그렇기 때문에 몇가지 작업을 해줘야 하는데 일반적인 Server Rendering인 경우에는 Material Server Rendering을 참고하면 되고, Next.js를 사용하면 Material with Next.js를 참고하면 된다.
(https://github.com/mui/material-ui/tree/master/examples/nextjs)

 

내가 해결한 해결방법 코드

_app.js

import { useEffect } from "react";
import "../styles/globals.css";
import { DarkModeProvider } from "../utils/DarkModeProvider";

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    const jssStyles = document.querySelector("#jss-server-side");
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }, []);
  return (
    <DarkModeProvider>
      <Component {...pageProps} />
    </DarkModeProvider>
  );
}

export default MyApp;

_document.js

import { ServerStyleSheets } from "@material-ui/core/styles";
import Document, { Head, Html, Main, NextScript } from "next/document";
import React from "react";

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

MyDocument.getInitialProps = async (ctx) => {
  const sheets = new ServerStyleSheets();
  const originalRenderPage = ctx.renderPage;
  ctx.renderPage = () => {
    return originalRenderPage({
      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
    });
  };
  const initialProps = await Document.getInitialProps(ctx);
  return {
    ...initialProps,
    styles: [
      ...React.Children.toArray(initialProps.styles),
      sheets.getStyleElement(),
    ],
  };
};
728x90
반응형

'프론트엔드 > Next.js' 카테고리의 다른 글

Hydration Error  (0) 2022.08.24
Next.js로 프로젝트 시작  (0) 2022.08.04
Next.js 설치와 폴더 구조  (0) 2022.08.04
Next.js 를 사용하는 이유  (0) 2022.08.04
728x90
반응형

제가 하고 있는 프로젝트를 기록합니다..

폴더 구조는 먼저 components, pages, public, styles, utils를 사용하였습니다. (추후에 더 추가할 예정입니다)

사용한 툴 : Material UI , next.js , styled-components

src

  • components
    • Layout.js (전체적인 레이아웃)
  • pages
    • _app.js
    • _document.js
    • index.js : 메인화면 
  • utils
    • data.js : 전체적인 data (백엔드와 연동할 때 여기로 데이터 받아오기)
    • DarkModeProvider.js : 다크모드 설정
    • styles.js : 여기서 스타일링 함
  • styles

_app.js에서는 refresh하면 스타일이 아예 적용안되는 문제(서버 사이드 렌더링에서의 문제)를 해결하였습니다. (이 내용은 따로 포스팅 하였습니다) 그리고 다크 모드를 적용하고 싶어서 utils 폴더에 DarkModeProvider를 만들어주었습니다.

DarkModeProvider로 전체를 감싸주었습니다.

import { useEffect } from "react";
import "../styles/globals.css";
import { DarkModeProvider } from "../utils/DarkModeProvider";

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    const jssStyles = document.querySelector("#jss-server-side");
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }, []);
  return (
    <DarkModeProvider>
      <Component {...pageProps} />
    </DarkModeProvider>
  );
}

export default MyApp;

 

_document.js에서는 link로 글꼴을 받아왔고 여기서도 물론 새로고침하면 스타일이 자꾸 돌아가는 문제를 해결하였습니다.

import { ServerStyleSheets } from "@material-ui/core/styles";
import Document, { Head, Html, Main, NextScript } from "next/document";
import React from "react";

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

MyDocument.getInitialProps = async (ctx) => {
  const sheets = new ServerStyleSheets();
  const originalRenderPage = ctx.renderPage;
  ctx.renderPage = () => {
    return originalRenderPage({
      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
    });
  };
  const initialProps = await Document.getInitialProps(ctx);
  return {
    ...initialProps,
    styles: [
      ...React.Children.toArray(initialProps.styles),
      sheets.getStyleElement(),
    ],
  };
};

 

728x90
반응형
728x90
반응형

Next.js는 React를 CRA(Create React App)으로 설치해보았으면 다음 명령어 그대로 사용하면 된다. 

npx create-next-app

 

 

다음과 같이 설치하여 npm run dev 또는 yarn dev를 통해 실행하면 된다.

폴더 구조

폴더 구조는 _app.js 와 index.js가 만들어져 있을 것이고, api폴더는 api를 사용할 때, public은 보통 image를 넣어 사용한다. 

React를 설치하였을 때와 다른 _app.js와 _document.js 같은 것들에 대해서 알아보겠다.

 

먼저 _app은 서버로 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트로, 페이지에 적용할 공통 레이아웃의 역할을 한다.

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

여기서 pageProps는 초기 속성값이 되는데, 초기 속성값은 getInitialProps, getStaticProps, getServerSideProps 중 하나를 통해 패칭한 값이다. 

getInitialProps를 사용해 모든 페이지에서 사용할 공통 속성 값을 지정하는데 이럴 경우 자동 정적 최적화(Automatic Static Optimization)이 비활성화되어 모든 페이지가 서버 사이드 렌더링을 통해 제공된다. 

_app에서 getInitialProps를 사용하고자 한다면 App 객체를 불러온 후 getInitialProps를 통해 데이터를 불러와야 한다.

app.getInitialProps = async(appContext) => {
	const appProps = await App.getInitialProps(appContext);

	return {...appProps}
}

 

그 다음은 document 페이지이다.

create-next-app으로 설치하면 document는 없을 것이다. 하지만 보통 <head>태그나 <body>태그 안에 들어갈 내용을 커스텀할 때 활용하기 위하여 만들어준다. 

_document.js 로 만들어준다. 이건 _app 다음에 실행된다.폰트 import나 charset, 웹 접근성 관련 태그를 여기서 설정한다. 

_document를 작성할 때는 Document 클래스를 상속받는 클래스 컴포넌트로 작성해야만 하며, 렌더 함수는 꼭 <Html>, <Head>, <Main>, <NextScript> 요소를 리턴해 주어야 한다. 

_document 에서 사용하는 <Head> 태그는 next/head가 아닌 next/document 모듈에서 불러와야 한다.

_document의 <Head>태그에는 모든 문서에 공통적으로 적용될 내용(charset, 메타태그 등)이 들어가야 한다.

_document는 언제나 서버에서 실행되므로 브라우저 api 또는 이벤트 핸들러가 포함된 코드는 실행되지 않는다.

<Main /> 부분을 제외한 부분은 브라우저에서 실행되지 않는다.

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

즉, Next.js 의 실행되는 순서는 다음과 같다.

  1. Next Server가 GET 요청을 받는다.
  2. 요청에 맞는 Page를 찾는다.
  3. _app.js의 getInitialProps가 있다면 실행한다.
  4. Page Component의 getInitialProps가 있다면 실행한다. pageProps들을 받아온다.
  5. _document.js의 getInitialProps가 있다면 실행한다. pageProps들을 받아온다.
  6. 모든 props들을 구성하고, _app.js > page Component 순서로 rendering.
  7. 모든 Content를 구성하고 _document.js를 실행하여 html 형태로 출력한다.

Server Side

최초에 Next 서버로 요청이 들어왔을 때, Next 서버에서는 요청이 들어온 페이지에 들어갈 데이터를 Fetch하고 Html을 구성하여 Client로 보내준다.

_app.js 와 _document.js

최초로 실행된다. 없어도 된다 사실.

server only file이다. 즉, Next Server logic에 사용되는 파일이라는 뜻으로 client에서 사용되는 로직(eventListener 등의 window / DOM 로직)을 사용하면 안된다. 서버사이드 렌더링이기 때문! (앞 글에서 언급하였다)

window is not defined //이런 에러일 때 확인해보자.

최초 실행은 _app.js

_app.js는 client에서 띄우길 바라는 전체 컴포넌트의 레이아웃으로 이해하면 쉽다.

공통 레이아웃이므로 최초에 실행되어 내부에 들어갈 컴포넌트들을 실행한다.

내부에 Content들이 있다면 전부 실행하고 Html의 Body로 구성한다.

props로 받은 Component는 요청한 페이지이다. GET / 요청을 보냈다면, Component에서는 /pages/index.js 파일이 props로 내려오게 된다.

pageProps는 페이지 getInitialProps를 통해 내려 받은 props 들을 말한다.

그 다음 _document.js가 실행된다. _document.js는 static html를 구성하기 위한 _app.js에서 구성한 Html body가 어떤 형태로 들어갈지 구성하는 곳이다.

Content들을 브라우저가 html로 이해하도록 구조화 시켜주는 곳이라고 이해하면 쉽다.

_document.js에 어플리케이션 로직을 넣지말자!!

브라우저는 Main을 제외한 다른 component들을 initialize하지 않는다. 공통된 어플리케이션 로직이 필요하다면 _app.js를 활용

getInitialProps

웹 페이지는 각 페이지마다 사전에 불러와야할 데이터들이 있다.

Data Fetching이라고도 하는 로직은 CSR에서는 componentDidMount나 useEffect로 컴포넌트가 마운트 되고 나서 하는 경우가 많다.

이 과정을 서버에서 미리 처리하도록 도와주는 것이 getInitialProps이다.

데이터 패칭을 서버에서 하게 되면, 속도가 빨라진다.

Initial한 데이터가 들어오는 과정을 전제로 코드를 작성할 수 있다.

전체 페이지에 동일한 Data Fetching을 할 것인지를 정해야 한다.

공통된 Data Fetching이 필요하다면 → _app.js에 getInitialProps를 붙이면 된다.

페이지마다 다른 Data가 필요하다면 페이지마다 getInitialProps를 붙이면 된다.

import axios from 'axios';

const Page = ({ stars }) => {
  
  return <div>Next stars: {stars}</div>;
};

Page.getInitialProps = async ctx => {
  const { data } = await axios.get('...url');

  return { stars: data };
}

export default Page;

사용 시 주의할 점

  • getInitialProps 내부 로직은 서버에서 실행된다→ 따라서 Client에서만 가능한 로직은 피해야 한다.
  • 한 페이지를 로드할 때, 하나의 getInitialProps 로직만 실행된다. 예를 들어, _app.js에 getInitialProps를 달아서 사용한다면 그 하부 페이지의 getInitialProps는 실행되지 않는다. 다만 최종 결과를 pageProps에 담아서 활용하면 된다.
export default class MyApp extends App {

	static async getInitialProps({ Component, ctx }) {
		let pageProps = {};
    
    // 실행하고자 하는 component에 getInitialprops가 있으면 실행하여 props를 받아올 수 있다.
		if (Component.getInitialProps) {
			pageProps = await Component.getInitialProps(ctx);
		}

		return {
			pageProps
		};
	}

	render() {
		const { Component, pageProps, router } = this.props;
    
		return (
			<div>
				<Component {...pageProps} />
			</div>

		);
	}
};

getInitialProps는 기본적으로 받는 props가 있다. 이를 content(ctx)라고 한다.

ctx Object의 기본 구성은 다음과 같다.

  • pathname : 현재 pathname (/user?type=normal page 접속 시에는 /user)
  • query : 현재 query를 object 형태로 출력
  • asPath : 전체 path
  • req : HTTP request object
  • res : HTTP response object
  • err : Error object if any error is encountered during the rendering
728x90
반응형
728x90
반응형

웹 응용 프로그램의 구성 요소

  • User Interface - 사용자가 응용프로그램을 사용하고 상호 작용하는 방식을 설명.
  • Routing - 사용자가 응용프로그램의 다른 부분을 navigate하는 방법.
  • Data Fetching - 데이터 저장 위치 및 데이터 입수 방법.
  • Rendering - 정적 또는 동적 콘텐츠를 렌더링할 순간과 위치.
  • Integrations - 사용하는 타사 서비스(CMS, auth, payments 등) 및 이러한 서비스에 연결하는 방법.
  • Infrastructure - 응용 프로그램 코드(Serverless, CDN, Edge 등)를 배포, 저장 및 실행할 수 있는 위치.
  • Performance - 최종 사용자를 위해 애플리케이션을 최적화하는 방법.
  • Scalability -  team, data 및 트래픽 증가에 따라 애플리케이션이 어떻게 적응하는지.
  • Developer Experience -  애플리케이션 구축 및 유지 관리 경험

Next.js는 React Framework로 빠르게 web application을 만들 수 있다.

 

Next.js를 사용하는 이유는 SSR(서버 사이드 렌더링)이기 때문이다.

 서버 사이드 렌더링이란 서버에서 페이지를 그려서 클라이언트로 보낸 후 화면에 표시하는 기법이란 뜻이다. 즉, 클라이언트가 그리는 것보다 빠르다는 점이 중요하다.

 또한 검색 엔진 최적화와 빠른 페이지 렌더링이 된다.

 검색 엔진 최적화(SEO)란 구글, 네이버와 같은 검색 사이트에서 검색했을 때 결과가 사용자에게 많이 노출될 수 있도록 최적화 하는 기법이다. (물론 구글 크롤러 봇은 자바스크립트를 실행할 수 있어서 CSR의 크롤링도 가능하지만 완벽하지는 않다)

 그리고, SNS에서 링크를 공유했을 때 해당 웹 사이트의 정보를 이미지와 설명으로 표시해주는 OG Tag를 페이지 별로 적용하기 위해서는 서버 사이드 렌더링이 효율적이다.

 사용자 입장에서는 화면에 유의미한 정보가 표시되는 시간이 빨라지는 것이다.

 

서버 사이드 렌더링의 단점이라고 할 것은 Node.js 웹 애플리케이션 실행 방법을 알아야하고 서버쪽 환경 구성과 함께 클라이언트, 서버 빌드에 대한 이해가 필요하고 Node.js 환경에서 실행되기 때문에 브라우저 관련 API를 다룰 때 주의해야 한다. (이 점은 폴더 구조를 설명하면서 설명하겠다. 이 점 때문에 window나 document와 같은 브라우저 객체에 접근할 수 없다.)

 

이런 단점들을 제쳐두고 장점이 좋기 때문에 Next.js를 사용하는 것 같다. 

728x90
반응형

+ Recent posts