reactjs - Gatsby 应用程序在移动设备上是 SPA，在桌面上有不同的路由

Question

📖 总结

最近我的团队开始了一个登陆页面的项目，我们选择使用 Gatsby 以获得良好的 SEO。
在我们的项目中，设计师将移动布局更改为 SPA，而桌面布局仍然具有不同的路线和页面。

引用那个例子:




由于 Gatsby 在构建时创建页面，我们不知道环境是移动的还是桌面的，因此很难思考处理这种行为的方式。

🐛 解决方法

我们团队认为暂时解决该问题的一种快速方法是 map部分之间和隐藏比在桌面屏幕中。
最大的问题是:在页面的第一次加载时，内容几乎需要一秒钟才能加载，因为它不再是静态的。

      <div>
        {
          breakpoints.md
            ? pages.map((page) => renderPage(page))
            : renderPage(selectedPageRef.current)
        }
      </div>

🚀 目标

我想讨论一种解决方案，该解决方案将改变桌面和移动页面的行为，而不会破坏应用程序的 SEO。

Answer 1

如果您不能使用 mediaqueries 解决并且您必须显示两个不同的组件而不是相同的样式。解决此问题的解决方法是检查 window 是什么在渲染时调整大小并显示一种布局或另一种布局。它会在显示标题之前创建最小延迟(如果缓存则无关紧要)，但这是我能够猜测的唯一方法。

因此，在 <Layout> 中使用 Gatsby 的默认结构组件你应该有这样的东西:

return (
    <>
      <Header siteTitle={data.site.siteMetadata.title} />
      <div>
        <main>{children}</main>
        <footer>
          © {new Date().getFullYear()}, Built with
          {` `}
          <a href="https://www.gatsbyjs.org">Gatsby</a>
        </footer>
      </div>
    </>
  )

因此，在您的 <Header> 中组件你应该检查你的 window调整大小并渲染一个或另一个组件:

export const Header = (props) => {
  let currentWidth;

  if (typeof window !== 'undefined') currentWidth = useWindowWidth();

  return typeof window !== 'undefined' ? currentWidth >= 768 ? <DesktopPane /> : <MobilePane /> : null;
};

如您所见，在返回中我检查是否 window在三元链条件下定义。如果 window未定义(即:是 undefined)它返回一个 null .如果已定义，它会检查当前窗口的宽度 ( currentWidth ) 并且还有另一个显示移动或桌面菜单的三元条件。

作为最佳实践，链接的三元组不是最干净的解决方案，它们难以阅读和维护，但就目前而言，该解决方案有效(当然必须重构)。

在这种情况下， useWindowWidth()是一个自定义钩子(Hook)，在每个 window 中计算大小，但你可以使用任何你喜欢的。看起来像:

import {useEffect, useState} from 'react';

const getWidth = () => window.innerWidth
  || document.documentElement.clientWidth
  || document.body.clientWidth;

export const useWindowWidth = () => {
  let [width, setWidth] = useState(getWidth());

  useEffect(() => {
    let timeoutId = null;
    const resizeListener = () => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => setWidth(getWidth()), 150);
    };
    window.addEventListener('resize', resizeListener);
    return () => {
      window.removeEventListener('resize', resizeListener);
    };
  }, []);

  return width;
};

代码提供者: https://usehooks.com/useWindowSize/

请注意，在 Gatsby 的项目中检查 window 是否正常是很常见的。是 !==比 undefined由于你争论的观点。在编译/构建点尚未定义。您可以查看有关 Debugging HTML Builds in their documentation 的更多信息.