1
// Copyright (c) 2026 Cloudflare, Inc.
2
// Licensed under the Apache 2.0 license found in the LICENSE file or at:
3
//     https://opensource.org/licenses/Apache-2.0
4
 
5
import { Suspense } from 'react';
6
import { cookies } from 'next/headers';
7
 
8
async function AsyncSection({ id }) {
9
  return <div id={`async-section-${id}`}>Loaded data for section-{id}</div>;
10
}
11
 
12
export default async function Home() {
13
  const cookieStore = await cookies();
14
  const testCookie = cookieStore.get('test-cookie');
15
 
16
  return (
17
    <main>
18
      <h1>SSR Test Page</h1>
19
      <p id="server-time">Server rendered at: {Date.now()}</p>
20
      <p id="cookie-value">Cookie value: {testCookie?.value ?? 'not set'}</p>
21
      <section id="suspense-section">
22
        <h2>Suspense Boundaries</h2>
23
        <Suspense fallback={<div>Loading 1...</div>}>
24
          <AsyncSection id="1" />
25
        </Suspense>
26
        <Suspense fallback={<div>Loading 2...</div>}>
27
          <AsyncSection id="2" />
28
        </Suspense>
29
        <Suspense fallback={<div>Loading 3...</div>}>
30
          <AsyncSection id="3" />
31
        </Suspense>
32
      </section>
33
    </main>
34
  );
35
}