Merge pull request #124 from h8570rg/develop

Prd

app/server/data.tsx

@@ -0,0 +1,9 @@
+import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
+import { cookies } from "next/headers";
+import { Database } from "~/lib/database.types";
+
+export default async function Data() {
+  const supabase = createServerComponentClient<Database>({ cookies });
+  const { data } = await supabase.from("matches").select();
+  return <pre>{JSON.stringify(data, null, 2)}</pre>;
+}

app/server/page.tsx

@@ -1,19 +1,21 @@
-import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
-import { cookies } from "next/headers";
 import Link from "next/link";
-import type { Database } from "~/lib/database.types";
+import { Suspense } from "react";
+import Data from "./data";
+import User from "./user";
 
-export const dynamic = "force-dynamic";
+export const revalidate = 0;
 
 export default async function ServerComponent() {
-  const supabase = createServerComponentClient<Database>({ cookies });
-  const user = await supabase.auth.getUser();
-  const { data } = await supabase.from("matches").select();
   return (
     <>
       <Link href="/">root</Link>
       <Link href="/client">client</Link>
-      <pre>{JSON.stringify(data, null, 2)}</pre>;<p>{user.data.user?.email}</p>
+      <Suspense fallback={<p>Loading User...</p>}>
+        <User />
+      </Suspense>
+      <Suspense fallback={<p>Loading Data...</p>}>
+        <Data />
+      </Suspense>
     </>
   );
 }

app/server/user.tsx

@@ -0,0 +1,9 @@
+import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
+import { cookies } from "next/headers";
+import { Database } from "~/lib/database.types";
+
+export default async function User() {
+  const supabase = createServerComponentClient<Database>({ cookies });
+  const user = await supabase.auth.getUser();
+  return <div>{user.data.user?.email}</div>;
+}