TIL

<TIL 20.09.28> Next.js 간단정리

유댕2 2020. 9. 28. 14:29

React.js와 Next.js의 차이점

React의 ComponentDidMount 는 렌더링이 두 번

( render -> ComponentDidMount -> render )

Next에서는 getInitialProps로 데이터를 미리 갖고 오기 때문에 한 번에 렌더링이 가능

( getInitialProps -> render )

 

* NEXT.JS는 리액트에서의 SSR을 위한 프레임워크(도구)

 

SSR과 CSR의 차이점

SSR (Server Side Rendering)

  • SSR은 한 번에 렌더링이 되기 때문에 초기로딩 속도는 빠름
  • page 이동 시에는 CSR보다 느림 (계속적으로 새로고침하며 서버에 요청해야 하므로 서버에 부담이 큼)
  • page를 요청할 때마다 중복되는 파일을 내려받아야 하기 때문
  • (SEO)검색 엔진 최적화 : View를 서버에서 렌더링해 제공하기 때문에(View를 먼저 그리기 때문에) 상대적으로 SEO에 유리해져 사용자 유입이 많을 것이다

 

CSR (Client Side Rendering)

  • CSR은 초기로딩 속도는 느림
  • 첫 페이지 로딩 때 모든 파일을 내려받기 때문에 페이지를 이동할 때마다 해당 페이지에서 필요한 데이터만 불러서 사용하면 됨

getInitialProps

웹 페이지는 각 페이지마다 사전에 불러와야할 데이터들이 있다. Data Fectching이라고도 하는 로직은 CSR에서는 react 로직에 따라 componentDidMount나 useEffect로 컴포넌트가 마운트 되고 나서 하는 경우가 많다. 이 과정을 서버에서 미리 처리하도록 도와주는 것이 바로 getInitialProps이다.

목적에 따른 사용법

  • 공통된 Data Fetching이 필요하다면 _app.js(상단파일)에 getInitialProps를 사용한다.
  • 페이지마다 다른 Data가 필요하다면 페이지마다 getInitialProps를 사용한다.

사용시 주의점

  1. getInitialProps 내부 로직은 서버에서 실행된다. 따라서 Client에서만 가능한 로직(Window, document 등)은 피해야 한다.
  2. 한 페이지를 로드할 때 하나의 getInitialProps 로직만 실행된다. 예를 들어 _app.js에 getInitialProps를 달아서 사용한다면 그 하부 페이지의 getInitialProps는 실행되지 않는다. 다만, 다음과 같이 커스터마이징을 하면, 최종 결과를 pageProps에 담을 수 있다.

Data Fetching을 서버에서 했을때 장점

  1. 속도가 빨라진다.
  2. 코드 상의 처리가 깔끔해진다. 

-> 브라우저에서의 연산을 서버와 함께 하면서 미리 데이터를 받아오고 브라우저는 렌더링만 할 수 있기 때문

 

 dispatch를 SSR 방식으로 옮기기

  • Object.keys(context)를 콘솔로 찍어보면 store가 존재한다.
  • store는 리덕스 store를 의미하고 이 store 안에는 dispatch와 getState(리덕스 state들을 가져올 수 있는 함수)가 존재한다.
  • 이 함수는 각각 store.dispatch, store.getState로 사용이 가능하다.