import { Suspense } from 'react'
import { connection } from 'next/server'

async function DynamicContent() {
  await connection()
  return <div data-testid="dynamic-content">Dynamic content</div>
}

export default function TargetPage() {
  return (
    <div data-testid="target-page">
      <h1>Target Page</h1>
      <div data-testid="static-content">This is static content</div>
      <Suspense fallback={<div data-testid="loading">Loading...</div>}>
        <DynamicContent />
      </Suspense>
    </div>
  )
}