0

我有一个 Layout 组件，我想将它用作我的页面的包装器。

pages/_app.js

import { UIProvider, uiState } from '../components/Context/UIContext'

import { UserProvider, userState } from '../components/Context/UserContext';
import { useUser } from '../lib/hooks'

import Layout from '../components/Layout/index';

function MyApp({ Component, pageProps }) {
  const { user, mutate, loading } = useUser();
   
  return (
    <UserProvider value={userState}>
      <UIProvider value={uiState}>
        <CloudinaryContext cloudName="hillfinders">
          <Head>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
          </Head>
          <Layout user={user} mutate={mutate} >
            <NextNprogress
              color="#abf581"
              startPosition={0.3}
              stopDelayMs={200}
              height={4}
              showOnShallow
            />
            <Component {...pageProps} />
          </Layout>
        </CloudinaryContext>
      </UIProvider>
    </UserProvider>
  )
}

export default MyApp

本质上，我正在调用 swruseUser()钩子并将值从它传递给Layout组件以显示/隐藏登录/未经身份验证用户的导航元素。

问题是我注意到在登录后与当我将Layout组件作为包装器导入每个页面并在Layout声明本身中调用钩子时出现在 DOM 中的导航元素存在滞后。

所以对于pages/login, pages/profile, pages/dashboard等。我正在这样做：

import dynamic from "next/dynamic";

const Layout = dynamic(() => import('../components/Layout'));

export default function Dashboard() {
  return (
      <Layout>
        <h1>Dashboard</h1>
      </Layout>
  )
}

这是Layout组件，我称之为useUser()钩子：

export default function Layout({ children }) {
  const { user, mutate } = useUser();

 <>
    <div className="shadow bg-base-200 drawer h-screen">
          <div className="flex-none hidden lg:block">
            <ul className="menu horizontal">
              <li>
                <Link href="/">
                  <a>Home</a>
                </Link>
              </li>
              {user && user.isVerified
                ?
                <>
                  <li>
                    <Link href="/profile">
                      <a>Profile</a>
                    </Link>
                  </li>
                  <li>
                    <Link href="/dashboard">
                      <a>Dashboard</a>
                    </Link>
                  </li>
                  <li>
                    <a
                      role="button"
                      onClick={() => uidispatch({ type: 'showModal' })}

                    >
                      Logout
                    </a>
                  </li>
                  <li className="avatar">
                    <div className="rounded-full w-10 h-10 m-1">
                      <img src="https://i.pravatar.cc/500?img=32" />
                    </div>
                  </li></>
                :
                <>
                  <li>
                    <Link href="/login">
                      <a>Login</a>
                    </Link>
                  </li>
                  <li>
                    <Link href="/registration">
                      <a>Register</a>
                    </Link>
                  </li>
                </>
              }
            </ul>
          </div>
        </div>
     
  </>;
}

有没有我可以使用的策略swr来让它更快？

4

0 回答 0