Better ssr example

apps/next/app/ssr/page.tsx

@@ -1,7 +1,20 @@
 import { SSRTestScreen } from './screen'
+import { GetServerSideProps } from 'next'
 
 export const runtime = 'edge'
 
-export default function Page() {
-  return <SSRTestScreen></SSRTestScreen>
+type Props = {
+  content: string
+}
+
+export const getServerSideProps = (async () => {
+  return {
+    props: {
+      content: 'This page is rendered on the edge. It is not statically rendered.',
+    }
+  }
+}) satisfies GetServerSideProps<Props>
+
+export default function Page(props: Props) {
+  return <SSRTestScreen content={props.content}></SSRTestScreen>
 }

apps/next/app/ssr/screen.tsx

@@ -2,11 +2,11 @@
 
 import { Paragraph, YStack } from '@t4/ui'
 
-export function SSRTestScreen() {
+export function SSRTestScreen(props: { content: string }) {
   return (
     <YStack flex={1}>
       <Paragraph role='heading'>
-        This page is rendered on the edge. It is not statically rendered.
+        {props.content}
       </Paragraph>
     </YStack>
   )