SSR(서버측 렌더링) 및 SSG(정적 사이트 생성)를 사용하는 경우는 언제입니까?

소개

이봐, 여기서 우리는 차이점과 적용 방법을 보여주고 바라건대 이 두 가지 유형을 사용하여 응용 프로그램을 표시하는 시기를 더 쉽게 배울 수 있기를 바랍니다.

다음 정보와 코드는 타이프스크립트 형식으로 되어 있으며 이해하기 쉽도록 NextJs 문서와 일치합니다.
useEffect 및 axios에서 모든 API 호출을 수행할 수 없는 이유는 무엇입니까?! 이 게시물을 읽는 동안 다음 기능을 사용하면 API에 대한 요청이 클라이언트 범위를 벗어나 데이터가 덜 취약해지며 반대로 클라이언트 측에서 useEffect 및 axios가 가능하다는 것을 알게 될 것입니다. 브라우저에서 액세스할 수 없는 정보에 액세스할 수 있는 충분한 지식.

따라서 각각의 기능을 언제 사용해야 하는지 알아보기 위해 계속 읽으십시오. 언급된 기능을 사용하는 방법에 대한 자세한 정보가 필요한 경우 NextJs 문서here.에 액세스하십시오.

서버측 렌더링(SSR)

이것은 애플리케이션이 클라이언트의 브라우저로 전송되기 전에 서버에서 페이지를 구성하는 방법입니다.

SSR로 작업하기 위해 next에서 문서를 읽을 때 getServerSideProps 함수를 사용할 수 있습니다. 이 함수는 특정 순간에만 호출되며 가장 중요한 이 함수는 next 프레임워크에서 생성된 노드 서버에서 서버 측에서 직접 호출됩니다.

가져오기가 클라이언트(브라우저) 외부에서 수행되고 브라우저가 반환된 속성에만 액세스하는 사이드 서버에서 실행되면 프로젝트가 더 안전해집니다.

요청 시간에 감염된 데이터를 사전 렌더링해야 할 때 이 기능을 사용합니다. 애플리케이션의 모든 기능은 애플리케이션의 최종 렌더링 전에 이러한 모든 가져오기를 수행하므로 데이터가 필요하지 않은 경우 필요할 때만 사용하십시오. 추가 보호 계층이 필요하거나 자주 업데이트해야 하는 경우 클라이언트 측에서 이 데이터를 가져옵니다.

일부 데이터를 가져오기 위해 getServerSideProps를 사용하는 구문은 다음과 같습니다.

export default function Page({ data }) {
  // Render data...
}

// This gets called on every request
export const getServerSideProps: GetServerSideProps = async () => {
  // Fetch data from external API
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // Pass data to the page via props
  return { props: { data } }
}

정적 사이트 생성(SSG)

이 방법은 빌드 시간에 정적 HTML 사이트를 생성합니다. 즉, SSG를 수행하는 데 사용되는 함수에서 가져오거나 생성된 모든 요소는 프로젝트 빌드 시 로드됩니다.

NextJs에서는 getStaticProps 함수를 사용할 수 있습니다. 이 함수는 프로젝트를 빌드할 때 구성 요소에 props를 반환하므로 자주 업데이트되는 데이터를 가져오는 데 사용하지 마세요.

페이지를 렌더링하는 데 필요한 데이터를 빌드 시간에 사용할 수 있거나 헤드리스 CMS에서 가져오거나 데이터가 공개적으로 캐시에 있을 수 있고 페이지가 SEO 이유로 빠르게 사전 렌더링되어야 하는 경우 이 기능을 사용해야 합니다.

getStaticProps에서 사용되는 구문은 다음과 같습니다.

// posts will be populated at build time by getStaticProps()
export default function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

// This function gets called at build time on server-side.
// It won't be called on client-side, so you can even do direct database queries.
export const getStaticProps: GetStaticProps = async () => {
  // Call an external API endpoint to get posts.
  // You can use any data fetching library
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  }
}

미들웨어

미들웨어는 요청을 가로채고 다른 미들웨어 또는 최종 구성 요소에 정보를 전달하기 전에 일부 변경을 수행할 수 있는 기능입니다.

이 함수는 NextJs easy peasy에서 사용할 수 있으며 다음 예제에 도달한 문서를 읽을 수 있습니다.

// pages/_middleware.ts

import type { NextFetchEvent, NextRequest } from 'next/server'

export function middleware(req: NextRequest, ev: NextFetchEvent) {
  return new Response('Hello, world!')
}

페이지 디렉토리에서 _middleware.ts or .js라는 파일을 만들고 사용하도록 설정하면 이 함수는 클라이언트가 만든 요청을 가로채고 생성된 규칙에 따라 무언가를 반환합니다.

결론

결제 API에 액세스해야 하는 경우 이러한 기능 중 하나를 사용하는 것이 좋습니다. 제 경우에는 정적 페이지에 표시할 제품의 값을 검색하는 데 사용해야 했습니다. 이는 자주 변경되지 않기 때문에 SSG를 사용했습니다.

SSR에 대한 또 다른 예는 자주 변경되지는 않지만 요청 시 업데이트해야 하기 때문에 CMS에서 게시물 정보에 액세스해야 하는 경우입니다. 따라서 게시물이 업데이트될 때마다 재검증을 호출하고 모든 데이터를 다시 가져올 수 있습니다. 게시물을 위해.

이 기능을 사용한 프로젝트를 사용할 수 있습니다here..

끝까지 도달해주셔서 감사합니다. 도움이 되었기를 바랍니다.