api call ssr landing + latest product + ...

src/app/page.tsx

@@ -1,5 +1,5 @@
 import { NextPage } from 'next'
-import withLayout from '@/hoc/withLayout'
+import Layout from '@/hoc/Layout'
 import Carousel from './home/components/Carousel'
 import HotOffer from './home/components/HotOffer'
 import Categories from './home/components/Categories'
@@ -8,8 +8,13 @@ import Blogs from './home/components/Blogs'
 import NewestProducts from './home/components/LatestProducts'
 import Banners4 from './home/components/Banners4'
 import PopularProducts from './home/components/PopularProducts'
+import { HydrationBoundary, QueryClient, dehydrate } from '@tanstack/react-query'
+import { Suspense } from 'react'
+import PageLoading from '@/components/PageLoading'
+import { getLandingQueryOptions } from './home/hooks/useHomeData'
+
+const HomePage: NextPage = () => {
 
-const Home: NextPage = () => {
   return (
     <div>
       <Carousel />
@@ -19,8 +24,7 @@ const Home: NextPage = () => {
           <Categories />
         </div>
         <div className='mt-24'>
-          <Banners3
-          />
+          <Banners3 />
         </div>
       </div>
 
@@ -41,4 +45,20 @@ const Home: NextPage = () => {
   )
 }
 
-export default withLayout(Home)
+export default async function HomePageWithLayout() {
+  const queryClient = new QueryClient()
+
+  await queryClient.prefetchQuery(getLandingQueryOptions)
+
+  const dehydratedState = dehydrate(queryClient)
+
+  return (
+    <Layout>
+      <Suspense fallback={<PageLoading />}>
+        <HydrationBoundary state={dehydratedState}>
+          <HomePage />
+        </HydrationBoundary>
+      </Suspense>
+    </Layout>
+  )
+}