init

Author: AdnanShah

app/mix/page.js

@@ -1,19 +1,19 @@
+import ClientComponent from '../../components/client'
+import ServerComponent from '../../components/server'
 import { getData } from '../../lib/fetch-data'
-import ClientComponent from '../components/client'
-import ServerComponent from '../components/server'
 
 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">
         <ClientComponent>
           <ServerComponent data={data} />
         </ClientComponent>
       </div>
-    </div>
+    </>
   )
 }

app/server/page.js

@@ -1,4 +1,4 @@
-import ServerComponent from '../components/server'
+import ServerComponent from '../../components/server'
 import { getData } from '../../lib/fetch-data'
 
 export default async function Server() {

app/components/client.js renamed to components/client.js

@@ -1,7 +1,7 @@
-import Home from './home'
+import Home from "./home"
 
 export default function ServerComponent({ data }) {
-  console.log('🚀 ~ ServerComponent')
+  console.log('🚀 ~ ServerComponent (this should not be in browser)')
 
   return (
     <>

app/components/home.js renamed to components/home.js

@@ -1,5 +1,5 @@
-import ClientComponent from '../app/components/client'
-import ServerComponent from '../app/components/server'
+import ClientComponent from "../components/client"
+import ServerComponent from "../components/server"
 
 export default function Page({ data }) {
   console.log('🚀 pages => index.js')