NextJS

NextJS는 React 기반의 프레임워크이다.
React 기반의 UI구성과, 페이지 기반 라우팅, SSR, SSG 등 성능 최적화와 같은 기능들을 제공한다.

기존 CSR방식의 React에 SEO에 취약한점과 SSR방식의 필요성에 의해 사용된다.

특징

pre-rendering

NextJS는 모든페이지를 pre-rendering한다.
즉, 페이지를 브라우저가 요청하기 전에 HTML을 미리 생성한다.
기존 React의 CSR방식에 비해 SEO최적화와 초기로딩속도 향상에 매우 유리하다는 장점을 갖는다.

export async function getServerSideProps() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();

  return {
    props: { data }, // 요청 시마다 새 데이터 반영
  };
}

export default function Page({ data }) {
  return <div>{JSON.stringify(data)}</div>;
}

파일기반 라우팅

pages/ 폴더 안에 파일을 생성하면 자동으로 해당 URL 경로로 매핑된다.
pages/index.js 파일은 /경로로
pages/about.js 파일은 /about 경로로 접근이 가능하다.

동적라우팅은 다음과 같이 할 수 있다.

// /post/123 → "Post ID: 123"
// pages/post/[id].js
import { useRouter } from "next/router";

export default function Post() {
  const router = useRouter();
  const { id } = router.query;

  return <div>Post ID: {id}</div>;
}

자동 코드 분할(Code Splitting)

페이지 단위로 자동 코드 분할을 수행하여 필요한 코드만 로드한다.
초기 로딩속도를 줄이고 성능을 향상시킨다.

번들을 여러 조각으로 조각내어 가장 필요한 부분만 전송하는 방식으로 로드타임을 줄여준다

HMR(Hot Module Replacement)

브라우저를 새로고침 하지 않아도 Webpack으로 빌드한 결과물이 웹 애플리케이션에 실시간으로 반영되도록 도와준다.

코드를 저장 할 때 마다 실제로 변경된 모듈만 다시 로드하여 애플리케이션의 상태를 유지하고 변경사항을 확인하는데 걸리는 시간을 단축시켜준다.

Hydration

서버에서 미리 렌더링된 정적인 HTML을 클라이언트에서 프레임워크가 다시 활성화 하는 과정을 의미한다.

즉, SSR 방식으로 사전 렌더링 된 HTML 을 받아온뒤 클라이언트로부터 JS 파일을 받아 이를 HTML에 동기화 시키는 과정으로 볼 수 있다.

getServerSideProps 를 사용했을때 서버에서만 API를 통해 데아터를 불러오므로 이때 Hydration이 적용된다.

하이브리드 렌더링

각 페이지를 목적에 맞게 렌더링 할 수 있다.

CSR: useEffect
SSR: getServerSideProps
SSG: getStaticProps
ISR: getStaticProps + revalidate

NextJS 13 이전까지 사용된 Page Router방식에서 사용된 방식으로 이후 AppRouter 방식에서는 다르게 구분한다.

App Routing

NextJS 13 버전 이후 등장한 라우팅 방식이다.
React 18 버전에서 Server Component가 도입되며 서버와 클라이언트 사이드의 코드를 분리하기 위해 도입되었다.
Page Router 처럼 파일 기반 라우팅이며, 일부 단점을 보완한다.

기존 Page Router에서 모든 파일이 route 될 수 있어 실제 route 경로와 component 요소 간 구분이 어렵다.
따라서, page 폴더 외부의 파일구조를 가져야 했지만, App Router 에서는 폴더구조 내 page.tsx 파일만 route가 생성된다.

기존의 최상위 경로에서만 설정 할 수 있던 공통 레이아웃, SEO 등을 경로별 중첩 라우팅을 통해 복잡한 레이아웃을 구성 할 수 있다.

Server Component

서버에서의 렌더링에 최적화된 컴포넌트.
서버 컴포넌트는 서버에서 실행되며, 클라이언트로 전송되기 전에 서버에서 HTML로 렌더링되는 컴포넌트이다.
이 컴포넌트의 스크립트 코드는 서버에 남아 있으므로, 클라이언트에 보내지지 않는다.

app directory 내부에서는 기본적으로 모든 컴포넌트가 서버 컴포넌트로 작동하며, getServerSideProps, getStaticProps 대신 fetch API 를 data fetching에 사용하게 된다.

Client Component 는 단순히 최상단에 'use client'라고 명시해주면 된다.

기타특징

built-in-css, 이미지 최적화, api route, client-side navigation 등의 특징을 갖는다.