Next.js에서 SSR과 SSG를 사용해야 하는 경우

SSR(서버 측 렌더링):

서버에 대한 모든 요청에 ​​대해 실행됩니다.
사용자가 페이지를 방문할 때마다 서버는 데이터를 가져와 HTML을 렌더링한 후 클라이언트에 보냅니다.
이렇게 하면 콘텐츠가 항상 최신 상태로 유지되지만 서버 측 처리 오버헤드로 인해 속도가 느려질 수 있습니다.

SSR 타임라인 예시:

요청 1: 사용자 A가 방문 → 서버가 데이터를 가져와서 동적으로 페이지를 생성하고 응답합니다.

요청 2: 사용자 B가 방문 → 서버가 다시 데이터를 가져와서 동적으로 페이지를 생성하고 응답합니다.

export async function getServerSideProps(context) {
  const res = await fetch(`https://api.example.com/data`)
  const data = await res.json()

  return {
    props: { data }, // Will be passed to the page component as props
  }
}

function Page({ data }) {
  return <div>{data. Content}</div>
}
export default Page;

SSG(정적 사이트 생성):

빌드 시간(다음 빌드 실행 시)에 실행됩니다.
HTML과 데이터는 사전 렌더링되어 정적 파일로 저장됩니다. 이러한 파일은 사용자에게 직접 제공되므로 속도가 매우 빠릅니다.

선택 사항: 재검증을 사용하는 경우 Next.js는 지정된 시간 간격 후에 백그라운드에서 페이지를 다시 작성하여 업데이트된 콘텐츠를 사용할 수 있도록 합니다.
재검증이 포함된 SSG 타임라인 예: 60:

빌드 시간: 페이지는 빌드 시 사용 가능한 데이터로 사전 렌더링됩니다.

요청 1 :(빌드 후) : 사용자 A가 방문 → 정적 HTML이 제공됩니다.

백그라운드 재생성(60초 후): Next.js가 새로운 데이터를 가져와 페이지를 재생성합니다.

요청 2 : (재생성 후) : 사용자 B 방문 → 업데이트된 정적 HTML이 제공됩니다.

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts')
  const posts = await res.json()

  return {
    props: { 
      posts 
    },
    // Optional: Regenerate the page at most once every 60 seconds
    revalidate: 60 
  }
}

function BlogPage({ posts }) {
  return (
    <div>
      {posts. Map(post => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  )
}

SSR: 요청이 있을 때마다 새로운 데이터를 가져오고 페이지를 생성합니다.

SSG: 빌드 시(또는 예약된 재검증 간격 동안) 페이지를 한 번 사전 렌더링하고 다시 생성될 때까지 모든 사용자에게 사전 빌드된 동일한 페이지를 제공합니다.

다음과 같은 경우 SSR을 사용하세요.

실시간 최신 콘텐츠(예: 대시보드, 사용자별 데이터)가 필요합니다.
콘텐츠가 자주 변경되므로 효과적으로 캐시할 수 없습니다.

다음과 같은 경우 SSG를 사용하세요.

콘텐츠가 자주 변경되지 않습니다(예: 블로그 게시물, 마케팅 페이지).
속도와 성능이 중요합니다.

위 내용은 Next.js에서 SSR과 SSG를 사용해야 하는 경우의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!