BBZJUN's

Next.js에서 SSG, SSR, ISR, CSR에 대해 한국어로 설명드리면:

SSG (정적 사이트 생성):

설명: SSG는 페이지를 빌드 시점에 미리 렌더링하여 정적인 HTML 파일로 생성합니다. 이렇게 생성된 페이지는 이후 요청 시 서버에서 그대로 제공됩니다.
Next.js에서의 동작 방식: getStaticProps와 비슷하며, 이 메서드를 사용해 빌드 시 데이터를 가져와 페이지를 생성합니다.
코드 예시:
js
코드 복사
const staticData = await fetch('https://...', { cache: 'force-cache' });
force-cache는 데이터를 빌드 시에만 캐싱하고 이후로는 그대로 제공하는 방식입니다.
SSR (서버 사이드 렌더링):

설명: SSR은 매 요청 시 서버에서 페이지를 렌더링하고 HTML을 클라이언트로 전달합니다. 페이지는 사용자 요청마다 새롭게 렌더링되므로, 최신 데이터를 항상 반영합니다.
Next.js에서의 동작 방식: getServerSideProps와 유사하며, cache: 'no-store'를 사용하여 서버가 캐싱 없이 매번 새로운 데이터를 받아옵니다.
코드 예시:
js
코드 복사
const dynamicData = await fetch('https://...', { cache: 'no-store' });
ISR (증분 정적 재생성):

설명: ISR은 정적 사이트 생성(SSG)와 유사하지만, 지정된 시간 간격으로 페이지를 재생성합니다. 즉, 페이지가 처음에는 정적으로 생성되지만, 설정된 시간(예: 10초)이 지나면 새 데이터를 반영해 페이지를 다시 생성할 수 있습니다.  
Next.js에서의 동작 방식: getStaticProps에서 revalidate 옵션을 사용하는 방식과 유사하며, 이를 통해 주기적으로 데이터를 다시 가져옵니다.
코드 예시:
js
코드 복사
const revalidatedData = await fetch('https://...', { next: { revalidate: 10 } });
이 예시는 10초마다 데이터를 다시 가져와 페이지를 재생성합니다.
CSR (클라이언트 사이드 렌더링):

설명: CSR은 클라이언트에서 모든 페이지를 렌더링하는 방식입니다. 즉, JavaScript가 로드된 후 브라우저에서 데이터를 가져오고 페이지를 렌더링합니다. React의 SPA(단일 페이지 애플리케이션)와 비슷한 방식입니다.
Next.js에서의 동작 방식: 페이지 컴포넌트에 'use client';를 선언하면 해당 페이지는 클라이언트 측에서만 렌더링됩니다.
코드 예시:
js
코드 복사
'use client';
이렇게 각 렌더링 방식은 페이지의 데이터 처리 방식과 성능에 따라 다르게 적용될 수 있습니다.

.prettierrc   파일 생성!
{
  "singleQuote": true,
  "jsxSingleQuote": true,
  "semi": true,
  "trailingComma": "es5",
  "plugins": ["@trivago/prettier-plugin-sort-imports"],
  "importOrder": [
    "^next$",
    "^next/\\w*$",
    "^next/(.*)$",
    "^react$",
    "^react/(.*)$",
    "^@/lib/(.*)$",
    "^[./]"
  ]
}



그리고
pnpm format 
> 실행