开启 ppr 优化渲染性能

src/app/(home)/customized/page.tsx

@@ -13,8 +13,7 @@ import check from '@/assets/check-accent.svg'
 import banner from './_assets/Mask-group.webp'
 import group from './_assets/Group.webp'
 import {merge} from '@/lib/utils'
-import {useRouter} from 'next/navigation'
-import {useProfileStore} from '@/components/stores-provider'
+import FreeTrial from '@/components/free-trial'
 
 const formSchema = z.object({
   companyName: z.string().min(2, '企业名称至少2个字符'),
@@ -27,7 +26,6 @@ const formSchema = z.object({
 type FormValues = z.infer<typeof formSchema>
 
 export default function CollectPage() {
-  const router = useRouter()
   const form = useForm<FormValues>({
     resolver: zodResolver(formSchema),
     defaultValues: {
@@ -38,8 +36,6 @@ export default function CollectPage() {
       purpose: '',
     },
   })
-  // 从store中获取用户信息
-  const profile = useProfileStore(store => store.profile)
 
   return (
     <main className="mt-20 flex flex-col gap-4">
@@ -246,20 +242,7 @@ export default function CollectPage() {
                   <div className="text-blue-600 font-bold text-2xl md:text-2xl text-center md:text-left">
                     现在注册，免费领取5000IP
                   </div>
-
-                  <Button
-                    className={merge('bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md whitespace-nowrap')}
-                    onClick={() => {
-                      if (profile) {
-                        router.push('/admin/purchase')
-                      }
-                      else {
-                        router.push('/login?redirect=/admin/purchase')
-                      }
-                    }}
-                  >
-                    免费试用
-                  </Button>
+                  <FreeTrial className={merge('bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md whitespace-nowrap')}/>
                 </div>
               </div>
             </div>

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>
+  )
+}

src/app/(home)/page.tsx

@@ -1,10 +1,6 @@
-'use client'
 import {ReactNode} from 'react'
 import Wrap from '@/components/wrap'
 import Image, {StaticImageData} from 'next/image'
-import React from 'react'
-import {useRouter} from 'next/navigation'
-import {useProfileStore} from '@/components/stores-provider'
 import check_main from '@/assets/check-main.svg'
 import banner from './_assets/banner.webp'
 import map from './_assets/map.webp'
@@ -23,12 +19,9 @@ import s4_1_3 from './_assets/s4-1-3.webp'
 import s4_2_1 from './_assets/s4-2-1.webp'
 import s4_2_2 from './_assets/s4-2-2.webp'
 import s4_2_3 from './_assets/s4-2-3.webp'
+import FreeTrial from '@/components/free-trial'
 
 export default function Home() {
-  const router = useRouter()
-  // 从store中获取用户信息
-  const profile = useProfileStore(store => store.profile)
-
   return (
     <main className="flex flex-col gap-16 lg:gap-32 pb-16 lg:pb-32 bg-white">
 
@@ -54,22 +47,10 @@ export default function Home() {
             </p>
           </div>
 
-          <button
-            className={[
-              `mt-32 max-md:mt-20 w-96 max-md:w-full h-16 md:h-24 rounded-lg shadow-lg`,
-              `bg-linear-to-r from-blue-500 to-cyan-400 text-white text-xl lg:text-4xl`,
-            ].join(' ')}
-            onClick={() => {
-              if (profile) {
-                router.push('/admin/purchase') // 已登录用户跳转购买页
-              }
-              else {
-                router.push('/login?redirect=/admin/purchase') // 未登录跳转登录页并携带重定向路径
-              }
-            }}
-          >
-            免费试用
-          </button>
+          <FreeTrial className={[
+            `mt-32 max-md:mt-20 w-96 max-md:w-full h-16 md:h-24 rounded-lg shadow-lg`,
+            `bg-linear-to-r from-blue-500 to-cyan-400 text-white text-xl lg:text-4xl`,
+          ].join(' ')}/>
         </Wrap>
       </section>
 

src/app/(home)/product/page.tsx

@@ -1,6 +1,7 @@
 import BreadCrumb from '@/components/bread-crumb'
 import Wrap from '@/components/wrap'
 import Purchase, {TabType} from '@/components/composites/purchase'
+import {Suspense} from 'react'
 
 export type ProductPageProps = {
   searchParams?: Promise<{
@@ -8,14 +9,16 @@ export type ProductPageProps = {
   }>
 }
 
-export default async function ProductPage(props: ProductPageProps) {
+export default function ProductPage(props: ProductPageProps) {
   return (
     <main className="mt-20">
       <Wrap className="flex flex-col py-8 gap-4">
         <BreadCrumb items={[
           {label: '产品中心', href: '/product'},
         ]}/>
-        <Purchase/>
+        <Suspense>
+          <Purchase/>
+        </Suspense>
       </Wrap>
     </main>
   )