如何使用 Next.js 检测 React SSR App 上的设备？

Question

在一个网络应用程序上，我想显示两个不同的菜单，一个用于移动设备，一个用于桌面浏览器。我将 Next.js 应用程序与服务器端渲染和库 react-device-detect 一起使用。

这是 CodeSandox 链接。

 import Link from "next/link";
import { BrowserView, MobileView } from "react-device-detect";

export default () => (
  <div>
    Hello World.{" "}
    <Link href="/about">
      <a>About</a>
    </Link>
    <BrowserView>
      <h1> This is rendered only in browser </h1>
    </BrowserView>
    <MobileView>
      <h1> This is rendered only on mobile </h1>
    </MobileView>
  </div>
);

如果您在浏览器中打开它并 切换到移动 视图并查看控制台，您会收到此错误：

警告：文本内容不匹配。服务器：“仅在浏览器中呈现”客户端：“仅在移动设备上呈现”

发生这种情况是因为服务器的渲染检测到浏览器，而在客户端，他是移动设备。我发现的唯一解决方法是同时生成并使用 CSS，如下所示：

 .activeOnMobile {
  @media screen and (min-width: 800px) {
    display: none;
  }
}

.activeOnDesktop {
  @media screen and (max-width: 800px) {
    display: none;
  }
}

而不是图书馆，但我真的不喜欢这种方法。有人知道直接在反应代码中处理 SSR 应用程序上的设备类型的良好做法吗？

原文由 Benjamin Sx 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

最近更新：

因此，如果您不介意在客户端执行此操作，则可以使用下面一些人建议的动态导入。这将适用于您使用静态页面生成的用例。

我创建了一个组件，它通过所有 react-device-detect 导出作为道具（明智的做法是只过滤掉所需的导出，因为这样不会摇晃）

 // Device/Device.tsx

import { ReactNode } from 'react'
import * as rdd from 'react-device-detect'

interface DeviceProps {
  children: (props: typeof rdd) => ReactNode
}
export default function Device(props: DeviceProps) {
  return <div className="device-layout-component">{props.children(rdd)}</div>
}

 // Device/index.ts

import dynamic from 'next/dynamic'

const Device = dynamic(() => import('./Device'), { ssr: false })

export default Device

然后当您想使用该组件时，您可以这样做

const Example = () => {
  return (
    <Device>
      {({ isMobile }) => {
        if (isMobile) return <div>My Mobile View</div>
        return <div>My Desktop View</div>
      }}
    </Device>
  )
}

---

就我个人而言，我只是使用一个钩子来做到这一点，虽然最初的 props 方法更好。

 import { useEffect } from 'react'

const getMobileDetect = (userAgent: NavigatorID['userAgent']) => {
  const isAndroid = () => Boolean(userAgent.match(/Android/i))
  const isIos = () => Boolean(userAgent.match(/iPhone|iPad|iPod/i))
  const isOpera = () => Boolean(userAgent.match(/Opera Mini/i))
  const isWindows = () => Boolean(userAgent.match(/IEMobile/i))
  const isSSR = () => Boolean(userAgent.match(/SSR/i))
  const isMobile = () => Boolean(isAndroid() || isIos() || isOpera() || isWindows())
  const isDesktop = () => Boolean(!isMobile() && !isSSR())
  return {
    isMobile,
    isDesktop,
    isAndroid,
    isIos,
    isSSR,
  }
}
const useMobileDetect = () => {
  useEffect(() => {}, [])
  const userAgent = typeof navigator === 'undefined' ? 'SSR' : navigator.userAgent
  return getMobileDetect(userAgent)
}

export default useMobileDetect

我遇到了滚动动画在移动设备上很烦人的问题，所以我制作了一个基于设备的启用滚动动画组件；

 import React, { ReactNode } from 'react'
import ScrollAnimation, { ScrollAnimationProps } from 'react-animate-on-scroll'
import useMobileDetect from 'src/utils/useMobileDetect'

interface DeviceScrollAnimation extends ScrollAnimationProps {
  device: 'mobile' | 'desktop'
  children: ReactNode
}

export default function DeviceScrollAnimation({ device, animateIn, animateOut, initiallyVisible, ...props }: DeviceScrollAnimation) {
  const currentDevice = useMobileDetect()

  const flag = device === 'mobile' ? currentDevice.isMobile() : device === 'desktop' ? currentDevice.isDesktop() : true

  return (
    <ScrollAnimation
      animateIn={flag ? animateIn : 'none'}
      animateOut={flag ? animateOut : 'none'}
      initiallyVisible={flag ? initiallyVisible : true}
      {...props}
    />
  )
}

更新：

因此，在进一步深入兔子洞之后，我想出的最佳解决方案是在 useEffect 中使用 react-device-detect，如果您进一步检查设备检测，您会注意到它导出通过 ua-parser-js 设置的 const --- 库

export const UA = new UAParser();

export const browser = UA.getBrowser();
export const cpu = UA.getCPU();
export const device = UA.getDevice();
export const engine = UA.getEngine();
export const os = UA.getOS();
export const ua = UA.getUA();
export const setUA = (uaStr) => UA.setUA(uaStr);

这导致初始设备是导致错误检测的服务器。

我分叉了 repo 并创建并添加了一个 ssr-selector ，它要求你传入一个用户代理。这可以使用初始道具来完成

更新：

由于 Ipads 没有提供正确或定义得足够好的用户代理，请参阅这个 问题，我决定创建一个挂钩来更好地检测设备

import { useEffect, useState } from 'react'

function isTouchDevice() {
  if (typeof window === 'undefined') return false
  const prefixes = ' -webkit- -moz- -o- -ms- '.split(' ')
  function mq(query) {
    return typeof window !== 'undefined' && window.matchMedia(query).matches
  }
  // @ts-ignore
  if ('ontouchstart' in window || (window?.DocumentTouch && document instanceof DocumentTouch)) return true
  const query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join('') // include the 'heartz' - https://git.io/vznFH
  return mq(query)
}

export default function useIsTouchDevice() {
  const [isTouch, setIsTouch] = useState(false)
  useEffect(() => {
    const { isAndroid, isIPad13, isIPhone13, isWinPhone, isMobileSafari, isTablet } = require('react-device-detect')
    setIsTouch(isTouch || isAndroid || isIPad13 || isIPhone13 || isWinPhone || isMobileSafari || isTablet || isTouchDevice())
  }, [])

  return isTouch

因为我每次调用该钩子时都需要该包，所以更新了 UA 信息，它还修复了 SSR 不同步警告。

原文由 Paul van Dyk 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我认为你应该通过在你的页面中使用 getInitialProps 来做到这一点，因为它同时在服务器和客户端上运行，并通过首先检测你是否只是在获取网页请求来获取设备类型（所以你仍然在服务器），或者如果你正在重新渲染（所以你在客户端）。

 // index.js

IndexPage.getInitialProps = ({ req }) => {
  let userAgent;
  if (req) { // if you are on the server and you get a 'req' property from your context
    userAgent = req.headers['user-agent'] // get the user-agent from the headers
  } else {
    userAgent = navigator.userAgent // if you are on the client you can access the navigator from the window object
  }
}

现在您可以使用正则表达式来查看设备是移动设备还是桌面设备。

 // still in getInitialProps

let isMobile = Boolean(userAgent.match(
  /Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i
))

return { isMobile }

现在您可以访问将返回 true 或 false 的 isMobile 道具

const IndexPage = ({ isMobile }) => {
  return (
    <div>
     {isMobile ? (<h1>I am on mobile!</h1>) : (<h1>I am on desktop! </h1>)}
    </div>
  )
}

我从这里的 这篇文章中 得到了这个答案，希望对您有所帮助

更新

从 Next 9.5.0 开始， getInitialProps 将被 getStaticProps 和 getServerSideProps 取代。而 getStaticProps 用于获取静态数据，将用于在构建时创建 html 页面， getServerSideProps 在每个请求上动态生成页面，并接收 context 使用 req 道具的对象就像 getInitialProps 一样。不同之处在于 getServerSideProps 不会知道 navigator ，因为它只是服务器端。用法也有点不同，因为您必须导出一个异步函数，而不是在组件上声明一个方法。它会这样工作：

 const HomePage = ({ deviceType }) => {
let componentToRender
  if (deviceType === 'mobile') {
    componentToRender = <MobileComponent />
  } else {
    componentToRender = <DesktopComponent />
  }

  return componentToRender
}

export async function getServerSideProps(context) {
  const UA = context.req.headers['user-agent'];
  const isMobile = Boolean(UA.match(
    /Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i
  ))

  return {
    props: {
      deviceType: isMobile ? 'mobile' : 'desktop'
    }
  }
}

export default HomePage

请注意，由于 getServerSideProps 和 getStaticProps 是互斥的，您需要放弃 getStaticProps 提供的 SSG 优势 – 设备类型才能知道用户。如果您只需要处理几个样式细节，我建议不要将 getServerSideProps 用于此目的。如果页面的结构根据设备类型有很大不同，那也许是值得的

原文由 Dylanbob211 发布，翻译遵循 CC BY-SA 4.0 许可协议