export const revalidate = 0

export default function Page() {
  return (
    <div>
      <p className='mb-5'>
        Go to{' '}
        <Link
          className='rounded bg-blue-500 px-4 py-2 font-semibold text-white hover:bg-blue-700'
          href='/'
        >
          Home
        </Link>{' '}
        page.
      </p>
      <AddTodoForm />
      <Suspense fallback={<TodosSkeleton />}>
        <ListTodos />
      </Suspense>
    </div>
  )
}

function TodosSkeleton() {
  return (
    <ul className='animate-pulse space-y-1'>
      <li className='h-5 w-full rounded bg-gray-200 dark:bg-neutral-800'></li>
      <li className='h-5 w-full rounded bg-gray-200 dark:bg-neutral-800'></li>
      <li className='h-5 w-full rounded bg-gray-200 dark:bg-neutral-800'></li>
      <li className='h-5 w-full rounded bg-gray-200 dark:bg-neutral-800'></li>
      <li className='h-5 w-full rounded bg-gray-200 dark:bg-neutral-800'></li>
    </ul>
  )
}

async function ListTodos() {
  const { session } = await validateAuth()
  if (!session) return 'Unauthorized'

  const all = await db
    .select()
    .from(todos)
    .where(eq(todos.userId, session.userId))
    .orderBy(desc(todos.id))
    .limit(5)

  if (all.length === 0) return <div>No todos found.</div>

  return (
    <ul className='space-y-1'>
      {all.map((todo) => (
        <li className='h-5' key={todo.id}>
          {todo.description}
        </li>
      ))}
    </ul>
  )

export const dynamic = "force-dynamic";

Overall we believe the default for this behavior is correct, however we’d like to figure out in what way folks in this issue want to opt-out of the behavior, as there are multiple related features that seem to be confused for this behavior.