6: Rendering and Caching

app/layout.tsx

@@ -44,6 +44,9 @@ export default function RootLayout({
                 <li>
                   <Link href="/interactive">Interactive</Link>
                 </li>
+                <li>
+                  <Link href="/time">Time</Link>
+                </li>
                 <li>
                   <Link href="/star-wars/people">Star Wars</Link>
                 </li>

app/time/dynamic/loading.tsx

@@ -0,0 +1,35 @@
+export default function Loading() {
+  return (
+    <div className="prose max-w-none">
+      <h1>
+        The current time is:{' '}
+        <span className="text-base">
+          (<code>force-dynamic</code>)
+        </span>
+      </h1>
+      <div className="flex gap-2 items-center">
+        <svg
+          className="animate-spin h-5 w-5 text-sky-500"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            stroke-width="4"
+          ></circle>
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          ></path>
+        </svg>
+        Loading...
+      </div>
+    </div>
+  );
+}

app/time/dynamic/page.tsx

@@ -0,0 +1,23 @@
+import { getTime } from '../get-time';
+
+export const metadata = {
+  title: 'Dynamic Time',
+};
+
+export const dynamic = 'force-dynamic';
+
+export default async function Page() {
+  const time = await getTime('America/Glace_Bay');
+
+  return (
+    <div className="prose max-w-none">
+      <h1>
+        The current time is:{' '}
+        <span className="text-base">
+          (<code>force-dynamic</code>)
+        </span>
+      </h1>
+      <p>{time}</p>
+    </div>
+  );
+}

app/time/get-time.tsx

@@ -0,0 +1,22 @@
+import sleep from '@/util/sleep';
+import { type Time } from './types';
+import { RequestInit } from 'next/dist/server/web/spec-extension/request';
+
+export async function getTime(
+  timezone: string = 'America/New_York',
+  requestInit?: RequestInit,
+  shouldSleep: boolean = true
+): Promise<string> {
+  if (shouldSleep) {
+    await sleep();
+  }
+
+  const res = await fetch(
+    `https://worldtimeapi.org/api/timezone/${timezone}`,
+    requestInit
+  );
+
+  const json: Time = await res.json();
+
+  return `${new Date(json.datetime).toLocaleTimeString()} (${json.timezone})`;
+}

app/time/layout.tsx

@@ -0,0 +1,45 @@
+import Link from 'next/link';
+import { getTime } from './get-time';
+
+const navigation = [
+  { name: 'Static', href: '/time' },
+  { name: 'Dynamic', href: '/time/dynamic' },
+  { name: 'No-Store', href: '/time/no-store' },
+  { name: 'Revalidate:0', href: '/time/revalidate-0' },
+  { name: 'Revalidate:5', href: '/time/revalidate-5' },
+  { name: 'Static + Route Revalidate', href: '/time/static-revalidate-route' },
+];
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const time = await getTime();
+  return (
+    <div className="outline-2 outline-emerald-500 outline-dotted rounded-lg p-4 -mx-4">
+      <div className="p-4 -m-4 sm:flex sm:items-center sm:justify-between">
+        <h2 className="text-base font-semibold leading-6 text-emerald-500">
+          It&apos;s Time Time!
+        </h2>
+        <div className="mt-3 flex sm:ml-4 sm:mt-0">
+          <span className="text-lg font-medium">{time}</span>
+        </div>
+      </div>
+      <nav className="flex gap-4 py-2 mb-4" aria-label="Global">
+        {navigation.map((item) => (
+          <Link
+            key={item.name}
+            href={item.href}
+            className={
+              'text-sky-500 underline hover:text-sky-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-sky-500'
+            }
+          >
+            {item.name}
+          </Link>
+        ))}
+      </nav>
+      {children}
+    </div>
+  );
+}

app/time/no-store/loading.tsx

@@ -0,0 +1,35 @@
+export default function Loading() {
+  return (
+    <div className="prose max-w-none">
+      <h1>
+        The current time is:{' '}
+        <span className="text-base">
+          (<code>cache: no-store</code>)
+        </span>
+      </h1>
+      <div className="flex gap-2 items-center">
+        <svg
+          className="animate-spin h-5 w-5 text-sky-500"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            stroke-width="4"
+          ></circle>
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          ></path>
+        </svg>
+        Loading...
+      </div>
+    </div>
+  );
+}

app/time/no-store/page.tsx

@@ -0,0 +1,23 @@
+import { getTime } from '../get-time';
+
+export const metadata = {
+  title: 'cache: no-store time',
+};
+
+export default async function Page() {
+  const time = await getTime('Asia/Bangkok', {
+    cache: 'no-store',
+  });
+
+  return (
+    <div className="prose max-w-none">
+      <h1>
+        The current time is:{' '}
+        <span className="text-base">
+          (<code>cache: no-store</code>)
+        </span>
+      </h1>
+      <p>{time}</p>
+    </div>
+  );
+}

app/time/page.tsx

@@ -0,0 +1,16 @@
+import { getTime } from './get-time';
+
+export const metadata = {
+  title: 'Static Time',
+};
+
+export default async function Page() {
+  const time = await getTime('Africa/Lagos');
+
+  return (
+    <div className="prose max-w-none">
+      <h1>The current time is:</h1>
+      <p>{time}</p>
+    </div>
+  );
+}

app/time/revalidate-0/loading.tsx

@@ -0,0 +1,35 @@
+export default function Loading() {
+  return (
+    <div className="prose max-w-none">
+      <h1>
+        The current time is:{' '}
+        <span className="text-base">
+          (<code>revalidate: 0</code>)
+        </span>
+      </h1>
+      <div className="flex gap-2 items-center">
+        <svg
+          className="animate-spin h-5 w-5 text-sky-500"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            stroke-width="4"
+          ></circle>
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          ></path>
+        </svg>
+        Loading...
+      </div>
+    </div>
+  );
+}

app/time/revalidate-0/page.tsx

@@ -0,0 +1,29 @@
+import { getTime } from '../get-time';
+
+export const metadata = {
+  title: 'revalidate:0 time',
+};
+
+export default async function Page() {
+  const time = await getTime(
+    'Europe/Moscow',
+    {
+      next: {
+        revalidate: 0,
+      },
+    },
+    false
+  );
+
+  return (
+    <div className="prose max-w-none">
+      <h1>
+        The current time is:{' '}
+        <span className="text-base">
+          (<code>revalidate: 0</code>)
+        </span>
+      </h1>
+      <p>{time}</p>
+    </div>
+  );
+}

app/time/revalidate-5/loading.tsx

@@ -0,0 +1,35 @@
+export default function Loading() {
+  return (
+    <div className="prose max-w-none">
+      <h1>
+        The current time is:{' '}
+        <span className="text-base">
+          (<code>revalidate: 5</code>)
+        </span>
+      </h1>
+      <div className="flex gap-2 items-center">
+        <svg
+          className="animate-spin h-5 w-5 text-sky-500"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            stroke-width="4"
+          ></circle>
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          ></path>
+        </svg>
+        Loading...
+      </div>
+    </div>
+  );
+}

app/time/revalidate-5/page.tsx

@@ -0,0 +1,29 @@
+import { getTime } from '../get-time';
+
+export const metadata = {
+  title: 'revalidate:5 time',
+};
+
+export default async function Page() {
+  const time = await getTime(
+    'Pacific/Pago_Pago',
+    {
+      next: {
+        revalidate: 5,
+      },
+    },
+    false
+  );
+
+  return (
+    <div className="prose max-w-none">
+      <h1>
+        The current time is:{' '}
+        <span className="text-base">
+          (<code>revalidate: 5</code>)
+        </span>
+      </h1>
+      <p>{time}</p>
+    </div>
+  );
+}

app/time/static-revalidate-route/loading.tsx

@@ -0,0 +1,35 @@
+export default function Loading() {
+  return (
+    <div className="prose max-w-none">
+      <h1>
+        The current time is:{' '}
+        <span className="text-base">
+          (<code>Static + Revalidate Route</code>)
+        </span>
+      </h1>
+      <div className="flex gap-2 items-center">
+        <svg
+          className="animate-spin h-5 w-5 text-sky-500"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            stroke-width="4"
+          ></circle>
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          ></path>
+        </svg>
+        Loading...
+      </div>
+    </div>
+  );
+}