Gatsby: 使用gatsby.js构建应用程序：有哪些缺点？

感谢您的反馈，@ barbush。 我没有意识到68个字会太多。

标题基本上说明了所有问题：使用gatsby.js构建应用程序时有哪些弊端？

我知道有可能构建一个应用程序。 我的问题是-由于gatsby.js针对静态网站生成进行了优化-有哪些缺点？ 以后有什么事要咬我吗？
似乎对我来说很具体。

哇哇哇哇真的不希望您监管这样的问题。 如果这是一个可怕的问题（不是），那么最好忽略它，然后告诉对方。 请不要再回答这样的问题。

@推注您的问题。 Gatsby的设计与创建React App和其他Webpack / React设置非常相似。 因此，它完全可以用于构建Web应用程序。 如果您查看examples目录，则有一个redux示例。 据报道，人们已经在阿波罗上成功使用了它。 继电器无法与gatsby一起使用，因为我们的graphql用法与其冲突，但是我敢肯定，将来这将很容易解决。

我知道的主要缺点是，它确实会假设您正在构建“页面”，因此，如果您要构建更多没有页面的简单应用程序，那么它不会给您太多好处，而且还会在一定程度上限制您的自由度。 在这种情况下，最好使用更原始的设置（例如CRA）。

但是，如果您要构建“页面”，那么gatsby会很棒，因为您会获得自动代码拆分和静态SSR以便快速启动应用程序。

我很乐意在某个时候写一个更正式的权衡文件，但同时也很高兴在这里提问。

@KyleAMathews ：谢谢，这正是我想要的。

我打算创建一个内容驱动的网站（博客，销售页面，文档等），为简单起见，我想在同一域中托管一些小型单页应用程序。

看起来盖茨比是最理想的选择。

也会限制你的自由

对于我的用例来说，这可能没有问题，但是您能告诉我我可以期待哪些限制，以及解决这些限制有多困难？

感谢创建Gatsby，顺便说一句，Gatsby看起来真的很棒！ :)

但是您能告诉我我可以期待哪些限制，以及解决这些限制有多困难？

Gatsby尝试尽可能简单和谦虚，因此您可能不应该遇到限制，尤其是当您在做内容/页面网站时，这正是Gatsby的目的。

Gatsby旨在将Web应用程序和网站构想融为一体，以创建理想的开发和生产工具，以便尽可能轻松地构建真正的快速网站。

仅当您想以超出“页面”模型的方式使用React时才会遇到麻烦，例如更多自由格式的应用程序。 但即使在那儿，盖茨比（Gatsby）都有一个逃生孔，可让您轻松将应用程序嵌入更大的网站https://www.gatsbyjs.org/docs/creating-and-modifying-pages/#creating -client-only-routes

听起来很完美，再次感谢！

嗨@KyleAMathews和@bolus

在这里评论背景BC，而不是打开一个新问题heheh

如果在我的/app （这是一条仅用于客户端的路由），我想创建一个SPA（登录/注销/仪表板），我想我需要在其中创建一个新的路由器，对吗？

在这个用例@KyleAMathews中，您有什么建议？ 还是像您所说的那样使用“更多香草方法”会更好？

谢谢

@fernandes结帐https://www.gatsbyjs.org/docs/creating-and-modifying-pages/#creating -client-only- routes-如果您还有其他问题，请告诉我们！

嗨， @KyleAMathews谢谢您的快速回复

我整个星期六都在盖茨比（Gatsby）玩，检查了这个示例，然后重新做一个。

我想做的是，获取我的信息： https : /app作为仅客户端路径

该样板由以下组成：
react / redux（带热重载）/ react router redux

我对JS不太了解； 也许只是我想念的一个细节..再次感谢您！

您不能将盖茨比放进反应样板之类的东西。 Gatsby希望处理构建并运行该站点。 取而代之的是，将“ app”部分放入Gatsby中。

是的，这就是我的意思。。。gatsby处理我所有的网站及其页面，并且react-boilerplate进入gatsby在/app之下作为仅客户端路由...在这种情况下（考虑到它的堆栈，特别是react-router-redux）？

Gatsby已经处理了所有webpack / Babel / other配置，因此不需要bootstrap项目。

@KyleAMathews我想出了如何使

@KyleAMathews我在这里面临一个小问题，我在仅客户端页面内使用graphql apollo客户端，但是它们仅用于客户端（一旦您需要登录），但是Gatsby尝试生成索引文件在建造; 当然会导致错误

关于如何跳过此HTML创建的任何建议？

更新：
我正在使用https://www.gatsbyjs.org/packages/gatsby-plugin-create-client-paths/

我创建了一个基于page.path deletePage插件，它可以正常工作...不确定这是否是最好的方法，但是适用于我的用例😄（是的，现在我需要创建nginx上的重定向规则始终发送到我的app/index.html ，但这正是我对以前的应用所做的...

我越来越习惯盖茨比，并需要承认我很高兴我做的每一个进步...真棒工作@KyleAMathews！ 👏

@KyleAMathews很抱歉在这里打扰您，但是它似乎是一个询问客户端路由的好地方，因为我

因此，对于我的用例，我正在从firebase中读取数据，但是在构建时该数据并非全部可用，因为用户可以对其进行修改。

因此，在Gatsby Page（例如：/ podcasts）中，我可以轻松地从cDM中的firebase查询数据。 但是，然后我想转到详细信息页面（例如：/ podcast /：id），在那里我有点迷路了。 我应该尝试将该路由委托给客户端路由吗？

据我了解， /app的想法是要有一个可以在其中放置SPA的地方，但这似乎对我尝试做的事情有些过头了。

谢谢您在盖茨比工作，这是一个很棒的经历:)

@gafemoyano为/podcast/:id创建一条路由完全有意义，如果用户在做事时会创建播客。 缺点之一是，由于现在服务器渲染HTML为他们加载，因此直接访问播客页面的人们的TTFP速度变慢。 您也许也可以做一个混合-静态渲染在构建时存在的播客页面，然后在人们制作时在浏览器中即时创建更多内容。

此页面上的内容有趣—我在Gatsby https://www.gatsbyjs.org/docs/building-apps-with-gatsby/上构建应用程序时写了这个新的文档页面

嘿@KyleAMathews，因为这已经成为官方的“客户端问题”，

可能与https://github.com/gatsbyjs/gatsby/issues/3444有关

您评论了要存储在https://github.com/gatsbyjs/gatsby/issues/3260#issuecomment -352856214上的键/值缓存api，也许如果我们具有布局+页面内容以确保没有任何更改（关于数据和视觉）

@KyleAMathews谢谢您的答复！ 所以让我看看我是否理解正确。 方法是委派要渲染的客户端代码的路径，对吗？ 因此，我不应该尝试在gatsby-node.js中静态定义路由，例如：

` // 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是用于匹配页面的特殊键
//仅在客户端上。
如果（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并呈现PodcastDetails，在哪里可以访问路径的：id部分以获取组件中的数据？

抱歉让您遇到这种简单的情况，我只是无法通过现有示例弄清楚。 如果人们对gatsby所做的事情相当普遍，也许我们应该为混合应用程序提供一个示例？ 如果需要，我愿意提供帮助。

再次感谢您花费时间构建和支持该库@KyleAMathews 。

示例中路径的app部分是任意的。 您可以使用所需的任何名称，例如podcasts 。

一个示例站点将是很棒的:-)希望很快就会有时间。 邀请其他已解决此问题的人分享一些示例代码！

我试过了，这里有一些示例代码

但是我仍然有一些问题。
我在这里描述的一个
简而言之，当我进行生产并进入/app/目录下的路径（例如localhost:9000/app/posts/1并刷新浏览器时，我得到一个404空白页。
当我在localhost:9000/app/刷新页面时，它可以正常工作。
也许我的prefixes配置为gatsby-plugin-create-client-paths是错误的。

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

另一个问题是（不确定是否是问题），我无法用<BrowserRouter>来包装<Route /> <BrowserRouter> 。
当我进行生产构建（开发工作正常）时，我收到一条错误消息：“浏览器历史记录需要DOM”，我相信这是因为Gatsby在Node环境中运行，并且没有浏览器，因此没有window等。

最后，我删除了<BrowserRouter>包装，它可以正常工作。
我是React的新手，所以我不确定这是否是解决问题的合适方法。

希望得到一些帮助:)

@danielemesh嗨，丹尼尔。 我还没有时间恢复对gatsby应用程序的工作，但是从您的源代码中可以看到，您已经将/app/*目录放在/pages 。
我不确定这应该去哪里，我会尝试将其放在src/目录中。

让我知道它是否有效！

干杯!

@gafemoyano尝试过，没有用:(
盖茨比不会认出..

谢谢！

我遇到了一些插件，因此决定写我的插件（从原始插件中借用了100％），所以幸运的是，我可以解决我的问题并学习如何编写gatsby插件

我从一个应用程序中提取了数据，希望它有助于解决您的问题，问题是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/*`] },
    },
  ],

插件/应用布局/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()
  })
}

因此，我不确定此问题是否与100％相关@KyleAMathews ，但是无论我做什么，最初都是我的仅客户端路径404，然后它开始加载（用户离开后才开始加载）

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可能会

@ cf73您是否尝试将GoDaddy DNS指向更适合Gatsby的东西，例如Netlify？

@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是的，我看到了更好队列的使用，听起来像是一个不错的解决方案。 恐怕我自己还是不敢做-我偶然在这里尝试解决我正在从事的一个大型客户项目的503错误，我很想使用Gatsby。 截止日期很紧，所以如果在接下来的几个小时内或最多第二天左右都无法解决此问题，我将不得不寻找另一种方法。 谁能建议我可以立即做些什么（包括在需要时切换主机）来解决这个问题？ 是否有经过验证的drupal +托管+ Gatsby工作流程？

@ cf73我觉得您有最后期限-如果您可以为您的drupal站点共享配置，那么我将有站点来测试更改（在此处公开或在不和谐中私下

@pieh太棒了，谢谢！

@KyleAMathews在客户端站点上工作时，我面临着一个绝望的问题，我敢肯定这很容易，但我缺少一些东西。 堆栈是Gatsby的graphiql的Drupal JSON-API。 它不允许我将参数传递给节点（请参阅附件）。 据我所知，这是因为盖茨比的Drupal模式没有被充实吗？ 还是我错过了一步？ 任何紧急的帮助，非常感谢！

查询应为：

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

您也可以按ID过滤allNodeArticle ，但如果只选择一件事，则直接查询NodeArticle更清洁。

@KyleAMathews非常感谢您！ 您能指出涵盖本文的任何文档吗？ 到目前为止，我还没有遇到过……这是盖茨比与Drupal对话的独特之处，还是我刚刚错过的GraphQL的核心标准行为？ 可能会在源代码插件旁边更明显地推广诸如此类的任何特定于源代码的文档吗？

这是gatsby的核心功能（过滤完成的根查询级别），而不是drupal特有的。 源插件无法定义graphql模式-这是gatsby core根据插件提供的“原始”数据执行的任务。