Next.js 13 버전과 14버전의 차이

Next.js는 무엇인가?

개발자가 웹서비스를 만들기 위한 필요한 도구를 제공하는 React의 프레임워크다.

라우티, 데이터 패칭, 렌더링 같은 성능 최적화나 개발자 경험 조금 쉽게 생산성 높이 하는 고려를 할 수 있는것.

화면을 그리는 것 외에 성능 seo 전반적인 개발자 도구들을 제공하는 Next.js입니다.

pre-rendering

 

Next.js 13

- 파일 시스템 기반의 라우팅: 디렉토리 구조를 어떻게 짜냐에 따라 라우팅이 달라진다는 의미.

12 이하) pages 디렉토리들 기준으로 라우팅을 지원했다.

13) app 디렉토리로 바꾼다.

App Directory 13.4 -> App Router

 

- 서버 컴포넌트: React Server Components (RSC)

react18에서 도입한 걸 Next.js로 가져왔습니다.

 

장점

데이터 페칭 성능

데이터베이스와 가까워지고, 보완에 이점이 있고, 민감한 정보를 서버에서만 두니까 안전하다.

렌더링된 값을 캐싱해두고 있다 재사용할 수 있으니 성능상에도 이점이 있다.

자바스크립트 번들 크기가 감소. 서버 컴포넌트 경우 서버에서 렌더링까지 다 된 컴포넌트를 다 된 걸 내려줍니다.

 

 

'use client' 클라이언트 컴포넌트에 서버 컴포넌트를 import할 수 없다.

서버 컴포넌트는 props로 넘겨줘야합니다.

 

'use client'

import { useState } from "react";

export default function Example({ children }: children: React.ReactNode) {

  const [count, setCount] = useState(0);
  
  return (
  	<>
    	<button onClick={() => setCount(count + 1}>버튼 {count}</button>
        {children}
    </>
  )
}

 

이 컴포넌트는 클라이언트 컴포넌트이며, 서버 컴포넌트를 사용하고 싶을 때는 children과 같이 props로 전달해서 사용해야 합니다.

 

클라이언트 컴포넌트는 CSR 컴포넌트가 아니며, 클라이언트에서만 렌더링(CSR) 되는 컴포넌트가 아닙니다.

기존 Next.js pre-rendering이라는 방식으로 제공하던 렌더링 방식으로 여전히 렌더링 될 수 있게 되는게 클라이언트 컴포넌트입니다.

클라이언트 컴포넌트도 SSR, SSG 같은 방식으로 렌더링 가능합니다.

 

그럼, 클라이언트 컴포넌트가 SSR이 된다면 RSC랑 뭐가 다르며 SSR과 RSC는 어떤 점이 다른걸까?

서버 컴포넌트의 장점 중 데이터 페칭, 보안, 캐싱 등 강점이 있고 서버 컴포넌트와 클라이언트 컴포넌트를 가르는 이유입니다.

번들 크기가 줄어든다는 장점이겠다. 라는 이유가 나타납니다.

 

서버 컴포넌트에서는 hook, event 리스너를 사용할 수 없다. 클라이언트에서만 사용가능합니다.

클라이언트는 트리 끝으로 보내면 됩니다.

 

 

라우팅

app 디렉토리에 정의합니다. App Router

Next.js 파일 시스템의 라우터를 제공하기 때문에 파일 URL path와 사용할 수 있습니다.

app/dashboard/page.tsx -> /dashboard 경로의 이름이 되는 폴더, 경로의 이름으로 사용되는 segement다. root segement다.

 

동적 세그먼트 (Dynamic segement)

app/blog/[id]/page.tsx

 

페이지 간 이동

Link 컴포넌트 사용하기

import Link form "next/link";

export default function Page() {
	return <Link href="/dashboard">대시보드</Link>
}

 

a태그처럼 동일하게 사용하면 됩니다.

 

 

useRouter 사용하기

클라이언트 컴포넌트로 정의해야 합니다.

import { useRouter } form "next/navigation";

export default function Page() {
	const router = useRouter();
    
	return <button onClick={() => router.push("/dashboard")}>대시보드</button>
}