0

我一直在使用 Create-React-App 并挖掘整个设置，基本上我希望继续使用 JSX 进行开发，而不是切换到 Gatsby/React-Static 的 Markdown/etc 编码风格。与这个关于 Gatsby 的问题类似。我正在寻找由 Gatsby 或 react-static 生成的搜索引擎优化的静态“公共”前端（例如产品页面、博客等）。但我也想要一个典型的客户端渲染的“私人”部分的 React 应用程序（例如，卖家可以编辑他们的产品页面）。我知道你可以设置“主页”，所以我正在考虑将私人部分设置为“example.com/in/”或类似的。

关于如何最好地拆分这个项目的任何建议？

4

1 回答 1

0

如果你不使用 GraphQL 的东西，Gatsby 主要只是使用 React SSR 和带有 Reach Router 的自定义 webpack 配置和一些胶水将它们粘在一起。

您绝对可以拥有一个单独的 Webpack 配置来输出到您的public文件夹并设置您的主机/部署以将所有非静态路由路由到您的应用程序条目。

您还可以使用 Gatsby 生成所有具有多汁客户端提取的动态页面，并且您基本上可以获得每个页面的免费静态骨架入口点，如下所示：

const useMounted = () => {
  const [isMounted, setIsMounted] = useState(false)
  useEffect(() => {
    setIsMounted(true)
  }, [])
  return isMounted
}

const SomeComponent = props => {
  const isMounted = useMounted()

  return isMounted
    ? <div>Mounted client-side component</div>
    : <SomeComponentSkeleton />
}

null实际上，这只是防止了在服务器端渲染返回然后在客户端返回组件时发生的水合问题。您还可以使用isMounted启动任何使用window等的代码。

于 2020-05-04T23:36:07.310 回答