2024-12-13(라이브러리vs프레임워크, next.js)

라이브러리 vs 프레임워크

=> 핵심단어 : 제어역전(IOC)

=> 라이브러리의 제어역전은 개발자, 프레임워크의 제어역전은 프레임워크

 

위에 origin부분이 밑에 app폴더

위에 path부분이 밑에 Segment

origin : App폴더

path : Segment

 

동적라우팅

 

Link  컴포넌트 : client side navigation 방식 (vs server side navigation)

 

Route Group

• 폴더명을 소괄호로 씌우기
• ??라우트 그룹 왜 씀?
• => 코드정리
• => 별도의 레이아웃을 갖고싶어서

 

layout 컴포넌트는 무조건 props를 받음

 

_privateFolder : url path에서 완전히 제외(위에 라우터그룹은 하위폴더는 라우터에 노출됨)

위에 그림은 page.tsx에서 사용하는 컴포넌트구나하고 직관적으로 보임

 

4가지 렌더링 방식

SSG

• 정적 사이트(변하지 않는 페이지) 생성, 빌드시에 미리 페이지를 만들어놓고 사용, 속도 빠름
• cache : 'force-cache'사용 (fetch옵션안써도 기본값, 14버전까진)

const res = await fetch("https://api.example.com/data", {
  cache: "force-cache", // 결과값 저장
});

 

❓어떻게 확인함❓

=>build 해보기 (개발모드에서는 확인이 안됨)

 

ISR

SSG와 비슷, 미리 만들어놓음, 단 유효시간이 있음

 

1. Route Segment Config

ISR필요한 곳에 밑에 코드 넣기

 

❓ build해도 SSG랑 똑같이 찍히던데❓

=>코드로 확인

 

❓그럼 5초지나면 자동캐싱됨❓

=>ㄴㄴ 사용자가 실행했을때 실행됨, 그냥 상한 데이터가 될뿐

// layout.tsx | page.tsx | route.ts
export const revalidate = 5; // 5초 간격의 ISR

 

2. fetch옵션

❓fetch가 await 가능함❓

=>서버컴포넌트라 가능ㅇㅇ

 

SSR

사용자가 요청할때마다 서버 컴포넌트를 실행(build에선 실행x)

(SSG,ISR : build할때 서버컴포넌트를 한번실행)

 

❓언제사용❓

동적라우팅인 경우

 

Route Segment Config

// layout.tsx | page.tsx | route.ts
export const dynamic = 'force-dynamic'

 

fetch옵션

fetch('https://jsonplaceholder.typicode.com/todos/1', { cache: 'no-store' })

 

Dynamic Functions 를 사용한 경우

• cookies()

next에선 스토리지에서 쿠키를 씀(서버에서도 사용가능)

import { cookies } from 'next/headers'
 
export default function Page() {
  const cookieStore = cookies()
  const theme = cookieStore.get('theme')
  return '...'
}

• headers()

import { headers } from 'next/headers';

export default function Page() {
  // 현재 요청의 헤더 가져오기
  const headersList = headers();

  // 특정 헤더 값 가져오기 (User-Agent 예시)
  const userAgent = headersList.get('user-agent');

  return (
    <div>
      <h1>Dynamic Headers Example</h1>
      <p>Your User-Agent is:</p>
      <pre>{userAgent}</pre>
    </div>
  );
}

 

CSR

컴포넌트 최상단에 "use client" 를 넣어주면 브라우저에서 동작할 수 있는 클라이언트 컴포넌트로 인식

❓서버 컴포넌트랑 클라이언트 컴포넌트랑 혼압가능 ❓

ㅇㅇ, 근데 서버 페이지로 만들어서 클라이언트 컴포넌트필요한 부분만 만들기

 

hydration

html이 클라이언트에서 JavaScript를 통해 인터랙티브하게 변환되는 과정

 

페이지 이동 방식

Link 컴포넌트 : pre-fetching됨

useRouter