Switch to dynamic io

app/(chat)/layout.tsx

@@ -1,9 +1,17 @@
 import { cookies } from 'next/headers';
 
 import { AppSidebar } from '@/components/app-sidebar';
-import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarInset,
+  SidebarProvider,
+} from '@/components/ui/sidebar';
 
 import { auth } from '../(auth)/auth';
+import { Suspense } from 'react';
+import { notFound } from 'next/navigation';
+import { SidebarDataWrapper } from './sidebar-data-wrapper';
 
 export const experimental_ppr = true;
 
@@ -14,11 +22,45 @@ export default async function Layout({
 }) {
   const [session, cookieStore] = await Promise.all([auth(), cookies()]);
   const isCollapsed = cookieStore.get('sidebar:state')?.value !== 'true';
+  if (!session?.user) {
+    return notFound();
+  }
 
   return (
     <SidebarProvider defaultOpen={!isCollapsed}>
-      <AppSidebar user={session?.user} />
+      <AppSidebar user={session?.user}>
+        <Suspense fallback={<SidebarLoading />}>
+          <SidebarDataWrapper user={session?.user} />
+        </Suspense>
+      </AppSidebar>
       <SidebarInset>{children}</SidebarInset>
     </SidebarProvider>
   );
 }
+
+function SidebarLoading() {
+  return (
+    <SidebarGroup>
+      <div className="px-2 py-1 text-xs text-sidebar-foreground/50">Today</div>
+      <SidebarGroupContent>
+        <div className="flex flex-col">
+          {[44, 32, 28, 64, 52].map((item) => (
+            <div
+              key={item}
+              className="rounded-md h-8 flex gap-2 px-2 items-center"
+            >
+              <div
+                className="h-4 rounded-md flex-1 max-w-[--skeleton-width] bg-sidebar-accent-foreground/10"
+                style={
+                  {
+                    '--skeleton-width': `${item}%`,
+                  } as React.CSSProperties
+                }
+              />
+            </div>
+          ))}
+        </div>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  );
+}

app/(chat)/page.tsx

@@ -1,10 +1,12 @@
 import { cookies } from 'next/headers';
+import { connection } from 'next/server';
 
 import { Chat } from '@/components/chat';
 import { DEFAULT_MODEL_NAME, models } from '@/lib/ai/models';
 import { generateUUID } from '@/lib/utils';
 
 export default async function Page() {
+  await connection();
   const id = generateUUID();
 
   const cookieStore = await cookies();

app/(chat)/sidebar-data-wrapper.tsx

@@ -0,0 +1,17 @@
+import type { User } from 'next-auth';
+import { getChatsByUserId } from '@/lib/db/queries';
+import { unstable_cacheTag as cacheTag } from 'next/cache';
+import { SidebarHistory } from '@/components/sidebar-history';
+
+export async function getChats(id: string) {
+  'use cache';
+  cacheTag('history');
+  const chats = await getChatsByUserId({ id });
+  return chats;
+}
+
+export async function SidebarDataWrapper({ user }: { user: User }) {
+  // biome-ignore lint: Forbidden non-null assertion.
+  const chats = await getChats(user?.id!);
+  return <SidebarHistory user={user} history={chats} />;
+}

components/app-sidebar.tsx

@@ -4,7 +4,6 @@ import type { User } from 'next-auth';
 import { useRouter } from 'next/navigation';
 
 import { PlusIcon } from '@/components/icons';
-import { SidebarHistory } from '@/components/sidebar-history';
 import { SidebarUserNav } from '@/components/sidebar-user-nav';
 import { Button } from '@/components/ui/button';
 import {
@@ -20,7 +19,10 @@ import {
 import { BetterTooltip } from '@/components/ui/tooltip';
 import Link from 'next/link';
 
-export function AppSidebar({ user }: { user: User | undefined }) {
+export function AppSidebar({
+  user,
+  children,
+}: { user: User | undefined; children: React.ReactNode }) {
   const router = useRouter();
   const { setOpenMobile } = useSidebar();
 
@@ -58,9 +60,7 @@ export function AppSidebar({ user }: { user: User | undefined }) {
         </SidebarMenu>
       </SidebarHeader>
       <SidebarContent>
-        <SidebarGroup className="-mx-2">
-          <SidebarHistory user={user} />
-        </SidebarGroup>
+        <SidebarGroup className="-mx-2">{children}</SidebarGroup>
       </SidebarContent>
       <SidebarFooter className="gap-0 -mx-2">
         {user && (

components/chat.tsx

@@ -17,6 +17,7 @@ import { Block, type UIBlock } from './block';
 import { BlockStreamHandler } from './block-stream-handler';
 import { MultimodalInput } from './multimodal-input';
 import { Overview } from './overview';
+import { revalidateTag } from 'next/cache';
 
 export function Chat({
   id,
@@ -43,7 +44,8 @@ export function Chat({
     body: { id, modelId: selectedModelId },
     initialMessages,
     onFinish: () => {
-      mutate('/api/history');
+      revalidateTag('history');
+      // mutate('/api/history');
     },
   });
 

components/multimodal-input.tsx

@@ -27,6 +27,7 @@ import { ArrowUpIcon, PaperclipIcon, StopIcon } from './icons';
 import { PreviewAttachment } from './preview-attachment';
 import { Button } from './ui/button';
 import { Textarea } from './ui/textarea';
+import { revalidateTag } from 'next/cache';
 
 const suggestedActions = [
   {
@@ -130,7 +131,7 @@ export function MultimodalInput({
 
     setAttachments([]);
     setLocalStorageInput('');
-
+    revalidateTag('history');
     if (width && width > 768) {
       textareaRef.current?.focus();
     }

components/sidebar-history.tsx

@@ -4,9 +4,7 @@ import { isToday, isYesterday, subMonths, subWeeks } from 'date-fns';
 import Link from 'next/link';
 import { useParams, usePathname, useRouter } from 'next/navigation';
 import type { User } from 'next-auth';
-import { useEffect, useState } from 'react';
-import { toast } from 'sonner';
-import useSWR from 'swr';
+import { useState } from 'react';
 
 import { MoreHorizontalIcon, TrashIcon } from '@/components/icons';
 import {
@@ -35,7 +33,7 @@ import {
   useSidebar,
 } from '@/components/ui/sidebar';
 import type { Chat } from '@/lib/db/schema';
-import { fetcher } from '@/lib/utils';
+import { revalidateTag } from 'next/cache';
 
 type GroupedChats = {
   today: Chat[];
@@ -85,21 +83,21 @@ const ChatItem = ({
   </SidebarMenuItem>
 );
 
-export function SidebarHistory({ user }: { user: User | undefined }) {
+export function SidebarHistory({
+  user,
+  history,
+}: {
+  user: User | undefined;
+  history: {
+    id: string;
+    createdAt: Date;
+    title: string;
+    userId: string;
+  }[];
+}) {
   const { setOpenMobile } = useSidebar();
   const { id } = useParams();
   const pathname = usePathname();
-  const {
-    data: history,
-    isLoading,
-    mutate,
-  } = useSWR<Array<Chat>>(user ? '/api/history' : null, fetcher, {
-    fallbackData: [],
-  });
-
-  useEffect(() => {
-    mutate();
-  }, [pathname, mutate]);
 
   const [deleteId, setDeleteId] = useState<string | null>(null);
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
@@ -112,11 +110,7 @@ export function SidebarHistory({ user }: { user: User | undefined }) {
     toast.promise(deletePromise, {
       loading: 'Deleting chat...',
       success: () => {
-        mutate((history) => {
-          if (history) {
-            return history.filter((h) => h.id !== id);
-          }
-        });
+        revalidateTag('history');
         return 'Chat deleted successfully';
       },
       error: 'Failed to delete chat',
@@ -141,35 +135,6 @@ export function SidebarHistory({ user }: { user: User | undefined }) {
     );
   }
 
-  if (isLoading) {
-    return (
-      <SidebarGroup>
-        <div className="px-2 py-1 text-xs text-sidebar-foreground/50">
-          Today
-        </div>
-        <SidebarGroupContent>
-          <div className="flex flex-col">
-            {[44, 32, 28, 64, 52].map((item) => (
-              <div
-                key={item}
-                className="rounded-md h-8 flex gap-2 px-2 items-center"
-              >
-                <div
-                  className="h-4 rounded-md flex-1 max-w-[--skeleton-width] bg-sidebar-accent-foreground/10"
-                  style={
-                    {
-                      '--skeleton-width': `${item}%`,
-                    } as React.CSSProperties
-                  }
-                />
-              </div>
-            ))}
-          </div>
-        </SidebarGroupContent>
-      </SidebarGroup>
-    );
-  }
-
   if (history?.length === 0) {
     return (
       <SidebarGroup>

next.config.ts

@@ -4,6 +4,7 @@ const nextConfig: NextConfig = {
   /* config options here */
   experimental: {
     ppr: true,
+    dynamicIO: true,
   },
   images: {
     remotePatterns: [