Gatsby：为什么本地服务器与生产构建的站点呈现不同？

Question

我正在尝试使用其中一个入门模板与 Gatsby 创建一个 React 站点。我已经大量定制了 Gatsby 启动器。我有一些私人路线，我限制为登录用户。这些内部页面似乎在本地开发服务器（gatsby develop）上完美呈现，并且当我第一次运行 gatsby build 和 gatsby serve 时它们似乎呈现良好，但是当我点击它们时，我的标题和其余部分网站内容被截断（例如，甚至不可用，甚至无法向上滚动到标题和顶部内容，它根本不会返回到屏幕）。我试图弄清楚为什么会发生这种关闭行为以及为什么它似乎只出现在生产版本中。我在 gatsby develop 中没有看到类似的结果。

我一直在用一个页面和一个为客户端路由设置的到达路由器构建我的站点，并认为我的路由（包括默认的未找到页面）可能会导致问题，但删除它并没有解决问题。我还创建了一个固定位置的标题，并认为这可能是问题，但是当我将标题设为相对而不是固定到屏幕顶部时，它似乎没有解决它。

我想将此问题重定向到至少我可以准确描述的内容...当我的页面呈现时，它会显示一个名为“未找到”的 CSS 类的 div，它仅在没有路由匹配时显示我的路由器，而是将我的有效组件（例如仪表板）包装在此 div 中以查找未找到，即使这不是预期的设计......当我重新加载时，我在其余部分之前看到未找到页面的快速闪烁呈现...我也不希望“未找到”出现在有效页面上...您能看到我的结构中有什么会导致这种情况吗？

我的 index.js 盖茨比页面：

import React from "react";

import App from '../components/App';
import { Helmet } from 'react-helmet';
import Amplify from 'aws-amplify';

Amplify.configure({
    Auth: {

        // REQUIRED - Amazon Cognito Region
        region: 'us-east-1',

        // OPTIONAL - Amazon Cognito User Pool ID
        userPoolId: '***********',

        // OPTIONAL - Amazon Cognito Web Client ID (26-char alphanumeric string)
        userPoolWebClientId: '*******************'
    }
});


const IndexPage = () => (
    <div>
        <App>
            <Helmet>
                <title>Clean up your cloud</title>
            </Helmet>
        </App>
    </div>
)

export default IndexPage;

我的 app.js 盖茨比页面：

import React from "react"
import { Router } from "@reach/router"
import { Provider } from 'react-redux'

import Login from "../components/Login"
import SignUp from "../components/SignUp"
import PrivateRoute from "../components/PrivateRoute"
import Dashboard from '../components/Dashboard';
import RulesPage from '../components/RulesPage';
import AccountsPage from '../components/AccountsPage'
import Features from '../components/Features'
import Home from '../components/Home'
import Pricing from '../components/Pricing'
import SupportPage from '../components/SupportPage'
import Settings from '../components/Settings'
import Docs from '../components/Docs';
import NotFound from '../components/NotFound';
import Users from '../components/Users';
import History from '../components/History';

import store from '../store'

const App = () => (
    <Provider store={store}>
        <Router>
            <Home path="/" />
            <PrivateRoute path="/app/dashboard" component={Dashboard} />
            <PrivateRoute path="/app/rules" component={RulesPage} />
            <PrivateRoute path="/app/accounts" component={AccountsPage} />
            <PrivateRoute path="/app/users" component={Users} />
            <PrivateRoute path="/app/settings" component={Settings} />
            <PrivateRoute path="/app/support" component={SupportPage} />
            <PrivateRoute path="/app/history" component={History} />
            <Login path="/app/login" />
            <SignUp path="/app/signup" />
            <Features path="/app/features" />
            <Pricing path="/app/pricing" />
            <Docs path="/app/docs" />
            <NotFound default />
        </Router>
    </Provider>
  )

  export default App;

Answer 1

基本上，gatsby develop 在您的 IDE/代码编辑器和浏览器之间打开websocket 通信，而不是一目了然地构建和组装所有资产，只是重现工作环境的最低限度。

gatsby develop 在后台运行服务器，启用实时重新加载和 Gatsby 的数据浏览器等有用功能。它针对快速反馈和额外的调试信息进行了优化。

当您将最后的润色添加到您的网站并且一切看起来都很棒时，应该运行 Gatsby 的构建命令。 gatsby build 创建一个具有生产就绪优化的站点版本，例如打包站点的配置、数据和代码，并创建所有静态 HTML 页面，这些页面最终会重新水合到 React 应用程序中。该过程可能会导致两种环境之间的行为不同。

由于 webpack 顺序问题，在 develop（不那么严格）下工作的东西甚至可能无法在构建模式下编译。

您可以在Overview of Gatsby Build Process 中查看更多信息（和游乐场）。