feat/get-server-data

package.json

@@ -7,7 +7,8 @@
     "dev": "node server-dev.js",
     "build:client": "vite build --outDir dist/client",
     "build:server": "vite build --ssr src/entry-server.jsx --outDir dist/server",
-    "build": "npm run build:client && npm run build:server",
+    "build:function": "vite build --ssr src/function.js --outDir dist/function",
+    "build": "npm run build:client && npm run build:server && npm run build:function",
     "serve": "node server-prod.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },

server-dev.js

@@ -20,7 +20,11 @@ app.use('*', async (req, res) => {
     const template = await vite.transformIndexHtml(url, fs.readFileSync('index.html', 'utf-8'));
     const { render } = await vite.ssrLoadModule('/src/entry-server.jsx');
 
-    const html = template.replace(`<!--outlet-->`, render);
+    const { getServerData } = await vite.ssrLoadModule('/src/function.js');
+    const data = await getServerData();
+    const script = `<script>window.__data__=${JSON.stringify(data)}</script>`;
+
+    const html = template.replace(`<!--outlet-->`, `${render(data)} ${script}`);
     res.status(200).set({ 'Content-Type': 'text/html' }).end(html);
   } catch (error) {
     res.status(500).end(error);

server-prod.js

@@ -12,7 +12,11 @@ app.use('*', async (_, res) => {
     const template = fs.readFileSync('./dist/client/index.html', 'utf-8');
     const { render } = await import('./dist/server/entry-server.js');
 
-    const html = template.replace(`<!--outlet-->`, render);
+    const { getServerData } = await import('./dist/function/function.js');
+    const data = await getServerData();
+    const script = `<script>window.__data__=${JSON.stringify(data)}</script>`;
+
+    const html = template.replace(`<!--outlet-->`, `${render(data)} ${script}`);
     res.status(200).set({ 'Content-Type': 'text/html' }).end(html);
   } catch (error) {
     res.status(500).end(error);

src/app.jsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-const App = () => {
+const App = ({ data }) => {
   const [count, setCount] = useState(0);
 
   return (
@@ -11,6 +11,7 @@ const App = () => {
         <div>{count}</div>
         <button onClick={() => setCount(count + 1)}>Count</button>
       </div>
+      <pre>{JSON.stringify(data, null, 2)}</pre>
     </main>
   );
 };

src/entry-client.jsx

@@ -2,4 +2,10 @@ import { hydrateRoot } from 'react-dom/client';
 
 import App from './app';
 
-hydrateRoot(document.getElementById('app'), <App />);
+let data;
+
+if (typeof window !== 'undefined') {
+  data = window.__data__;
+}
+
+hydrateRoot(document.getElementById('app'), <App data={data} />);

src/entry-server.jsx

@@ -2,6 +2,6 @@ import { renderToString } from 'react-dom/server';
 
 import App from './app';
 
-export const render = () => {
-  return renderToString(<App />);
+export const render = (data) => {
+  return renderToString(<App data={data} />);
 };

src/function.js

@@ -0,0 +1,6 @@
+export const getServerData = async () => {
+  const response = await fetch('https://dummyjson.com/products/1');
+  const data = await response.json();
+
+  return data;
+};