让反应生成的静态(SEO)“公共”前端与CRA“私有”应用并存的最佳方式是什么？

Question

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

关于如何最好地拆分这个项目，有什么建议吗？

Answer 1

如果你没有使用GraphQL的东西，Gatsby主要是使用React SSR和一个自定义的带有Reach路由器的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等人的代码。