next.js-检查窗口时错误== undefined：水合失败，因为初始UI与服务器上呈现的内容不匹配

Question

我收到以下错误：

水合失败，因为初始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

似乎是问题。当这条线被评论时，一切都起作用。

的确，服务器端返回的内容将与客户端返回的内容不同 - 但是我不完全了解我应该如何解决此问题以及为什么这是一个问题？

我正在进行此检查恰恰是因为我只想在客户端 - side＆amp;当我有一个会话时。我误会了吗？

Answer 1

SSR的重点是在服务器上的页面上。如果在服务器上，您的页面呈现始终null无需使用SSR。

如果仅在存在会话时才要在页面上进行pererender，则必须在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：我刚刚检查 docs 就像导入已更改为'Next-auth/react'（顺便说一句，在服务器上使用/client的方式更有意义）。