feat: Preload assets using Vite manifest

core/package.json

@@ -47,6 +47,6 @@
     "node-fetch": "^2.6.1",
     "rollup": "^2.34.2",
     "rollup-plugin-esbuild": "^2.6.1",
-    "vite-ssr": "^0.1.0"
+    "vite-ssr": "0.1.1"
   }
 }

core/worker/assets.js

@@ -1,5 +1,5 @@
 import meta from '__vitedge_meta__'
-import { getAssetFromKV } from '@cloudflare/kv-asset-handler'
+import { getAssetFromKV, mapRequestToAsset } from '@cloudflare/kv-asset-handler'
 
 export function isStaticAsset(event) {
   const url = new URL(event.request.url)
@@ -25,3 +25,24 @@ export async function handleStaticAsset(event) {
 
   return response
 }
+
+export async function getSsrManifest(event) {
+  try {
+    const response = await getAssetFromKV(event, {
+      mapRequestToAsset: (request) => {
+        const url = new URL(request.url)
+        url.pathname = '/ssr-manifest.json'
+        return mapRequestToAsset(new Request(url.toString(), request))
+      },
+    })
+
+    if (!response.ok) {
+      throw new Error('SSR Manifest was not found in KV')
+    }
+
+    return await response.json()
+  } catch (error) {
+    console.error(error)
+    return {}
+  }
+}

core/worker/render.js

@@ -1,4 +1,5 @@
 import router from '__vitedge_router__'
+import { getSsrManifest } from './assets'
 import { getCachedResponse, setCachedResponse } from './cache'
 import { getPageProps } from './props'
 import { createResponse } from './utils'
@@ -15,8 +16,12 @@ function extractAttribute(string, attr) {
 function buildLinkHeader(html, { destinations = [] } = {}) {
   let filesToPush = []
 
+  // Only care about head part
+  const [head = ''] = html.split('</head>')
+
   const matches =
-    html.match(/<(script[\s\w="]+src.+?)>|<(link[\s\w="]+href.+?)>/gm) || []
+    // Regexp should be OK for parsing this HTML subset
+    head.match(/<(script[\s\w="]+src.+?)>|<(link[\s\w="]+href.+?)>/gm) || []
 
   for (const match of matches) {
     if (match) {
@@ -56,12 +61,18 @@ export async function handleViewRendering(event, { http2ServerPush }) {
     return cachedResponse
   }
 
-  const page = await getPageProps(event)
+  const [page, manifest] = await Promise.all([
+    getPageProps(event),
+    getSsrManifest(event),
+  ])
+
   const initialState = page ? await page.response.json() : {}
 
   const { html } = await router.render({
     initialState,
     request: event.request,
+    manifest,
+    preload: true,
   })
 
   const headers = {

core/yarn.lock

@@ -349,11 +349,6 @@ is-number@^7.0.0:
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
   integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
 
-is-plain-obj@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-2.1.0.tgz#45e42e37fccf1f40da8e5f76ee21515840c09287"
-  integrity sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==
-
 is-reference@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/is-reference/-/is-reference-1.2.1.tgz#8b2dac0b371f4bc994fdeaba9eb542d03002d0b7"
@@ -378,13 +373,6 @@ magic-string@^0.25.7:
   dependencies:
     sourcemap-codec "^1.4.4"
 
-merge-options@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/merge-options/-/merge-options-3.0.3.tgz#802b401f0de8dfae00d2a1e2dab9759b3dd98fe4"
-  integrity sha512-jytfjQxL5mVrtD9O24zOXU4neV3uVbQdn1F0o1pzSa1yH9LTEUOtfwpWSsyAxrrrXqAFTxaU4ynqkmekHLvYew==
-  dependencies:
-    is-plain-obj "^2.1.0"
-
 merge2@^1.3.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
@@ -503,14 +491,13 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
-vite-ssr@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/vite-ssr/-/vite-ssr-0.1.0.tgz#c93f50a31d17e4805b3f29ccb14876103f1aa09e"
-  integrity sha512-nxnclUbReGB4n/qiMf8wZrBDCrf5K3wKRCLyALXvq+O9Vb6S4q4bofhxrVhSjVkOXgj1WAag17bBn98FXGmz+g==
+[email protected].1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/vite-ssr/-/vite-ssr-0.1.1.tgz#a6eb2c39be5c8ea4e02097c379999f1e27f8e419"
+  integrity sha512-IbuJIi9dej9DIqxZRInOaNe77W/fkEqlQilUJFhMqaYagwUYlsoTIwjT/3ZmJVQfmO10mMXmPOs70kGf9K3Eow==
   dependencies:
     "@rollup/plugin-replace" "^2.3.3"
     "@vue/server-renderer" "^3.0.5"
-    merge-options "^3.0.3"
 
 wrappy@1:
   version "1.0.2"

example/node-site/index.js

@@ -4,6 +4,7 @@ import fetch from 'node-fetch'
 import api from '../dist/functions.js'
 import ssrBuild from '../dist/ssr/main.js'
 import pkgJson from '../dist/ssr/package.json'
+import manifest from '../dist/client/ssr-manifest.json'
 
 // @ts-ignore
 global.fetch = fetch // Must be polyfilled for SSR
@@ -87,6 +88,8 @@ server.get('*', async (request, response) => {
     const { html } = await router.render({
       request: { ...request, url: href },
       initialState,
+      manifest,
+      preload: true,
     })
     response.end(html)
   } catch (error) {