开启 ppr 优化渲染性能

src/app/(home)/header.tsx

@@ -1,5 +1,5 @@
 'use client'
-import {useCallback, useEffect, useMemo, useState, PointerEvent, ComponentProps, useSyncExternalStore} from 'react'
+import {useMemo, useState, PointerEvent, ComponentProps, useSyncExternalStore, use, Suspense} from 'react'
 import Link from 'next/link'
 import Image from 'next/image'
 import {HeaderContext} from './_components/header/common'
@@ -10,7 +10,7 @@ import MobileMenu from './_components/header/menu-mobile'
 import Wrap from '@/components/wrap'
 import logo from '@/assets/logo.webp'
 import {Button} from '@/components/ui/button'
-import {useProfileStore} from '@/components/stores-provider'
+import {useProfileStore} from '@/components/stores/profile'
 import UserCenter from '@/components/composites/user-center'
 import {MenuIcon} from 'lucide-react'
 import down from '@/assets/header/down.svg'
@@ -151,33 +151,9 @@ export default function Header(props: HeaderProps) {
             </nav>
 
             {/* 登录 */}
-            <div className="flex items-center">
-              {profile == null
-                ? (
-                  <>
-                    <Link
-                      href="/login"
-                      className="w-24 h-12 flex items-center justify-center lg:text-lg"
-                    >
-                      <span>登录</span>
-                    </Link>
-                    <Link
-                      href="/login"
-                      className={[
-                        `w-20 lg:w-24 h-10 lg:h-12 bg-linear-to-r rounded-sm flex items-center justify-center lg:text-lg text-white`,
-                        `transition-colors duration-200 ease-in-out`,
-                        `from-blue-500 to-cyan-400 hover:from-blue-500 hover:to-cyan-300`,
-                      ].join(' ')}
-                    >
-                      <span>注册</span>
-                    </Link>
-                  </>
-                )
-                : (
-                  <UserCenter profile={profile}/>
-                )
-              }
-            </div>
+            <Suspense>
+              <ProfileOrLogin/>
+            </Suspense>
           </Wrap>
         </div>
 
@@ -271,3 +247,36 @@ function MenuItem(props: {
     </li>
   )
 }
+
+function ProfileOrLogin() {
+  const profile = use(useProfileStore(store => store.profile))
+  return (
+    <div className="flex items-center">
+      {profile == null
+        ? (
+          <>
+            <Link
+              href="/login"
+              className="w-24 h-12 flex items-center justify-center lg:text-lg"
+            >
+              <span>登录</span>
+            </Link>
+            <Link
+              href="/login"
+              className={[
+                `w-20 lg:w-24 h-10 lg:h-12 bg-linear-to-r rounded-sm flex items-center justify-center lg:text-lg text-white`,
+                `transition-colors duration-200 ease-in-out`,
+                `from-blue-500 to-cyan-400 hover:from-blue-500 hover:to-cyan-300`,
+              ].join(' ')}
+            >
+              <span>注册</span>
+            </Link>
+          </>
+        )
+        : (
+          <UserCenter profile={profile}/>
+        )
+      }
+    </div>
+  )
+}