Next.js

⛵ Next.js란?

Next.js는 React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 간단한 프레임워크이다.
(React로 만드는 서버사이드 렌더링 프레임워크, 서버사이드렌더링(SSR)과 code splitting 등을 지원하는 react.js 전용 프레임워크)

👉 CSR의 문제점

• 모든 js 파일을 로드한 후, 사용자가 웹을 볼 수 있다(긴 초기로딩 속도)
• 자바스크립트가 로드 되지 않은 경우 아무런 정보를 보이지 않기 때문에 검색엔진 스캔이 어렵다(SEO문제)

👉 SSR의 문제점

• 페이지 이동할 때마다 서버에서 받아온다(트래픽 비용, 페이지 이동 느림)
• page를 요청할 때마다 중복되는 파일을 내려받아야 하기 때문에 화면깜빡임이 있다(사용감 저하)

CSR의 장점인 SPA와 SSR의 장점인 SEO를 동시에 살릴 수 있도록 고안한 방식. 즉, static pre-rendering이라고 부르는 서버 렌더링(server rendering) 이다.

static pre-rendering 의 개념을 이해하기 위해 먼저 React의 웹페이지 구성 원리부터 이해해보자.

💡 React의 웹페이지 구성 원리
React는 오직 js파일을 이용하여 웹 화면을 구성하는 원리이다. 따라서 html코드는 내용이 없다.

// React의 html 파일 내 아래와 같은 한 줄로만 구성되어 있다
<div id="root></div>

따라서 html document와 js파일들을 통으로 클라이언트에 보낸 뒤, 클라이언트 단에서 js코드들을 통해 웹 화면을 렌더링하며 페이지를 그리는 것이다. (웹페이지 렌더링 이후, 페이지 내에서 동작하는 이벤트가 자바스크립트로 발생된다)
즉, html파일에는 빈 뼈대만 있을 뿐, js코드에서 모든 화면을 렌더링 한 뒤에 HTML DOM 요소 중 root라는 id를 가진 요소를 찾아서 주입하는 과정이다.
(이때문에 초기 로딩속도가 느리다)

💡 Next.js의 웹페이지 구성 원리
Next.js는 클라이언트에게 웹페이지를 보내기 전에 Server Side 단에서 미리 웹페이지를 Pre-rendering 한다.
그리고 Pre-rendering으로 인해 생성된 HTML document를 클라이언트에게 전송한다.
(초기 로딩속도가 느린 단점을 보완하기 위해, seo문제를 해결하기 위해)
그러나 이렇게 pre-rendering으로 전송된 html파일은 단순한 정적(static) 웹 화면인 html일 뿐이고 자바스크립트 요소가 전혀 없는 상태이다.
즉, 웹 화면을 보여주고 있지만, 특정 js모듈이나 이벤트 리스너들이 dom요소에 하나도 적용되어 있지 않은 상태이다. (= static pre-rendering)

Next.js Server에서는 Pre-Rendering된 웹 페이지를 클라이언트에게 보내고 나서, 바로 리액트가 번들링 된 자바스크립트 코드들(chunk 단위)을 클라이언트에게 전송한다.
그리고 이 자바스크립트 코드들이 이전에 보내진 HTML DOM 요소 위에서 한번 더 렌더링을 하면서, 각자 자기 자리를 찾아가며 매칭이 된다.

이러한 원리로 인해, 잠ㅁ깐의 스타일 깜빡임 현상이 보인다. 새롭게 페이지를 로딩할 때마다 약간 뒤늦게 스타일이 적용되는 듯한 이 과정이, html dom요소에 뒤늦게 ㅂ자바스크립트가 동작하면서 나타나는 현상이다.
즉, 2번 렌더링 하는 원리이다.

👉 모든 요청에 대해 서버에서 렌더링을 진행하지는 않고 초기 렌더링만 서버가 담당한다. 그 이후에는 next/router를 이용하여 클라이언트에서 렌더링한다. next 가 해주는 일은 이게 전부이다. 간단하지만, 이 방식으로 SPA 의 단점으로 꼽히는 긴 초기 렌더링 시간을 대폭 줄일 수 있다.

⛵ next.js 주요 기능

• Server Rendering : 클라이언트로 html을 보내기 전에 서버사이드에서 리액트 컴포넌트를 렌더링 할 수 있다.
• hot reloading : 개발 중 저장되는 코드는 자동으로 새로고침
• automatic routing : pages 폴더에 있는 파일은 해당 파일 이름으로 라우팅 된다.
  ex) pages/page1.tsx -> localhost:3000/page1
• single file components : style jsx를 사용함으로 컴포넌트 내부에 해당 컴포넌트만 스코프를 가지는 css를 만들수 있다.

// styled-jsx

function Heading(props) {
  const variable = "red";
  return (
    <div className="title">
      <h1>{props.heading}</h1>
      <style jsx>
        {`
          h1 {
            color: ${variable};
          }
        `}
      </style>
    </div>
  );
}

export default function Home() {
  return (
    <div>
      // red
      <Heading heading="heading" />
      // block
      <h1>ttt</h1>
    </div>
  );
}

❗ <style jsx global>를 사용하면 글로벌로 스타일 정의 가능하다.(_app.tsx에만 정의 가능)

// _app.tsx
import "./globals.css";

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

export default MyApp;

• server landing
  : 서버렌더링을 한다. 클라이언트 렌더링과 다르게 서버렌더링을 한 페이지의 페이지 소스보기를 클릭하면 내부에 소스가 있다.
• auto code splitting(코드 스플리팅 자동화)
  : dynamic import를 이용하면 손쉽게 코드 스플리팅이 가능하다.
  ❗ 코드 스플리팅은 내가 원하는 페이지에서 "원하는" 자바스크립트와 라이브러리를 렌더링 하는 것이다. 모든 번들(chunk.js)이 하나로 묶이지 않고, 각각 나뉘어 좀 더 효율적으로 자바스크립트 로딩 시간을 개선할 수 있다.
  즉, 페이지를 로딩하면 오로지 해당 페이지에 필요한 자바스크립트와 라이브러리들만 렌더링 된다. (페이지와 관련한 번들 파일만 자동으로 스플리팅 됨)
• prefetching : 두 개의 다른 페이지를 연결하는 Link컴포넌트는 백그라운드에서 자동으로 페이지 리소스(코드
• typescript
  : 타입스크립트 활용을 위해 웹팩을 만지거나 바벨을 만질 필요 없다. 타입스크립트를 설치하고 (yarn add typescript @types/node @types/react) 명령어 (yarn run dev)만 하면 자동으로 tsconfig, next-end.d.ts가 생성되어 타입스크립트로 코딩이 가능해진다.

⛵ next.js 시작하기

1) 기본 세팅

mkdir hello-next  // 파일 생성
cd hello-next
yarn init -y
yarn add react react-dom next  // 설치
mkdir pages

2) package.json 추가

{
  "name": "practice next",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {   // 해당 script 부분 추가해주기
    "dev": "next"
  },
  "dependencies": {
    "next": "^2.1.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  }
}

3) 페이지 작성하기