Gatsby的客户端路由-客户端呈现的页面仍可从哪些Gatsby功能中受益？

Question

我建立了一个小型网站，该网站使用gatsby生成静态内容，但是对于某些需要在客户端呈现的内容，我正在使用client-only routes in gatsby。

我不确定我是否完全理解它的工作原理-假设我使用的是 Header ， Footer 和 font 在我的静态站点中。在仅限客户的路由上，我使用相同的 Header ， Footer 和 font 。 以前在我的静态组件中使用过这些元素会完全受益吗？例如，是重新加载字体吗？

基本上，我想知道我的客户端站点内容现在失去了哪些盖茨比功能，以及我可能还要注意的事情，因为盖茨比将不再为我处理这个问题。尤其是在页面速度方面。

Answer 1

是的，您应该已经使用这些组件和字体而受益。

正在重用的React组件已经在您已交付给用户的JS捆绑包中，不需要再次获取。字体文件也一样-但这些都是资产文件-不在JS捆绑包中。

查看正在获取的内容的最佳方法是在浏览器中对其进行测试。

1. 加载静态页面
2. 在开发工具中打开“网络”标签
3. 导航到仅客户端页面并检查网络活动

虽然这些资产不应该被提取两次，但我可以想象某些情况下，错误的设置会将它们提取两次-所以最好是仔细检查。

Answer 2

在静态地使用这些元素后，我会从中受益吗？ 以前是组件？

答案是肯定的。盖茨比（Gatsby）与@reach/router一起在引擎盖下工作，因此无论您是否使用仅客户端路由，您都可以从中受益。

换句话说，使用仅客户端路由的最棘手的部分是内部路由，对于您的站点，在这种情况下，由于盖茨比从@reach/router扩展而来，因此它会在内部处理路由，因此共享组件（页眉，页脚等）将仅按需呈现，并且会在您的网站上共享，无论是仅客户端路由还是静态页面。

我想知道我的客户端内容的盖茨比功能是什么 现在就输了，我可能还要再做些什么，因为 盖茨比不再为我处理此事。特别是在 页面速度。

总结很多，在页面加载时，@reach/router会查看嵌套在prop下的每个组件的路径<Router />，然后选择一个呈现最匹配window.location的组件。因此，您将仅按需呈现所需的代码。

就页面速度而言，您的网站将不会受到影响，因为一旦构建完成，该网站将保持“静态”并预安装。使用纯客户端路由（如果您要说的话）的唯一“负”部分是SEO部分，因为它们不会被Google拦截，但这就是为什么在大多数情况下使用纯客户端路径的原因您不希望将这些页面编入索引的情况。