손에 익는 Next.js - Part 1 - 공식 문서 훑어보기

10 Sep 2024 in Frontend / Next

하조운님 강의, 공식문서 13 따라가기

add table of contents

왜 Next.js를 배우는가?

Next.js 를 배우는 이유

JS (1995) : 모카로 등장했다가 Java네이밍으로 인기 얻고자 이래됨
Jquery (2005) : made to handle JS easier, UI 조작 easy (data 관리 어려움)

Frameworks 등장 (Backbone, AmberJS )

Angular (2010, Google) : 양방향 (DOM <-> 데이터) 데이터 관리 (BUT 복잡도 증가함)
React (2013, Facebook) : 단방향 (데이터 내려받고 필요하면 DOM 갈아끼우기!)

React 한계

CSR 시 초기 bundle too big
SEO 어려움 (봇들이 js bundle 로드 전에 html접근 어려움)
NextJs (2016, Vercel) : SSR 가능!

Next.js 기본 배우기

NextJS 는 무엇인가

무슨 문제를 해결하는가?
React 개발에 필요한 선택을 최소화, 최적화

파일 기반 라우팅
페이지 단위의 사전렌더링 (pre-rendering) SSR, SSG
splitting 알아서
prefetching made easy …etc

💦 Hydration이란

process of turning static HTML interactive on the client side (attaching event listeners, states…etc)

서버에서 static HTML 생성
초기 렌더를 위해 클라이언트로 전송
JS bunldle 로드
클라이언트에서 hydration

attching event listeners, states…etc
reconciling server-rendered HTML with client-side React Component tree

NextJS 13

file system routing 지원
AS-IS: pages/ 디렉토리내로 함
TO-BE: apps/ App Router
- (2022 NextJS Conf)

hydration

전: 페이지 단위 가능
후: Streaming 컴포넌트 단위로 가능 (부분적 하이드레이션 가능)
유저가 초기에 받아드려야 하는 양이 현저히 줄어듦

Server Components

RSC (React Server Component)
- also included in React 18

Usefulness

Data fetching : fast
security : only kept in server
caching
js bundle size decreased

server components	client components
- NEXTJS 13 부터 기본	- 기존 tranditional 컴포넌트 - 사용 필요 시 ‘use client’ 해주어야 함

⚠️ 서버 컴포넌트는 client component 에서 Import 불가!
props로 넘겨주어야 한다
Client Component != CSR (Client-only)
- more like ‘Classic’ Component
- NextJs의 prerendering 으로 렌더 되었던 컴포도 Client Component
- SSR, SSG 가능
- Vs RSC? \(\rightarrow\) usefulness 참고
Server Component
- hook, event 사용 불가
- \(\rightarrow\) client component 를 가능한 최대 트리의 leaf로 보내기

Routing

url path (segement 단위로)
특별히 정해져 있는 names
- /error.tsx
- /loading.tsx
- /page.tsx
dyanmic routing (app/blog/[id]/page.tsx)

페이지 간 이동

next/link의 <Link/> 사용
next/navigation의 useRouter 사용 (Client Component에서만 사용)

Styling

css modules (만 설명)
- className 중복 방지위한 지역 스코프 (.module.css)
전역 스타일링
- 클래스 오염은 있긴 하나 잘 사용하면 굳 (가장 상위에 쓰는걸 추천 (like layout))

Data Fetching

next에서 제공하는 fetch 사용 가능
- Server Component, Client Component, API도 가능
- Data 캐싱됨!! (보라색 부분)

NextJS Caching

revalidation (재검증)

⏰ 시간 기반 재검증 :
```
// ex: 1hour 유효
fetch("https://...", { next: { revalidate: 3600 } });
```
- ⚠️ stale 판정되면 revalidate 하지만, 돌려주는 값은 stale값임
- 다음 호출때 신선한 데이터 줌
온디맨드 (수요 있을 떄)

tag기반, path 기반

Tag 기반:

// ex: 1hour 유효
fetch("https://...", { next: { tags: ["collection"] } });

revalidateTag("collection");

revalidate 시 PURGE (정리)
next fetch: fresh data

Metadata

page thumnail, description etc

Static Metadata: metatdata 객체 정의

import type { Metadata } from "next";
export const metadata: Metadata = {
  title: "...",
  description: "...",
};

export default function Page() {}

Dynamic Metadata: 동적으로 metadata obj 생성

import type { Metadata, ResolvingMetadata } from "next";

export async function generateMetadata(
  { params, searchParams }: Props,
  parent?: ResolvingMetadata
): Promise<Metadata> {
  const id = params.id;
  const post = await fetch(`https://../${id}`).then((res) => res.json());
  const prevImages = (await parent).openGraph?.images || [];

  // METADATA가 됨
  return {
    title: post.title,
    openGraph: {
      images: ["/asdfasdf.jpg", ...prevImages],
    },
  };
}

Next JS 손에 익히기

실습이라 몰랐던 것들만..

Error page prop으로 ({error, reset})가능 (reset은 함수)
동적 메타데이터 다루기
- export metatdata at the file (generateMetadata)