Gatsby客户端路由疑问：客户端渲染页面仍能享用哪些特性？

好问题！我来帮你拆解一下Gatsby客户端专属路由的运作机制和需要注意的点：

• 首先，完全可以从静态组件的复用中获益！Gatsby的客户端专属路由是基于单页应用（SPA）模式运作的——当你在站点内导航到客户端路由页面时，整个React应用并不会重新加载，只是切换了页面组件。这意味着Header、Footer这类全局静态组件会保持挂载状态，不会被重新渲染或卸载，自然也就省去了重复初始化的开销。
• 字体方面也不用担心重新加载：浏览器会对已加载的字体资源进行缓存，只要你的字体文件路径和缓存策略设置合理（比如HTTP缓存头），客户端路由页面会直接复用已缓存的字体，不会再次发起请求。如果是用Gatsby的gatsby-plugin-web-font-loader这类插件加载字体，插件本身也会做字体预加载和缓存优化，进一步提升复用效率。

Gatsby的核心优势在于静态生成（SSG）和服务器端渲染（SSR）带来的性能与SEO提升，而客户端专属路由页面完全在浏览器端渲染，会失去这些关键特性：

• 静态生成/SSR的首屏优势：客户端路由页面不会在构建时生成静态HTML文件，用户首次访问时需要等待浏览器加载并执行对应的JS bundle后才能渲染页面内容，首屏加载速度会比静态生成的页面慢很多，也不利于搜索引擎爬虫抓取内容（虽然Google能处理JS渲染，但部分小众搜索引擎可能不行）。
• Gatsby数据层的便捷性：你无法在客户端路由页面中直接使用useStaticQuery、StaticQuery这类Gatsby专属的数据查询钩子，也不能通过gatsby-node.js的createPage API传递页面数据。所有数据获取都需要你手动实现，比如用fetch、axios等方式从API拉取，再在组件内处理状态。
• 自动优化的资源处理：Gatsby会自动对静态页面的图片（通过gatsby-image）、CSS、JS进行优化（比如图片压缩、代码分割、懒加载），但客户端路由页面的资源需要你自己手动配置优化策略，比如图片懒加载、自定义代码分割规则。
• 预加载与预取能力：Gatsby会自动预加载静态页面的链接资源，让导航几乎无延迟，但客户端路由页面不会自动触发预加载，需要你手动通过Link组件的prefetch属性或者自定义逻辑来实现。

针对客户端路由页面的性能，你需要重点关注以下几点：

• 控制bundle大小：客户端路由页面的JS bundle如果过大，会显著增加首屏加载时间。尽量拆分代码，避免把不必要的第三方库打包进去，使用Tree Shaking剔除无用代码。
• 优化数据获取：在组件挂载后发起数据请求时，要做好加载状态提示（比如骨架屏、加载动画），避免用户看到空白页面。同时可以实现数据缓存策略（比如本地存储、React Query），减少重复请求。
• 字体加载优化：即使字体不会重加载，也要确保字体加载策略合理，比如使用font-display: swap避免FOIT（无样式文本闪烁），或者通过link rel="preload"预加载关键字体。
• SEO补救措施：如果客户端路由页面需要被搜索引擎收录，可以考虑使用Gatsby的SSR模式渲染这些页面，或者采用预渲染（Prerendering）工具生成静态HTML。对于动态内容，也可以使用react-helmet设置页面元数据，帮助爬虫识别页面内容。
• 保持路由跳转流畅性：务必使用Gatsby的Link组件来跳转客户端路由，而不是原生的<a>标签，这样能避免页面刷新，保持SPA的流畅体验。

内容的提问来源于stack exchange，提问作者userjmillohara