feat: some ui optimize and next cache hit

Author: Innei

src/app/(home)/layout.tsx

@@ -8,6 +8,8 @@ import { apiClient } from '~/lib/request'
 
 import { queryKey } from './query'
 
+export const revalidate = 60
+
 export default async function HomeLayout(props: PropsWithChildren) {
   const queryClient = getQueryClient()
   await queryClient.fetchQuery(queryKey, async () => {

src/app/(home)/page.tsx

@@ -494,7 +494,7 @@ const FriendScreen = () => {
         ),
       ).slice(0, 20)
     }, []),
-    staleTime: 1000 * 60,
+    staleTime: 1000 * 60 * 10,
   })
   return (
     <Screen className="flex h-auto min-h-[100vh] center">

src/app/api/note/latest/route.ts

@@ -0,0 +1,18 @@
+import { NextResponse } from 'next/server'
+import type { NoteWrappedPayload } from '@mx-space/api-client'
+
+import { apiClient } from '~/lib/request'
+
+export const revalidate = 60
+
+export const GET = async () => {
+  const data = await fetch(apiClient.note.proxy.latest.toString(true), {
+    next: {
+      revalidate: 30,
+    },
+  }).then((res) => res.json() as Promise<NoteWrappedPayload>)
+
+  return NextResponse.json({
+    nid: data.data.nid,
+  })
+}

src/app/layout.tsx

@@ -26,6 +26,8 @@ import { SonnerContainer } from './SonnerContainer'
 const { version } = PKG
 init()
 
+export const revalidate = 60
+
 const getAppConfig = cache(() => {
   return get('config') as Promise<AppConfig>
 })

src/app/notes/page.tsx

@@ -1,47 +1,37 @@
 'use client'
 
-import { useQuery, useQueryClient } from '@tanstack/react-query'
-import { useEffect, useRef } from 'react'
+import { useLayoutEffect } from 'react'
 import { useRouter } from 'next/navigation'
 
 import { Loading } from '~/components/ui/loading'
-import { apiClient } from '~/lib/request'
 import { routeBuilder, Routes } from '~/lib/route-builder'
-import { queries } from '~/queries/definition'
 
 import { Paper } from '../../components/layout/container/Paper'
 
+export const revalidate = 60
+
 export default function Page() {
-  const { data } = useQuery(
-    ['note', 'latest'],
-    async () => (await apiClient.note.getLatest()).$serialized,
-    {
-      cacheTime: 1,
-    },
-  )
-  const queryClient = useQueryClient()
   const router = useRouter()
-  const onceRef = useRef(false)
-  useEffect(() => {
-    if (!data) return
-    if (onceRef.current) return
+  useLayoutEffect(() => {
+    ;(async () => {
+      const { nid } = await fetch('/api/note/latest', {
+        next: {
+          revalidate: 60,
+        },
+      }).then(
+        (res) =>
+          res.json() as Promise<{
+            nid: number
+          }>,
+      )
 
-    queryClient.setQueryData(
-      queries.note.byNid(data.data.nid.toString()).queryKey,
-      data,
-    )
-    onceRef.current = true
-    const id = setTimeout(() => {
-      router.replace(
+      router.push(
         routeBuilder(Routes.Note, {
-          id: data.data.nid.toString(),
+          id: nid,
         }),
       )
-    }, 1)
-    return () => {
-      clearTimeout(id)
-    }
-  }, [data])
+    })()
+  }, [])
 
   return (
     <Paper>

src/components/layout/header/internal/MenuPopover.tsx

@@ -14,7 +14,6 @@ export const MenuPopover: Component<{
   return (
     <FloatPopover
       strategy="fixed"
-      headless
       placement="bottom"
       offset={10}
       popoverWrapperClassNames="z-[19] relative"

src/components/layout/header/internal/SiteOwnerAvatar.tsx

@@ -17,7 +17,11 @@ export const SiteOwnerAvatar: Component = ({ className }) => {
   const { data: isLiving } = useQuery({
     queryKey: ['live-check'],
     queryFn: () =>
-      fetch(`/api/bilibili/check_live?liveId=${liveId}`)
+      fetch(`/api/bilibili/check_live?liveId=${liveId}`, {
+        next: {
+          revalidate: 1,
+        },
+      })
         .then((res) => res.json())
         .catch(() => null),
     select: useCallback((data: any) => {

src/components/ui/float-popover/FloatPopover.tsx

@@ -236,9 +236,13 @@ export function FloatPopover<T extends {}>(
                 role="dialog"
                 aria-modal="true"
                 className={clsxm(
-                  '!shadow-out-sm focus:!shadow-out-sm focus-visible:!shadow-out-sm',
-                  'rounded-xl border border-zinc-400/20 p-4 shadow-lg outline-none backdrop-blur-lg dark:border-zinc-500/30',
-                  'bg-slate-50/80 dark:bg-neutral-900/80',
+                  !headless && [
+                    '!shadow-out-sm focus:!shadow-out-sm focus-visible:!shadow-out-sm',
+                    'rounded-xl border border-zinc-400/20 p-4 shadow-lg outline-none backdrop-blur-lg dark:border-zinc-500/30',
+                    'bg-slate-50/80 dark:bg-neutral-900/80',
+                  ],
+
+                  'relative z-[2]',
 
                   headless && styles['headless'],
                   animate && styles['animate'],

src/components/ui/float-popover/index.module.css

@@ -1,12 +1,10 @@
-.popover-root {
-  @apply relative z-[2] overflow-hidden p-4 shadow-out-sm;
-}
-
 .popover-root,
 .headless {
   opacity: 0;
   transform: translateY(-10px);
-  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
+  transition:
+    opacity 0.2s ease-in-out,
+    transform 0.2s ease-in-out;
 
   @apply delay-100;
 }

src/components/widgets/comment/CommentBox/UniversalTextArea.tsx

@@ -67,7 +67,7 @@ export const UniversalTextArea = () => {
       placeholder={placeholder}
     >
       <CommentBoxSlotPortal>
-        <FloatPopover trigger="click" TriggerComponent={EmojiButton}>
+        <FloatPopover trigger="click" TriggerComponent={EmojiButton} headless>
           <EmojiPicker onEmojiSelect={handleInsertEmoji} />
         </FloatPopover>
       </CommentBoxSlotPortal>

src/components/widgets/shared/EmojiPicker.tsx

@@ -11,9 +11,11 @@ export const EmojiPicker: FC<{
   const { data, isLoading } = useQuery({
     queryKey: ['emojidata'],
     queryFn: () =>
-      fetch('https://cdn.jsdelivr.net/npm/@emoji-mart/data').then((response) =>
-        response.json(),
-      ),
+      fetch('https://cdn.jsdelivr.net/npm/@emoji-mart/data', {
+        next: {
+          revalidate: 60 * 60 * 24 * 7,
+        },
+      }).then((response) => response.json()),
 
     staleTime: Infinity,
   })

src/components/widgets/xlog/XLogSummary.tsx

@@ -16,9 +16,11 @@ const XLogSummary: FC<{
     [`getSummary`, cid],
     async ({ queryKey }) => {
       const [, cid] = queryKey
-      const data = await fetch(`/api/xlog/summary?cid=${cid}`).then((res) =>
-        res.json(),
-      )
+      const data = await fetch(`/api/xlog/summary?cid=${cid}`, {
+        next: {
+          revalidate: 60 * 10,
+        },
+      }).then((res) => res.json())
       if (!data) throw new Error('请求错误')
       return data
     },