Next.JS - 当检查 window == undefined 时出错：因为初始UI与在服务器上呈现的不匹配而导致的水合失败

Question

Next.JS - 当检查 window == undefined 时出错：因为初始UI与在服务器上呈现的不匹配而导致的水合失败

3

我遇到了以下错误：

由于初始UI与服务器端呈现的不匹配，导致水合失败。

我正在使用 getServerSideProps，在我的页面中，我检查是否在浏览器中 (window=='undefined')，然后相应地返回内容：

export default function Page() {
  const { data: session } = useSession()

  if (typeof window == 'undefined') return null

  if (session) {
    return (
      <div>
        <h1>Protected Page</h1>
        <p>You can view this page because you are signed in.</p>
      </div>
    )
  }
  return <p>Access Denied</p>
}

但是这里的这一行

if (typeof window == 'undefined') return null

似乎出现了问题。当注释掉这行代码时，一切都正常。

服务器端返回的内容与客户端返回的内容不同，但我不太明白应该如何解决这个问题，以及为什么会出现这个问题？

我进行此检查是“因为我只想在客户端渲染此页面”，并且当我有一个会话时才进行渲染。难道我理解错了吗？

- antonwilhelm

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- opensorcio · Accepted Answer

SSR的目的是在服务器上预渲染页面。如果在服务器上您的页面始终呈现为null，则无需使用SSR。

如果您只想在会话存在时预渲染页面，则必须在getServerSideProps中检查服务器上的会话。

如果您在页面组件内部检查会话，则检查是在客户端上执行的，因此不需要使用getServerSideProps。

以下是我其中一个项目中使用NextAuth管理身份验证的示例：

import { getSession } from 'next-auth/client';

// ...your page component here...

export async function getServerSideProps(context) {

  const session = await getSession({ req: context.req });

  if (session) {
    return { props: { session } };
  }
  else {
    return {
      redirect: {
        destination: '/auth',
        permanent: false,
      }
    };
  }
}

在这个代码片段中，服务器会检查用户的会话状态。
如果会话存在，则可以通过组件的props访问它。
如果会话不存在，则用户将被重定向到认证页面。

PS：我刚刚查看了文档，发现导入方式已更改为'next-auth/react'（顺便说一下，在服务器上使用/client是具有误导性的，更好的方式是使用'next-auth/react'）。