데이터 취득 -NextJS로 실제 설명

SSG SSR 및 ISR우리가 어느 시간에 만났던 편지.그들은 나를 헷갈리게 할 뿐이다.내가 더 분명하게 말할 수 있는지 없는지...

만약 당신이 모든 전방 프레임워크에서 일한다면, 데이터를 가져와 페이지에 표시할 수도 있습니다.서버, 헤더 없는 cms 또는 다른 원본에서 데이터를 얻습니다.
어떤 상황에서든 데이터를 어떻게 얻느냐는 데이터의 변경 빈도와 변경 사항이 앞에 표시되는 시간에 따라 결정됩니다.
내가 만난 이 줄임말들, 이 자모들, 문제는 내가 결국 시작하기 전보다 더 곤혹스러웠다는 것이다.
나 자신을 위해서, 나는 이 개념들을 실례로 실제적으로 해석해 보려고 한다.설명해 봐, 그러면 내가 무슨 일이 일어났는지 더 잘 이해할 수 있어.
저는 NextJS를 해석의 기초로 사용할 거예요.
데이터를 어떻게 얻고 나타내는지에 있어서 보통 두 가지 주요 장면이 있다.

1. 전자상거래 상점 같은 사이트가 있다면 데이터는 자주 업데이트해야 한다.

사이트 데이터가 자주 업데이트되어야 하기 때문에 다음과 같은 기능을 사용할 수 있습니다.

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

    return {
        props {}
    }       
}

getServerSideProps에서는 요청할 때마다 데이터를 추출하고 나타냅니다. 이것은 서버에서 이루어집니다.그것은 서버에서 렌더링한 것이다.나는 이것이 어떻게 발생했는지 완전히 이해하지 못하기 때문에 나는 더 이상 설명하지 않을 것이다.

2. 블로그와 같은 정적 데이터 사이트가 있다면.

이러한 상황에서 데이터는 구축할 때 나타나는데 보통 두 개의 직렬 작업 함수로 구성된다.

getStaticProps

GetStaticPath

구축 시 getStaticProps 모든 데이터를 가져와 다음 기능을 사용하여 프런트엔드에 제공합니다.

export async function getStaticProps(){

    const res = await fetch(`https://...`)
    const data = await res.json()

    return {
        props { data }
    }       
}

이 페이지를 다시 방문하면 정적 페이지를 제공합니다.다시는 전화 안 할 거예요.

너의 블로그에는 매 문장의 상세한 페이지가 있을 가능성이 매우 높다.이것은 getStaticPaths를 사용하여 각 경로를 가져와 일치하는 페이지를 보여주는 것입니다.

export async function getStaticPaths() {

  return {
    paths: [
      { params: { ... } } 
    ],
    fallback: false,
  };
}

getStaticPaths 생성할 모든 페이지의 경로(slug)를 가져와서 다음에 얼마나 많은 페이지를 만들어야 하고 각 페이지에 어떤 내용을 포함해야 하는지 알 수 있도록 합니다.getStaticPaths에서 온 매개 변수가 getStatcProps에 전달되어 각 페이지를 구축합니다.

NOTE: It is also possible to use getStaticPaths with getServerSideProps

문제.

getStaticProps와getgetStaticPaths은 모두 이렇게 사용하지만 정적 사이트에 문제가 없는 것은 아닙니다.
이러한 방식으로 두 함수를 사용하면 두 가지 주요 문제가 발생합니다.

페이지 내용에 업데이트나 변경이 표시되지 않음

다른 페이지가 생성된 후 생성된 새 페이지는 처리되지 않습니다.

이 문제들을 자세히 살펴보고 어떻게 완화시키는지 봅시다.

질문: 페이지 내용이 업데이트되지 않음

프레젠테이션의 작성 방식getStaticProps에 따라 기존 내용이 변경되거나 업데이트되면 아무 일도 일어나지 않습니다.페이지가 생성되었기 때문에 어떤 수정도 반영되거나 나타나지 않습니다.

솔루션:재검증

이 문제를 해결하기 위해서 우리는 getStaticProps의 반환문에 하나를 추가할 것이다.

export async function getStaticProps(){

     return {
           props: data,
           revalidate: 1
      }
}

revalidate Next에 페이지 컨텐트를 재생성하기 전에 설정된 초를 기다린다고 알립니다.이렇게 하면 변경 사항이 렌더링됩니다.우리 사이트를 최신식으로 유지하다.

Gotcha: revalidate works on a page by page basis and only for pages that already exist.

질문: 새 페이지를 처리할 수 없습니다.

GetStaticPath의 return 문, 특히 fallback 매개 변수를 확대합니다.

  return {
    paths: [
      { params: { ... } } 
    ],
    fallback: false,
  };

이 함수에 필요한 반환은false,true,blocking으로 설정할 수 있습니다.그러나 이것은 무엇을 의미하는가?
오류:

액세스한 경로가 존재하지 않으면 404페이지가 표시됩니다.

새 페이지가 생성되지 않습니다.

맞습니다.

액세스 경로가 없으면 Next에서 페이지를 백그라운드로 생성하려고 합니다.만약 성공한다면, 그것은 데이터를 페이지에 주입할 것이다.

Blocking is beyond the scope of what I am trying to explain here - I just not in the mood for more confusion. Here are the docs

솔루션:예비(fallback)을 true로 설정

GetStaticPath에서는 새 페이지의 문제를 해결하기 위해 다음과 같이 합니다.

export async function getStaticPaths() {

  return {
    paths: [
      { params: { ... } } 
    ],
    fallback: true,
  };
}

fallback를 true로 설정하면 우리가 만든 모든 새 페이지가 표시되고 방문자들은 이 페이지가 존재하지 않는 한 404페이지를 만나지 않을 수 있습니다.

Gotcha: Whilst Next is trying to generate the new page, nothing is being shown onscreen. To avoid your visitor thinking that nothing is happening, add a skeleton page - as a placeholder - at the top of your page render:

export default function PostDetails({ post }) {
  if (!post) return <Skeleton />
}

만약 이 페이지가 확실히 존재하지 않는다면, 사이트의 다른 위치로 이동하거나 404페이지를 사용자 정의해야 한다.

결론

본고는 데이터 획득과 관련된 줄임말을 간소화하는 데 주력한다.내가 말한 내용에 근거하여 나는 마지막으로 말하고자 한다.

서버 쪽 렌더링: 뭐 getServerSideProps 했어요?

SSG – 정적 사이트 생성: 기본값getStaticProps 기능.

ISR-증가분 정적 재생성: fallback에서 true를 getStatcPaths로 설정하면 어떻게 됩니까?

본문은 최초로 발표되었다Dante Decodes
영상학점: Peter Mekhaeil

읽어주셔서 감사합니다. 연결해 주세요!

이 작은 구석에 와줘서 고마워요.연결하고