목차

• API Routes
• CSS Module
• 글로벌 레이아웃 Global Layout
• Next.js 렌더링 방식

API Routes

api 응답을 정의하는 코드

localhost:3000/api/hello

CSS Module

index.css 파일을 불러오는건 모든 페이지에 다 적용되는 _app.tsx 에만 바로 import 가능하다. app 컴포넌트 파일이 아닌 다른 컴포넌트 파일에선 import로 css 불러오는것을 제한하고있다.

import './index.css'

대신
CSS Module을 사용하여 import하자

이름이 .module.css

파일: index.module.css

.h1 {
  color: red;
}

import style from './index.module.css'

export default function Home() {
  return <h1 className={style.h1}>인덱스</h1>
}

Global Layout

export default function App({ Component, pageProps }: AppProps) {
  return (
    <GlobalLayout>
      <Component {...pageProps} />
    </GlobalLayout>
  )
}

사전 렌더링과 데이터 페칭

기존 리액트

이 방식의 문제점은, 백엔드 서버로 부터 불러온 데이터가 화면에 나타나기까지 걸리는 시간이 길다. why? useEffect 로 컴포넌트가 마운트 된 이후에 데이터fetch가 발생, 즉 FCP 이후에 데이터 요청이 늦게일어남

Next.js 렌더링 방식

서버 사이드 렌더링 SSR

사전 렌더링을 직접 진행하는 위 JS실행(렌더링) 과정에서 백엔드 서버로부터 현재 페이지에 필요한 데이터를 미리 불러오도록 설정할 수 있따.

즉, 사전 렌더링 과정 중 데이터 페칭까지 동시에 수행할 수 있기때문에 앞에 리액트 방식보다 데이터를 요청하는 시점이 매!우! 앞섬
이 방식이 SSR, 서버 사이드 렌더링이다.

정적 사이트 생성 SSG

요청하는 데이터가 많은 경우에는 빌드 타임에 미리 페이지의 사전 렌더링을 완료

증분 정적 재생성 ISR