Gatsby: gatsby.js로 앱 빌드 : 단점은 무엇입니까?

귀하의 의견에 감사드립니다, @barbush. 68 단어가 너무 많을 줄은 몰랐습니다.

헤드 라인은 기본적으로 모든 것을 말합니다. gatsby.js로 앱을 빌드 할 때 어떤 단점이 있습니까?

앱을 만드는 것이 가능하다는 것을 알고 있습니다. 내 질문은-gatsby.js가 정적 웹 사이트 생성에 최적화되어 있기 때문에 어떤 단점이 있습니까? 나중에 저를 물릴 것이 있습니까?
나에게 꽤 구체적인 것 같습니다.

Woah woah woah @barbush 나는 정말로 당신이 이런 질문을 치안하는 것을 원하지 않습니다. 끔찍한 질문 (이것이 아님)이라면 무시하고 그 사람에게 말하는 것이 낫습니다. 다시는 이와 같은 질문에 응답하지 마십시오.

귀하의 질문에 @bolus . Gatsby는 반응 앱 및 기타 웹팩 / 반응 설정을 생성하는 것과 상당히 유사하도록 설계되었습니다. 따라서 웹 앱을 빌드하는 데 완벽하게 사용할 수 있습니다. examples 디렉토리를 보면 redux 예제가 있습니다. 사람들은 Apollo와 함께 그것을 아주 성공적으로 사용했다고합니다. 우리의 graphql 사용이 그들의 것과 충돌하기 때문에 Relay는 gatsby와 함께 사용할 수 없지만 앞으로는 쉽게 해결할 수있을 것이라고 확신합니다.

내가 아는 가장 큰 단점은 당신이 "페이지"를 만들고 있다고 가정한다는 것입니다. 그래서 만약 당신이 페이지가없는 직선적 인 앱을 더 많이 빌드한다면 그것은 당신에게 많은 것을주지 않고 당신의 자유도 어느 정도 제한 할 것입니다. 이 경우 CRA와 같은 더 바닐라 설정을 사용하는 것이 좋습니다.

그러나 "페이지"를 구축하는 경우 gatsby는 앱의 빠른 부팅을 위해 자동 코드 분할 및 정적 SSR을 얻을 수 있으므로 훌륭합니다.

좀 더 공식적인 트레이드 오프 문서를 작성하고 싶지만 그동안 여기에서 질문을 받게되어 기쁩니다.

@KyleAMathews : 감사합니다. 제가 찾던 바로 그것입니다.

콘텐츠 중심 웹 사이트 (블로그, 판매 페이지, 문서 등)를 만들 계획이며, 단순성을 위해 동일한 도메인에 몇 개의 작은 단일 페이지 앱을 호스팅하고 싶습니다.

Gatsby가 이것에 이상적인 것 같습니다.

또한 당신의 자유를 다소 제한 할 것입니다

제 사용 사례에는 문제가되지 않지만 어떤 제한 사항을 예상 할 수 있는지, 그리고이를 해결하는 것이 얼마나 어려운지 말씀해 주시겠습니까?

Gatsby를 만들어 주셔서 감사합니다, btw., Gatsby는 정말 멋져 보입니다! :)

하지만 제가 기대할 수있는 제한 사항과이를 해결하는 것이 얼마나 어려운지 말씀해 주시겠습니까?

Gatsby는 가능한 한 단순하고 겸손 해 지려고 노력하므로 특히 Gatsby가 설계 한 콘텐츠 / 페이지 웹 사이트를 수행 할 때 제한에 부딪히지 않아야합니다.

Gatsby는 웹 앱과 사이트 아이디어를 혼합하여 가능한 한 쉽게 정말 빠른 사이트를 구축하기위한 이상적인 개발 및 생산 도구를 우리 마음 속에 만들어 내도록 설계되었습니다.

"페이지"모델에서 벗어나는 방식으로 React를 사용하려는 경우에만 문제가 발생합니다 (예 : 더 많은 자유형 앱). 하지만 거기에서도 Gatsby에는 더 큰 사이트 https://www.gatsbyjs.org/docs/creating-and-modifying-pages/#creating -client-only-routes 내에 앱을 쉽게 포함 할 수있는 탈출구가 있습니다.

완벽 해 보입니다. 다시 한 번 감사드립니다!

안녕하세요 @KyleAMathews 와 @bolus

여기에 새로운 문제를 여는 대신 컨텍스트의 기원전 주석 heheh

내 /app (클라이언트 전용 경로) 내부에서 SPA (로그인 / 로그 아웃 / 대시 보드)를 생성하려는 경우 내부에 새 라우터를 생성해야한다고 가정하면 어떻게됩니까? 맞습니까?

이 유스 케이스 @KyleAMathews 에서 무엇을 권장합니까? 아니면 _ 더 바닐라 접근 방식 _을 사용하는 것이 더 좋을까요?

감사합니다

@fernandes checkout https://www.gatsbyjs.org/docs/creating-and-modifying-pages/#creating -client-only-routes — 질문이 더 있으면 알려주세요!

안녕하세요, @KyleAMathews 빠른 답장에 감사드립니다

토요일 내내 개츠비와 놀았고,이 예제를 확인하고 다시 하나 ...

내가하려는 것은 https://github.com/fernandes/react-boilerplate를 가져 와서 /app 에 클라이언트 전용 경로로 넣으십시오.

이 상용구는 다음으로 구성됩니다.
반응 / redux (핫 리로딩 포함) / 반응 라우터 redux

나는 JS에 대한 경험이 많지 않습니다. 내가 놓친 세부 사항 일 수도 있습니다 .. 다시 감사합니다!

react-boilerplate와 같은 내부에 Gatsby를 넣을 수 없습니다. Gatsby는 빌드를 처리하고 사이트를 실행하려고합니다. 대신 Gatsby 안에 "앱"부분을 넣으십시오.

예, 그게 제가 의미 한 바입니다 ... 개츠비는 내 모든 웹 사이트와 페이지를 처리하고 react-boilerplate 은 클라이언트 전용 경로로 /app 아래의 개츠비 내부에 들어갑니다. 그 스택, 특히 react-router-redux)?

Gatsby는 이미 모든 webpack / Babel / 기타 구성을 처리하므로 부트 스트랩 프로젝트가 필요하지 않습니다.

@KyleAMathews 나는 redux + apollo 클라이언트가 작동하는 클라이언트 전용 앱을 얻는 방법을 알아 냈습니다 .. 답장을 보내 주셔서 대단히 감사합니다 😉 👍

@KyleAMathews 여기에 작은 문제가 있습니다. 클라이언트 전용 페이지 내에서 graphql apollo 클라이언트를 사용하고 있지만 클라이언트 측에만 해당됩니다 (로그인해야하는 경우).하지만 Gatsby는 인덱스 파일을 생성하려고합니다. 빌드시; 물론 오류가 발생하는 것

이 HTML 생성을 건너 뛰는 방법에 대한 제안이 있습니까?

최신 정보:
https://www.gatsbyjs.org/packages/gatsby-plugin-create-client-paths/를 사용하고

그 플러그인 생성 deletePage 에 따라 page.path ... 확실하지가 😄 가장 좋은 방법,하지만 내 사용 사례에 대해 작업하는 경우 (예, 지금은 만들 필요, 그것은 완벽하게 작동하고를 항상 내 app/index.html 보내는 nginx의 리디렉션 규칙이지만 이전 앱에서 정확히 수행 한 작업입니다 ...

나는 개츠비에 점점 더 익숙해지고 있고, 내가하는 모든 진전이 더 행복하다는 것을 고백 할 필요가있다 ... 굉장한 작업 @KyleAMathews !! 👏

@KyleAMathews 여기 귀찮게해서 미안하지만 클라이언트 측 라우팅에 대해 물어볼 수있는 좋은 장소 인 것 같습니다.

따라서 내 사용 사례에서는 firebase에서 데이터를 읽고 있지만 사용자가 수정할 수 있기 때문에이 데이터는 빌드시 모두 사용할 수있는 것은 아닙니다.

따라서 Gatsby Page (예 : / podcasts)에서 cDM의 firebase에서 데이터를 쉽게 쿼리 할 수 ​​있습니다. 하지만 세부 정보 페이지 (예 : / podcast / : id)로 이동하고 싶습니다. 조금 잃어버린 부분이 있습니다. 해당 경로를 클라이언트 측 라우팅에 위임해야합니까?

/app 풍경 해치에 대한 아이디어는 그 아래에 SPA를 둘 수있는 장소를 갖는 것임을 이해하지만 내가하려는 작업에 대해서는 과잉 인 것 같습니다.

개츠비에서 일 해주셔서 감사합니다. 모든 곳에서 훌륭한 경험이었습니다. :)

@gafemoyano 가 /podcast/:id 대한 경로를 만드는 것은 사용자가 작업하는 동안 만든 팟 캐스트가 있다면 완전히 의미가 있습니다. 한 가지 단점은 팟 캐스트 페이지를 직접 방문하는 사람들의 TTFP 속도가 느려진다는 것입니다. 이제 서버에서 HTML을로드하여로드 할 수 있기 때문입니다. 빌드시 존재하는 팟 캐스트 페이지를 정적으로 렌더링 한 다음 사람들이 만들 때 브라우저에서 더 많은 것을 즉석에서 생성 할 수 있습니다.

이 페이지에있는 사람들에게 흥미 로움 — Gatsby https://www.gatsbyjs.org/docs/building-apps-with-gatsby/로 앱을 빌드하는 방법에 대한이 새 문서 페이지를 작성했습니다.

헤이 @KyleAMathews 이것이 공식적인 "클라이언트 측 문제"가 되었기 때문에 hahah 팟 캐스트 프론트 엔드와 백엔드를 모두 제어 할 수 있다는 점을 고려할 때이 팟 캐스트 문제에 대해 고려해 왔던 또 다른 사항은 특정 페이지 만 재 구축하는 방법이 있습니까? ? 또는 빌드를 캐시하고 수정 된 내용 만 변경합니다. 어떻게 작동 할 수 있는지 잘 모르겠습니다.

https://github.com/gatsbyjs/gatsby/issues/3444 관련 가능

https://github.com/gatsbyjs/gatsby/issues/3260#issuecomment -352856214에 저장할 키 / 값 캐시 API에 대해 댓글을 달았습니다. 레이아웃 + 페이지 콘텐츠가있는 경우 데이터 및 시각)

@KyleAMathews 답장을 하지 않아야합니다 .

` // page.matchPath is a special key that's used for matching pages
  // only on the client.
  if (page.path.match(/^\/podcasts/:id/)) {
    page.matchPath = "/podcasts/:id";

    // Update the page.
    createPage(page);
  }

그러나 오히려 예제에 표시된 것을 사용하십시오.

```
// page.matchPath는 페이지 일치에 사용되는 특수 키입니다.
// 클라이언트에서만.
if (page.path.match (/ ^ / app /)) {
page.matchPath = "/ app / : path";

// Update the page.
createPage(page);

}

And on app/index.js I would define my routes by importing from ReactRouter directly:

'react-router-dom'에서 {Switch, Route} 가져 오기
const AppIndex = () => (

/ app / podcasts / : id를 방문하여 구성 요소의 데이터를 가져 오기 위해 경로의 : id 부분에 액세스 할 수있는 PodcastDetails를 렌더링 할 수있는 방법은 무엇입니까?

간단한 시나리오로 불편을 끼쳐 드려 죄송합니다. 기존 예제로는 알아낼 수 없었습니다. 사람들이 개츠비로하는 일이 상당히 흔하다면 하이브리드 앱의 예를 포함해야할까요? 필요한 경우 기꺼이 도와 드리겠습니다.

이 라이브러리 @KyleAMathews를 구축하고 지원 해주셔서 다시 한 번 감사드립니다.

예제에서 경로의 app 부분은 임의적입니다. 필요한 모든 이름을 사용할 수 있습니다 (예 : podcasts .

예제 사이트가 좋을 것입니다. :-) 곧 시간이 있기를 바랍니다. 이 문제를 이미 해결 한 다른 사람을 초대하여 샘플 코드를 공유하세요!

여기에 몇 가지 샘플 코드를 시도하고

하지만 여전히 몇 가지 문제가 있습니다.
내가 여기서 설명한 하나
간단히 말해, 프로덕션 용으로 빌드하고 /app/ 디렉토리 아래의 경로 (예 : localhost:9000/app/posts/1 들어가 브라우저를 새로 고치면 404 빈 페이지가 표시됩니다.
localhost:9000/app/ 에서 페이지를 새로 고치면 제대로 작동합니다.
gatsby-plugin-create-client-paths 대한 prefixes 구성이 잘못되었을 수 있습니다.

module.exports = {
  ...
  plugins     : [
    {
      resolve: `gatsby-plugin-create-client-paths`,
      options: {prefixes: [`/app/*`]},
    },
    ...
};

또 다른 문제는 (문제인지 확실하지 않음) <Route /> 을 <BrowserRouter> 래핑 할 수 없습니다.
프로덕션 용으로 빌드 할 때 (개발이 잘 작동 함) "브라우저 기록에 DOM이 필요합니다"라는 오류 메시지가 표시됩니다. Gatsby가 노드 환경에서 실행되고 브라우저가 없으므로 window 등이 없기 때문입니다.

마지막으로 <BrowserRouter> 랩을 제거했는데 제대로 작동합니다.
저는 React를 처음 사용하기 때문에 문제에 대한 적절한 해결책인지 잘 모르겠습니다.

도움을 받고 싶어요 :)

@danielemesh 안녕하세요 Daniel. 내 개츠비 앱을 다시 작업 할 시간이 없었지만 소스 코드에서 볼 수있는 것은 /pages 내에 /app/* 디렉터리를 배치했다는 것입니다.
이것이 어디로 가야할지 잘 모르겠습니다. src/ 디렉토리에 넣어 보겠습니다.

작동하는지 알려주세요!

건배!

@gafemoyano가 시도했지만 작동하지 않았습니다.
개츠비는 인식하지 못합니다 ..

감사!

나는 몇몇 플러그인에 직면하여 내 것을 작성하기로 결정했습니다 (원래 플러그인에서 100 % 빌려 옴), 운 좋게도 문제를 해결하고 개츠비 플러그인을 작성하는 방법을 배울 수있었습니다.

나는 응용 프로그램에서 추출하여 문제를 해결하는 데 도움이되기를 바랍니다. 문제는 app 내부의 bc에 SSR에서 처리해서는 안되는 graphql 쿼리가 있습니다.

@KyleAMathews 예제 사이트의 의미는 무엇입니까? 어딘가에 추가 하시겠습니까? 내가 할 수있어 ..

gatsby-config.js

plugins: [
    `app-layout`, // I set my layout
    {
      resolve: `app-client-only`, // I handle app pages
      options: { prefixes: [`/app/*`] },
    },
  ],

plugins / app-layout / gatsby-node.js

// Implement the Gatsby API “onCreatePage”. This is
// called after every page is created.
exports.onCreatePage = ({ page, boundActionCreators }) => {
  const { createPage } = boundActionCreators;

  if (page.path.match(/^\/app/)) {
    // It's assumed that `app.js` exists in the `src/layouts/` directory
    page.layout = "app";
  }

  return true;
};

plugins / app-client-only / gatsby-node.js

// Prefixes should be globs (i.e. of the form "/*" or "/foo/*")
const validatePrefixEntry = prefix => {
  if (!prefix.match(/^\//) || !prefix.match(/\/\*$/)) {
    throw Error(
      `Plugin "gatsby-plugin-client-only-paths" found invalid prefix pattern: ${
        prefix
      }`
    )
  }
}

exports.onCreatePage = ({ page, store, boundActionCreators }, { prefixes }) => {
  const { createPage, deletePage } = boundActionCreators
  const re = {}
  prefixes.forEach(validatePrefixEntry)

  return new Promise(resolve => {
    // Don't set matchPath again if it's already been set.
    if (page.matchPath || page.path.match(/dev-404-page/)) {
      resolve()
    }

    prefixes.some(prefix => {
      if (!re[prefix]) {
        // Remove the * from the prefix and memoize
        const trimmedPrefix = prefix.replace(/\*$/, ``)
        re[prefix] = new RegExp(`^${trimmedPrefix}`)
      }

      // Ensure that the path ends in a trailing slash, since it can be removed.
      const path = page.path.match(/\/$/) ? page.path : `${page.path}/`

      if (path.match(re[prefix])) {
        page.matchPath = prefix.replace(/\*$/, `:path`)
        if (path != '/app/') {
          // <<<<<<<<<<<<<<<<< here is my modification >>>>>>>>>>>>>>>>>>>>>>>
          // do not try to process on SSR, user needs to be logged to
          // consume GraphQL API and render `app` pages correctly
          deletePage(page)
          // <<<<<<<<<<<<<<<<< here is my modification >>>>>>>>>>>>>>>>>>>>>>>
        }
        // createPage(page)
        return true
      }

      return false
    })

    return resolve()
  })
}

따라서이 문제가 @KyleAMathews 와 100 % 관련되어 있는지 확실하지

pages / app / index.js :

import CreateSchedule from './components/CreateSchedule'
import ViewSchedule from './components/ViewSchedule'
...
  <ApolloProvider client={client}>
        <Provider store={store}>
          <Switch>
            <Route exact path="/app" component={CreateSchedule} />
            <Route path="/app/:id" component={ViewSchedule} />
          </Switch>
        </Provider>
      </ApolloProvider>

gatsby-node.js

exports.onCreatePage = async ({ page, boundActionCreators }) => {
  const { createPage } = boundActionCreators

  // page.matchPath is a special key that's used for matching pages
  // only on the client.
  if (page.path.match(/^\/app/)) {
    page.matchPath = '/app/:path'

    // Update the page.
    createPage(page)
  }
}

운없이 gatsby-plugin-create-client-paths 플러그인도 사용해 보았습니다.

내 CreateSchedule 구성 요소는 404ing 없이도 잘 작동합니다 : https://www.appointmentscheduler.org/app

ViewSchedule 경로 / 구성 요소에 문제가 있습니다 : https://www.appointmentscheduler.org/app/1b42d8e8-66b5-4a8d-a0b5-fd4bb13bed09

아 그리고 404는 빌드 된 후에 만 ​​발생합니다. 개발 서버에는이 문제가 없습니다.

어떤 아이디어?

@rozenmd 서버 라우팅이 필요합니다. netlify를 사용하는 경우 gatsby-plugin-netlify 을 (를) 설치할 수 있으며 자동으로 서버 라우팅 구성을 생성합니다 (netlify-identity-widget이 있음을 알 수 있습니다. 이것이 사이트를 제공하는 데 정확히 사용하고 있는지 확실하지 않습니다)

대박!
감사합니다 @pieh!
내가 사용한 netlify 스타터 (https://github.com/konsumer/gatsby-starter-bootstrap-netlify)에 gatsby-config.js에 'gatsby-plugin-netlify' 가)없는 것 같습니다.

그것을 추가하고 배포하면이 문제가 해결되었습니다 .😄

@KyleAMathews Gatsby를 사용할 때 잠재적으로 한 가지 추가 문제는 Gatsby의 전체 API를 한 번에 빠는 특성으로 인해 API가 호스팅되는 서버에서 503 (서비스 거부) 응답이 발생할 가능성입니다. 접근하다. 나는 현재 GoDaddy 호스팅에서 이것을 경험하고 있습니다. 'gatsby develop'을 실행하면 최대 동시 연결 제한에 즉시 도달하는 것 같습니다. 이것이 실제로 진행되고 있습니까? 로컬에서는 훌륭하게 작동하지만 (분리 된 Drupal> Gatsby) GoDaddy에서 호스팅 할 때는 작동하지 않습니다. 어떤 팁이라도 대단히 감사합니다.

@ cf73 GoDaddy DNS를 Netlify와 같은 Gatsby에 더 적합한 것으로 지정해 보셨습니까?

@rozenmd 를 명확히하기 위해 drupal 헤드리스 CMS는 GoDaddy에서 호스팅됩니다. Gatsby 사이트는 여전히 로컬에서 실행 중입니다. 그래서 내가 당신을 오해하지 않는 한, Netlify가 어떻게 도울 수 있는지 모르겠어요?

@ cf73 https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-drupal/src/gatsby-node.js는 아마도 어떤 종류의 대기열을 사용할 수 있습니다 (우리는 better-queue 다른 곳에서는) Promise.all 대신 동시 요청을보다 관리하기 쉬운 것으로 제한합니다. 구현할 수 있다고 생각하십니까?

@pieh yes 나는 더 나은 대기열의 사용을 보았고 괜찮은 솔루션처럼 들립니다. 그래도 내가 스스로 할 수는 없을 까봐 두렵다. 내가 작업중인 대형 클라이언트 프로젝트의 503 오류를 해결하려고 여기에서 우연히 우연히 발견했다. Gatsby를 사용하고 싶다. 마감일이 촉박하기 때문에 앞으로 몇 시간 또는 기껏해야 다음 날 정도에이 문제에 대한 해결 방법이 없다면 다른 접근 방식을 찾아야합니다. 누구든지이 문제를 해결하기 위해 즉시 할 수있는 작업 (필요한 경우 호스팅 전환 포함)을 제안 할 수 있습니까? 검증 된 drupal + 호스팅 + Gatsby 워크 플로가 있습니까?

@ cf73 마감일에 대해 느낍니다

@pieh 대단 할 것입니다, 감사합니다 !!

@KyleAMathews 저는 클라이언트 사이트에서 작업하는 동안 절박한 문제에 직면하고 있습니다. Stack은 Gatsby의 graphiql에 대한 Drupal JSON-API입니다. 노드에 인수를 전달할 수 없습니다 (첨부 참조). 내가 말할 수있는 한, 이것은 Gatsby의 Drupal 스키마가 완전히 구체화되지 않았기 때문입니까? 아니면 단계를 놓치고 있습니까? 긴급하고 많은 도움을 주셔서 감사합니다!

쿼리는 다음과 같아야합니다.

NodeArticle(id: { eq: GUID }) {
  id
  ...otherFields
}

ID로 allNodeArticle 를 필터링 할 수도 있지만 하나만 선택하는 경우 NodeArticle 직접 쿼리하는 것이 더 깔끔합니다.

@KyleAMathews 정말 감사합니다! 이것이 다루는 문서를 알려줄 수 있습니까? 나는 지금까지 이것을 보지 못했습니다 ... Gatsby가 Drupal과 대화하는 방식에 고유합니까, 아니면 방금 놓친 GraphQL의 핵심 표준 동작입니까? 소스 플러그인과 함께 이와 같은 소스 별 문서를 더 눈에 띄게 홍보하는 아이디어가 될 수 있습니까?

이것은 drupal 특정이 아닌 gatsby 핵심 기능 (루트 쿼리 수준 필터링 수행)입니다. 소스 플러그인은 graphql 스키마를 정의 할 수 없습니다. 이것은 플러그인이 제공하는 "원시"데이터를 기반으로 gatsby core가 수행하는 작업입니다.