refactor(packages/tuono): ssr - improve resources management

packages/tuono/src/ssr/components/ViteScripts.tsx → packages/tuono/src/ssr/components/DevResources.tsx

@@ -1,10 +1,10 @@
-import type { ReactNode } from 'react'
+import type { JSX } from 'react'
 
 const TUONO_DEV_SERVER_PORT = 3000
 const VITE_PROXY_PATH = '/vite-server'
 const SCRIPT_BASE_URL = `http://localhost:${TUONO_DEV_SERVER_PORT}${VITE_PROXY_PATH}`
 
-export const ViteScripts = (): ReactNode => (
+export const DevResources = (): JSX.Element => (
   <>
     <script type="module">
       {[

packages/tuono/src/ssr/components/ProdResources.tsx

@@ -0,0 +1,26 @@
+import type { JSX } from 'react'
+
+interface ProdResourcesProps {
+  cssBundles: Array<string>
+  jsBundles: Array<string>
+}
+
+export const ProdResources = ({
+  cssBundles,
+  jsBundles,
+}: ProdResourcesProps): JSX.Element => (
+  <>
+    {cssBundles.map((cssHref) => (
+      <link
+        key={cssHref}
+        rel="stylesheet"
+        type="text/css"
+        href={`/${cssHref}`}
+      />
+    ))}
+
+    {jsBundles.map((scriptSrc) => (
+      <script key={scriptSrc} type="module" src={`/${scriptSrc}`}></script>
+    ))}
+  </>
+)

packages/tuono/src/ssr/server.tsx

@@ -44,12 +44,8 @@ import { renderToReadableStream } from 'react-dom/server'
 import { RouterProvider, createRouter } from 'tuono-router'
 import type { createRoute } from 'tuono-router'
 
-import {
-  ProductionScriptLinks,
-  ProductionCssLinks,
-} from './components/ProductionTags'
-import { ViteScripts } from './components/ViteScripts'
-
+import { DevResources } from './components/DevResources'
+import { ProdResources } from './components/ProdResources'
 import type { Mode } from './types'
 import { streamToString } from './utils'
 
@@ -69,10 +65,13 @@ export function serverSideRendering(routeTree: RouteTree) {
 
     const stream = await renderToReadableStream(
       <>
-        <ProductionCssLinks mode={mode} bundles={cssBundles} />
-        <ProductionScriptLinks mode={mode} bundles={jsBundles} />
         <RouterProvider router={router} serverProps={serverProps as never} />
-        {mode === 'Dev' && <ViteScripts />}
+
+        {mode === 'Dev' && <DevResources />}
+        {mode === 'Prod' && (
+          <ProdResources cssBundles={cssBundles} jsBundles={jsBundles} />
+        )}
+
         <script>{`window.__TUONO_SSR_PROPS__=${payload as string}`}</script>
       </>,
     )