From ff482761e8515dd82101cb7bdaae3d7beff66dee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Horv=C3=A1th=20D=C3=A1niel?= <nitedani@gmail.com>
Date: Tue, 6 Aug 2024 11:24:37 +0200
Subject: [PATCH] update vercel example

---
 .../express-react-vercel/pages/+Layout.jsx    |  3 +++
 .../pages/dynamic/+Page.jsx                   | 21 ++++++++++++---
 .../pages/index/+Page.jsx                     | 21 ++++++++++++---
 .../pages/static/+Page.jsx                    | 27 +++++++++++++++++++
 .../pages/static/+config.js                   | 10 +++++++
 5 files changed, 76 insertions(+), 6 deletions(-)
 create mode 100644 examples/express-react-vercel/pages/static/+Page.jsx
 create mode 100644 examples/express-react-vercel/pages/static/+config.js

diff --git a/examples/express-react-vercel/pages/+Layout.jsx b/examples/express-react-vercel/pages/+Layout.jsx
index 35a7ab3..3f5e20e 100644
--- a/examples/express-react-vercel/pages/+Layout.jsx
+++ b/examples/express-react-vercel/pages/+Layout.jsx
@@ -13,6 +13,9 @@ function Layout({ children }) {
         <a className="navitem" href="/dynamic">
           Dynamic
         </a>
+        <a className="navitem" href="/static">
+          Static
+        </a>
       </Sidebar>
       <Content>{children}</Content>
     </PageLayout>
diff --git a/examples/express-react-vercel/pages/dynamic/+Page.jsx b/examples/express-react-vercel/pages/dynamic/+Page.jsx
index d2dc74c..7f8d9f7 100644
--- a/examples/express-react-vercel/pages/dynamic/+Page.jsx
+++ b/examples/express-react-vercel/pages/dynamic/+Page.jsx
@@ -1,12 +1,27 @@
 export default Page
 
-import React from 'react'
+import React, { useState } from 'react'
 
 function Page() {
   return (
     <>
-      <h1>Dynamic</h1>
-      This page is rendered to HTML at {new Date().toLocaleString('en')}.
+      <h1>Welcome</h1>
+      This page is:
+      <ul>
+        <li>Dynamic</li>
+        <li>No static html generated</li>
+        <li>Interactive</li>
+      </ul>
+      <Counter />
     </>
   )
 }
+
+function Counter() {
+  const [count, setCount] = useState(0)
+  return (
+    <button type="button" onClick={() => setCount((count) => count + 1)}>
+      Counter {count}
+    </button>
+  )
+}
diff --git a/examples/express-react-vercel/pages/index/+Page.jsx b/examples/express-react-vercel/pages/index/+Page.jsx
index a83eea9..40682a7 100644
--- a/examples/express-react-vercel/pages/index/+Page.jsx
+++ b/examples/express-react-vercel/pages/index/+Page.jsx
@@ -1,12 +1,27 @@
 export default Page
 
-import React from 'react'
+import React, { useState } from 'react'
 
 function Page() {
   return (
     <>
-      <h1>Pre-rendered</h1>
-      This page is pre-rendered to HTML at {new Date().toLocaleString('en')}.
+      <h1>Welcome</h1>
+      This page is:
+      <ul>
+        <li>Pre-rendered</li>
+        <li>Static html generated</li>
+        <li>Interactive</li>
+      </ul>
+      <Counter />
     </>
   )
 }
+
+function Counter() {
+  const [count, setCount] = useState(0)
+  return (
+    <button type="button" onClick={() => setCount((count) => count + 1)}>
+      Counter {count}
+    </button>
+  )
+}
diff --git a/examples/express-react-vercel/pages/static/+Page.jsx b/examples/express-react-vercel/pages/static/+Page.jsx
new file mode 100644
index 0000000..bf0a2e8
--- /dev/null
+++ b/examples/express-react-vercel/pages/static/+Page.jsx
@@ -0,0 +1,27 @@
+export default Page
+
+import React, { useState } from 'react'
+
+function Page() {
+  return (
+    <>
+      <h1>Welcome</h1>
+      This page is:
+      <ul>
+        <li>Pre-rendered</li>
+        <li>Static html generated</li>
+        <li>Not interactive (no javascript is downloaded for this page)</li>
+      </ul>
+      <Counter />
+    </>
+  )
+}
+
+function Counter() {
+  const [count, setCount] = useState(0)
+  return (
+    <button type="button" onClick={() => setCount((count) => count + 1)}>
+      Counter {count}
+    </button>
+  )
+}
diff --git a/examples/express-react-vercel/pages/static/+config.js b/examples/express-react-vercel/pages/static/+config.js
new file mode 100644
index 0000000..a81d760
--- /dev/null
+++ b/examples/express-react-vercel/pages/static/+config.js
@@ -0,0 +1,10 @@
+// https://vike.dev/render-modes#html-only
+
+export default {
+  prerender: true,
+  meta: {
+    Page: {
+      env: { server: true, client: false }
+    }
+  }
+}