wip: Attempt to integrate React Server Component

apps/next/app/(generated)/page.tsx

@@ -1,2 +1 @@
-'use client'
 export { default, dynamic } from 'app/routes/index'

features/app-core/routes/bio/index.tsx

@@ -5,8 +5,13 @@ import * as bioScreen from 'links-page/screens/BioScreen'
 
 /* --- /bio ------------------------------------------------------------------------------------ */
 
-const PageScreen = (props: bioScreen.BioScreenProps) => (
-  <AetherPage {...props} screen={bioScreen.BioScreen} screenConfig={bioScreen.screenConfig} />
+const PageScreen = async (props: bioScreen.BioScreenProps) => (
+  <AetherPage
+    {...props}
+    screen={bioScreen.BioScreen}
+    screenConfig={bioScreen.screenConfig}
+    {...bioScreen.screenConfig}
+  />
 )
 
 /* --- Exports --------------------------------------------------------------------------------- */

features/app-core/routes/index.tsx

@@ -5,11 +5,17 @@ import * as bioScreen from 'links-page/screens/BioScreen'
 
 /* --- / --------------------------------------------------------------------------------------- */
 
-const PageScreen = (
+const PageScreen = async (
   props: bioScreen.BioScreenProps & { searchParams: Record<string, unknown> }
 ) => {
+  console.log('PageScreen', { props, ...bioScreen.screenConfig })
   return (
-    <AetherPage {...props} screen={bioScreen.BioScreen} screenConfig={bioScreen.screenConfig} />
+    <AetherPage
+      {...props}
+      screen={bioScreen.BioScreen}
+      screenConfig={bioScreen.screenConfig}
+      {...bioScreen.screenConfig}
+    />
   )
 }
 

features/links-page/screens/BioScreen.tsx

@@ -1,3 +1,4 @@
+'use client'
 import React from 'react'
 // Navigation
 import {

packages/@aetherspace/navigation/AetherLink/AetherLink.web.tsx

@@ -1,3 +1,4 @@
+'use client'
 // @ts-ignore
 import React, { useMemo, forwardRef } from 'react'
 import { Platform, Text } from 'react-native'

packages/@aetherspace/navigation/AetherPage/AetherClientPage.web.tsx

@@ -0,0 +1,77 @@
+'use client'
+import { SWRConfig } from 'swr'
+
+/* --- Helpers --------------------------------------------------------------------------------- */
+
+// const getSSRData = () => {
+//   const $ssrData = document.getElementById('ssr-data')
+//   const ssrDataText = $ssrData?.getAttribute('data-ssr')
+//   const ssrData = ssrDataText ? (JSON.parse(ssrDataText) as Record<string, any>) : null
+//   return ssrData
+// }
+
+/* --- <AetherPage/> --------------------------------------------------------------------------- */
+
+export const AetherClientPage = (props: any) => {
+  // Props
+  const { fallbackKey, screen, ...ssrData } = props
+  const PageScreen = screen
+
+  // Render
+  return (
+    <SWRConfig value={{ fallback: { [fallbackKey]: ssrData } }}>
+      {!!ssrData && <div id="ssr-data" data-ssr={JSON.stringify(ssrData)} />}
+      <PageScreen {...ssrData} />
+    </SWRConfig>
+  )
+}
+
+// export const AetherPage = <SC extends AetherScreenConfig>(props: AetherPageProps<SC>) => {
+//   // Props
+//   const { params: routeParams, searchParams, screen, screenConfig, ...restProps } = props
+//   const { query, getGraphqlVars, getGraphqlData } = screenConfig
+
+//   // State
+//   const [hydratedData, setHydratedData] = useState<Record<string, any> | null>(null)
+
+//   // Screen
+//   const PageScreen = screen
+
+//   // Vars
+//   const variables = getGraphqlVars({ ...searchParams, ...routeParams })
+//   const fallbackKey = unstable_serialize([query, variables])
+//   const isServer = typeof window === 'undefined'
+
+//   // -- Effects --
+
+//   useEffect(() => {
+//     const ssrData = getSSRData()
+//     if (ssrData) setHydratedData(ssrData) // Save the SSR data to state, removing the SSR data from the DOM
+//   }, [])
+
+//   // -- Browser --
+
+//   if (!isServer) {
+//     const hydrationData = hydratedData || getSSRData()
+//     const fallback = hydrationData ? { [fallbackKey]: hydrationData } : {}
+//     const renderHydrationData = !!hydrationData && !hydratedData // Only render the hydration data if it's not already in state
+
+//     return (
+//       <SWRConfig value={{ fallback }}>
+//         {renderHydrationData && <div id="ssr-data" data-ssr={JSON.stringify(hydrationData)} />}
+//         <PageScreen {...restProps} {...hydrationData} />
+//       </SWRConfig>
+//     )
+//   }
+
+//   // -- Server --
+
+//   const ssrData = use(getGraphqlData(query, variables))
+
+//   return (
+//     <SWRConfig value={{ fallback: { [fallbackKey]: ssrData } }}>
+//       {!!ssrData && <div id="ssr-data" data-ssr={JSON.stringify(ssrData)} />}
+//       <PageScreen {...restProps} {...ssrData} />
+//     </SWRConfig>
+//   )
+// }

packages/@aetherspace/navigation/AetherPage/AetherPage.types.ts

@@ -13,7 +13,7 @@ export type AetherScreenConfig = {
   backgroundColor?: string
 }
 
-export type AetherPageProps<SC extends AetherScreenConfig> = {
+export type AetherPageProps<SC extends AetherScreenConfig> = SC & {
   params?: Record<string, any>
   searchParams?: Record<string, any>
   screen: React.FC<Record<string, any>> | ((props: any) => JSX.Element | null)

packages/@aetherspace/navigation/AetherPage/AetherPage.web.tsx

@@ -2,64 +2,110 @@ import { use, useEffect, useState } from 'react'
 import { SWRConfig, unstable_serialize } from 'swr'
 // Types
 import { AetherPageProps, AetherScreenConfig } from './AetherPage.types'
+// Components
+import { AetherClientPage } from './AetherClientPage.web'
 
 /* --- Helpers --------------------------------------------------------------------------------- */
 
-const getSSRData = () => {
-  const $ssrData = document.getElementById('ssr-data')
-  const ssrDataText = $ssrData?.getAttribute('data-ssr')
-  const ssrData = ssrDataText ? (JSON.parse(ssrDataText) as Record<string, any>) : null
-  return ssrData
-}
+// const getSSRData = () => {
+//   const $ssrData = document.getElementById('ssr-data')
+//   const ssrDataText = $ssrData?.getAttribute('data-ssr')
+//   const ssrData = ssrDataText ? (JSON.parse(ssrDataText) as Record<string, any>) : null
+//   return ssrData
+// }
 
 /* --- <AetherPage/> --------------------------------------------------------------------------- */
 
-export const AetherPage = <SC extends AetherScreenConfig>(props: AetherPageProps<SC>) => {
+export const AetherServerPage = async <SC extends AetherScreenConfig>(
+  props: AetherPageProps<SC>
+) => {
   // Props
-  const { params: routeParams, searchParams, screen, screenConfig, ...restProps } = props
-  const { query, getGraphqlVars, getGraphqlData } = screenConfig
-
-  // State
-  const [hydratedData, setHydratedData] = useState<Record<string, any> | null>(null)
-
-  // Screen
-  const PageScreen = screen
+  const {
+    params: routeParams,
+    searchParams,
+    screen,
+    screenConfig,
+    query,
+    getGraphqlVars,
+    getGraphqlData,
+    ...restProps
+  } = props || {}
+  console.log('Server:', { props })
+  // const { query, getGraphqlVars, getGraphqlData } = screenConfig
 
   // Vars
   const variables = getGraphqlVars({ ...searchParams, ...routeParams })
   const fallbackKey = unstable_serialize([query, variables])
-  const isServer = typeof window === 'undefined'
+  console.log('Server:', { fallbackKey, variables })
+  const ssrData = await getGraphqlData(query, variables) // use(getGraphqlData(query, variables))
+  console.log('Server:', { ssrData })
 
-  // -- Effects --
+  // Render
+  return <AetherClientPage {...restProps} {...props} fallbackKey={fallbackKey} {...ssrData} />
+}
 
-  useEffect(() => {
-    const ssrData = getSSRData()
-    if (ssrData) setHydratedData(ssrData) // Save the SSR data to state, removing the SSR data from the DOM
-  }, [])
+// export const AetherClientPage = (props: any) => {
+//   // Props
+//   const { fallbackKey, screen, ...ssrData } = props
+//   const PageScreen = screen
 
-  // -- Browser --
+//   // Render
+//   return (
+//     <SWRConfig value={{ fallback: { [fallbackKey]: ssrData } }}>
+//       {!!ssrData && <div id="ssr-data" data-ssr={JSON.stringify(ssrData)} />}
+//       <PageScreen {...ssrData} />
+//     </SWRConfig>
+//   )
+// }
 
-  if (!isServer) {
-    const hydrationData = hydratedData || getSSRData()
-    const fallback = hydrationData ? { [fallbackKey]: hydrationData } : {}
-    const renderHydrationData = !!hydrationData && !hydratedData // Only render the hydration data if it's not already in state
+export const AetherPage = AetherServerPage
 
-    return (
-      <SWRConfig value={{ fallback }}>
-        {renderHydrationData && <div id="ssr-data" data-ssr={JSON.stringify(hydrationData)} />}
-        <PageScreen {...restProps} {...hydrationData} />
-      </SWRConfig>
-    )
-  }
+// export const AetherPage = <SC extends AetherScreenConfig>(props: AetherPageProps<SC>) => {
+//   // Props
+//   const { params: routeParams, searchParams, screen, screenConfig, ...restProps } = props
+//   const { query, getGraphqlVars, getGraphqlData } = screenConfig
 
-  // -- Server --
+//   // State
+//   const [hydratedData, setHydratedData] = useState<Record<string, any> | null>(null)
 
-  const ssrData = use(getGraphqlData(query, variables))
+//   // Screen
+//   const PageScreen = screen
 
-  return (
-    <SWRConfig value={{ fallback: { [fallbackKey]: ssrData } }}>
-      {!!ssrData && <div id="ssr-data" data-ssr={JSON.stringify(ssrData)} />}
-      <PageScreen {...restProps} {...ssrData} />
-    </SWRConfig>
-  )
-}
+//   // Vars
+//   const variables = getGraphqlVars({ ...searchParams, ...routeParams })
+//   const fallbackKey = unstable_serialize([query, variables])
+//   const isServer = typeof window === 'undefined'
+
+//   // -- Effects --
+
+//   useEffect(() => {
+//     const ssrData = getSSRData()
+//     if (ssrData) setHydratedData(ssrData) // Save the SSR data to state, removing the SSR data from the DOM
+//   }, [])
+
+//   // -- Browser --
+
+//   if (!isServer) {
+//     const hydrationData = hydratedData || getSSRData()
+//     const fallback = hydrationData ? { [fallbackKey]: hydrationData } : {}
+//     const renderHydrationData = !!hydrationData && !hydratedData // Only render the hydration data if it's not already in state
+
+//     return (
+//       <SWRConfig value={{ fallback }}>
+//         {renderHydrationData && <div id="ssr-data" data-ssr={JSON.stringify(hydrationData)} />}
+//         <PageScreen {...restProps} {...hydrationData} />
+//       </SWRConfig>
+//     )
+//   }
+
+//   // -- Server --
+
+//   const ssrData = use(getGraphqlData(query, variables))
+
+//   return (
+//     <SWRConfig value={{ fallback: { [fallbackKey]: ssrData } }}>
+//       {!!ssrData && <div id="ssr-data" data-ssr={JSON.stringify(ssrData)} />}
+//       <PageScreen {...restProps} {...ssrData} />
+//     </SWRConfig>
+//   )
+// }

packages/@aetherspace/primitives/AetherImage/AetherImage.tsx

@@ -1,3 +1,4 @@
+'use client'
 import React, { useMemo, forwardRef } from 'react'
 import { Image, ImageSource } from 'expo-image'
 // Types

packages/@aetherspace/primitives/AetherImage/AetherImage.web.tsx

@@ -1,3 +1,4 @@
+'use client'
 // -i- Based on / inspired by:
 // - https://necolas.github.io/react-native-web/docs/image/
 // - https://nextjs.org/docs/api-reference/next/image