init

Author: AdnanShah

app/client/page.js

@@ -16,7 +16,12 @@ export default function Client(props) {
       </>
     )
   }
-  return <h1>client Page</h1>
+
+  return (
+    <>
+      <h1>client Page</h1>
+    </>
+  )
 }
 
 // getServerSideProps is not supported

app/components/client.js

@@ -0,0 +1,16 @@
+'use client'
+
+export default function ClientComponent(props) {
+  console.log('🚀 ~ ClientComponent')
+
+  if (props.children) {
+    return (
+      <>
+        <h1>client component</h1>
+        {props.children}
+      </>
+    )
+  }
+
+  return <h1>client component</h1>
+}

app/components/server.js

@@ -0,0 +1,12 @@
+import Home from './home'
+
+export default function ServerComponent({ data }) {
+  console.log('🚀 ~ ServerComponent')
+
+  return (
+    <>
+      <h1>Server component</h1>
+      <Home data={data} />
+    </>
+  )
+}

app/mix/page.js

@@ -1,15 +1,18 @@
-import Client from '../client/page'
-import Server from '../server/page'
+import { getData } from '../../lib/fetch-data'
+import ClientComponent from '../components/client'
+import ServerComponent from '../components/server'
 
-export default function MixMatchPage() {
+export default async function MixMatchPage() {
   console.log('🚀 ~ file: page.js:5 ~ MixMatchPage')
+  const data = await getData()
+
   return (
     <div>
       <h1>Mix Pages</h1>
       <div className="box-blue">
-        <Client>
-          <Server />
-        </Client>
+        <ClientComponent>
+          <ServerComponent data={data} />
+        </ClientComponent>
       </div>
     </div>
   )

app/server/page.js

@@ -1,26 +1,9 @@
-import Home from "../components/home"
-
-async function getData() {
-  const res = await fetch(
-    `https://5fbc07c3c09c200016d41656.mockapi.io/api/v1/games`
-  )
-
-  if (!res.ok) {
-    throw new Error('Failed to fetch data')
-  }
-
-  console.log('🚀  fetch on server data')
-  return res.json()
-}
+import ServerComponent from '../components/server'
+import { getData } from '../../lib/fetch-data'
 
 export default async function Server() {
   console.log('============== Server page ======================')
   const data = await getData()
 
-  return (
-    <>
-      <h1>Server Page</h1>
-      <Home data={data} />
-    </>
-  )
+  return <ServerComponent data={data} />
 }

lib/fetch-data.js

@@ -1,8 +1,20 @@
 export default async function fetchData(type) {
-  const res = await fetch(`https://hacker-news.firebaseio.com/v0/${type}.json`);
+  const res = await fetch(`https://hacker-news.firebaseio.com/v0/${type}.json`)
 
   if (res.status !== 200) {
-    throw new Error(`Status ${res.status}`);
+    throw new Error(`Status ${res.status}`)
   }
-  return res.json();
+  return res.json()
+}
+
+export const getData = async () => {
+  const res = await fetch(
+    `https://5fbc07c3c09c200016d41656.mockapi.io/api/v1/games`
+  )
+
+  if (!res.ok) {
+    throw new Error('Failed to fetch data')
+  }
+
+  return res.json()
 }

pages/index.js

@@ -1,15 +1,15 @@
-import Client from '../app/client/page'
-import Home from '../app/components/home'
+import ClientComponent from '../app/components/client'
+import ServerComponent from '../app/components/server'
 
 export default function Page({ data }) {
   console.log('🚀 pages => index.js')
 
   return (
     <>
       <h1>Client component (getServerSideProps)</h1>
-      <Client>
-        <Home data={data} />
-      </Client>
+      <ClientComponent>
+        <ServerComponent data={data} />
+      </ClientComponent>
     </>
   )
 }