Archive

React.js Next.js

25 Feb 2021 | React

React.js Next.js

  1. Next.js
    • Next.js는 리액트에서 SSR을 쉽게 구현할 수 있게 도와주는 프레임워크이다
    • SSR(Server Side Rendering)은 서버에서 클라이언트의 브라우저에 보여줄 HTML을 미리 준비해서 응답해주는 방식으로 클라이언트의 브라우저가 자바스크립트 번들을 다운로드받아 해석하기 전에 미리 화면을 보여준다
    • CSR(Client Side Rendering)은 클라이언트의 브라우저가 자바스크립트 번들을 해석해 화면을 렌더링 하는 방식이다
    • 리액트로 만든 일반적인 SPA의 렌더링은 render() 가 실행되고 ComponentDidMount() 등의 lifeCycle 메소드를 통해 데이터를 가져와 바뀐 부분을 다시 렌더링하는 방식이다. Next.js를 사용하면 getInitialProps() 메소드로 데이터를 먼저 가져와서 한번에 렌더링을 할 수 있다. 초기 로딩속도를 향상시킬 수 있다는 뜻이다
    • 초기 콘텐츠가 비동기 처리가 많게 되면 검색엔진의 크롤러는 이를 이해할 수 없기 때문에 상위 노출은 어렵다. SSR은 초기에 pre-rendered된 화면을 보여주기 때문에 검색 엔진의 크롤러가 이해를 할 수 있다.
    • Next.js 특징으로는 다음을 뽑을 수 있다
    • 간단한 라우팅
    • 검색 엔진 최적화
    • 코드 스플라이팅
    • HMR(Hot Module Replacement)을 지원하는 웹팩 기반 환경
    • babel, Webpack 커스터마이징

  2. 코드 스플리팅

    • 일반적인 SPA 는 초기 로딩시에 모든 컴포넌트를 일괄적으로 다운로드하기에 규모가 커지면 로딩 속도는 느려지기 마련이다
    • Next.js는 pages 폴더를 지정하고 index 페이지만 우선적으로 불러와 렌더링하고 다른 페이지로 넘어가면 그 페이지만 불러오는 식이다
    • 이 과정에서 여러 컴포넌트 조각들이 끼어있더라도 해당 페이지 관련 컴포넌트들만 import하므로 모든 컴포넌트를 전부 다운받는 SPA보다 초기 로딩속도가 빠르다

  3. 기본 사용법

    • npm install –save next react react-dom
    • package.json의scripts를 변경
    • “dev”: “next”
    • “build”: “next build”
    • “start”: “next start”
    • pages 폴더 만들기 (next에서 쓰이는 폴더이므로 반드시 이름 pages로)
    • 이 폴더의 폴더 하나하나가 url이 된다
    • ex) pages/user/user.js -> /user/user
    • component 조각들은 따로 components 폴더 만들고 import해서 사용

  4. 라우팅

    • Next에서 제공하는 Link 컴포넌트를 이용
    import Link from 'next/link';
   
<Link href='/path'><a>이동</a></Link>
    • Next애서 제공하는 Router를 이용
    import Router from 'next/router';
   
<button onClick={() => Router.push('/path')}></button>

  5. 스타일링

    • Next에서 기본적으로 제공하는 styled-jsx를 이용
    • <style jsx> 태그 안에 중괄호+백틱 사이에 css코드를 작성
    <div>
	<style jsx>{`
    	div {
            border: 1px solid #eee;
        }
    `}</style>
</div>

  6. 에러처리

    • 에러 페이지를 커스터마이징 할 수 있다
    • pages 폴더 안에 _error.js 파일을 작성(지정된 이름 사용)
    {/* ex) pages/404/_error.js */}
   
import React from 'react';
import Link from 'next/link';
   
const errorPage = () => (
  <div>
    <h1>요청한 페이지가 존재하지 않습니다</h1>
    <Link href='/'>
      <a>돌아가기</a>
    </Link>
  </div>
);
   
export default errorPage;

  7. Lifecycle

    • getInitialProps(context) {} -> 클래스 방식
    • pageName.getInitialProps = context => {} -> 함수형 방식
    • CSR에서 렌더링이 된 후 componentDidMount 등으로 fetching을 하는 것과 달리 Next에서는 getInitialProps를 이용해 사전에 fetching 작업을 할 수 있다
    • Next ver 9.0 이상에서는 getInitialProps 대신 getStaticProps, getStaticPaths, getServerSideProps를 권장하고 있다
    • context 오브젝트는 pathname, query, asPath, req, res, err 등의 데이터를 담고 있다
    static async getInitialProps(context) {
    {/*data fetching*/}
}
   
pageName.getInitialProps = async context => {
    {/*data fetching*/}
}


참고 자료

reactjs.org - 공식홈페이지

Udemy - React The Complete Guide

SSR 개념 이해와 Next.js로 실습까지 해보는 SSR 환경 구축하기

Next.js 제대로 알고 쓰자

nextjs.org - 공식 홈페이지

Related Posts