在 Next.js 中根据屏幕尺寸渲染不同的组件

Question

我试图根据屏幕宽度 < 768p 来以不同方式渲染组件。

如果小于 768p，则加载汉堡菜单。如果没有，则加载整个菜单。

这是我使用的代码。问题是，当页面首次加载时，我无法观察到变化。但是当我将浏览器屏幕缩小然后将其增加到原始大小时；效果发生。

我认为这是因为 React 是在服务器端渲染的。但仍然不明白为什么它会通过将屏幕变小然后再变大来起作用。

import "twin.macro"
import { Global, css } from "@emotion/core"

import { useState, useEffect } from "react"

const Navbar = () => {
  const useWindowDimensions = () => {
    const hasWindow = typeof window !== "undefined"

    function getWindowDimensions() {
      const width = hasWindow ? window.innerWidth : null
      const height = hasWindow ? window.innerHeight : null
      return {
        width,
        height,
      }
    }

    const [windowDimensions, setWindowDimensions] = useState(
      getWindowDimensions()
    )

    useEffect(() => {
      if (hasWindow) {
        function handleResize() {
          setWindowDimensions(getWindowDimensions())
        }

        window.addEventListener("resize", handleResize)
        return () => window.removeEventListener("resize", handleResize)
      }
    }, [hasWindow])

    return windowDimensions
  }

  const { height, width } = useWindowDimensions()
  const breakpoint = 768

  return (
    <div>
      {width <= breakpoint ? (
        <div>
          <HamburgerMenu />
        </div>
      ) : (
        <div>
           <FullMenu />
        </div>
  )
}

export default Navbar

有没有办法强制 Next.js 应用程序在第一次渲染时应用效果？

Answer 1

Next.js 是通用的，这意味着它首先在服务器端执行代码，然后在客户端执行代码。窗口对象仅存在于客户端

所以第一次它无法访问window，所以 的windowDimensions值为null

当您调整大小时，您会更改状态，使您的应用程序重新渲染，因此它变成客户端渲染=>您可以访问 window ，然后您的代码可以工作