대체 클라이언트 측 경로는 무엇입니까?

Gatsby.js로 만든 사이트는 성능면에서 최적화된 정적인 사이트이기 때문에 콘텐츠에 접근할 수 있기 때문에 이 콘텐츠를 (CMS나 백엔드에서) 이용할 수 있기 때문에 사이트를 구축해야 한다. .

그러나 경우에 따라 특히 대규모 콘텐츠 사이트의 경우 편집 팀에서 빌드가 완료되는 것보다 빠르게 콘텐츠를 추가합니다. 따라서 일부 콘텐츠가 추가되지만(CMS 또는 백엔드를 통해) 아직 사이트에서 사용할 수 없습니다.

그러나이 문제는 "대체 클라이언트 측 경로"시스템 덕분에 조정할 수 있습니다.

사용 사례 : 뉴스 웹사이트

뉴스 사이트에는 10,000개 이상의 기사가 있고 데이터베이스에 저장되어 있으며 Gatsby의 createPages API를 사용하여 정적 페이지를 만듭니다.

예를 들어 다음과 같은 URL이 있는 기사가 있습니다.

기사/뉴스/AZE123

기사/취미/RTY345

기사/팁/UIO433

기사/팁/QSD345

기사/취미/FGH678

기사/뉴스/JKL789

기사는 저널리스트 팀이 작성한 후 데이터베이스에 추가됩니다. 사이트의 저널리스트 팀은 매일 평균 100개의 기사를 작성하고 즉각적인 실제 주제에 대해 이야기하기 때문에 즉시 액세스할 수 있기를 원합니다.

하지만 사이트는 하루에 15번만 재구축됩니다(그렇지 않으면 재구축하는 데 몇십 분 정도 걸립니다) → 이것은 우리가 JAMTAX(JAMSTACK과 관련하여)라고 부르는 것의 일부입니다. 따라서 방금 게시된 기사에 즉시 액세스할 수 없고 몇 분 또는 몇 시간 후에만 액세스할 수 있는 경우가 매우 자주 발생합니다.

"대체 클라이언트 측 경로"를 만드는 것이 필요합니다. 이 폴백 클라이언트 쪽 경로는 아티클이 정적으로 생성될 때까지 사용되는 경로입니다. 이 대체 클라이언트 측 경로는 API 호출 덕분에 클라이언트 측에서 생성됩니다.

Gatsby에서 "대체 클라이언트 측 경로"를 설정하는 방법은 무엇입니까?

폴백 클라이언트 측 경로는 다음과 같은 모양의 URL과 일치합니다.

그리고 클라이언트가 정적으로 생성된 기사에 액세스하려면 폴백 클라이언트 쪽 경로가 아닌 정적 페이지(SSG)에 대한 액세스 권한이 있어야 합니다. 더 최적화되어 있기 때문입니다.

이를 위해 이 폴백 클라이언트 측이 될 페이지를 생성한 다음 onCreatePage API 및 해당 matchPath 인수 덕분에 생성될 때 해당 matchPath를 재정의할 수 있습니다.

actions.createPage({
    path,
    matchPath: "articles/:articleType/:articleId",
    component: "fallbackArticlesComponent.tsx",
    context: {
            //The necessary context for your template
        },
  })

따라서 모양이 article/:articleType/:articleId이고 정적으로 생성된 페이지가 없는 페이지에 액세스하려는 모든 사용자는 이 폴백 페이지(따라서 fallbackArticlesComponent.tsx 구성 요소)의 콘텐츠에 액세스할 수 있습니다.

따라서 기사의 내용을 가져오려면 이 구성 요소에서 API(또는 CMS)를 호출해야 합니다.

또한 요청이 결과를 찾지 못했을 때 이 페이지에서 동작을 준비해야 합니다. 예를 들어 사용자가 페이지 article/typeThatDoesNotExist/IdThatDoesNotExist에 액세스하려는 경우 대체 페이지에 "떨어질"것이기 때문입니다.

그런 다음 404 페이지(navigate(/404 , { replace: true }) 포함)로 리디렉션하거나 "안타깝게도 이 문서는 존재하지 않습니다."와 같은 오류를 표시하도록 선택할 수 있습니다.

의견에 자유롭게 질문하십시오. 기꺼이 답변하겠습니다.