feat(nuxt): server-only pages

packages/nuxt/src/app/components/island-renderer.ts

@@ -15,7 +15,6 @@ export default defineComponent({
   },
   setup (props) {
     const component = islandComponents[props.context.name] as ReturnType<typeof defineAsyncComponent>
-
     if (!component) {
       throw createError({
         statusCode: 404,

packages/nuxt/src/app/components/nuxt-island.ts

@@ -1,5 +1,5 @@
 import type { Component } from 'vue'
-import { Fragment, Teleport, computed, createStaticVNode, createVNode, defineComponent, getCurrentInstance, h, nextTick, onMounted, ref, toRaw, watch, withMemo } from 'vue'
+import { Fragment, Teleport, computed, createStaticVNode, createVNode, defineComponent, getCurrentInstance, h, nextTick, onErrorCaptured, onMounted, ref, toRaw, watch, withMemo } from 'vue'
 import { debounce } from 'perfect-debounce'
 import { hash } from 'ohash'
 import { appendResponseHeader } from 'h3'
@@ -13,8 +13,10 @@ import { join } from 'pathe'
 import type { NuxtIslandResponse } from '../../core/runtime/nitro/renderer'
 import { useNuxtApp, useRuntimeConfig } from '../nuxt'
 import { prerenderRoutes, useRequestEvent } from '../composables/ssr'
+import { useRoute } from '../../app/composables/router'
 import { getFragmentHTML } from './utils'
 
+
 // @ts-expect-error virtual file
 import { remoteComponentIslands, selectiveClient } from '#build/nuxt.config.mjs'
 
@@ -70,6 +72,7 @@ export default defineComponent({
     }
   },
   async setup (props, { slots, expose }) {
+    const route = useRoute()
     let canTeleport = import.meta.server
     const teleportKey = ref(0)
     const key = ref(0)
@@ -146,6 +149,7 @@ export default defineComponent({
     const cHead = ref<Record<'link' | 'style', Array<Record<string, string>>>>({ link: [], style: [] })
     useHead(cHead)
 
+    onErrorCaptured((err) => { console.error(err)})
     async function _fetchComponent (force = false) {
       const key = `${props.name}_${hashId.value}`
 
@@ -157,9 +161,11 @@ export default defineComponent({
         // Hint to Nitro to prerender the island component
         nuxtApp.runWithContext(() => prerenderRoutes(url))
       }
-      // TODO: Validate response
+
+ // TODO: Validate response
       // $fetch handles the app.baseURL in dev
       const r = await eventFetch(withQuery(((import.meta.dev && import.meta.client) || props.source) ? url : joinURL(config.app.baseURL ?? '', url), {
+        url: route.fullPath,
         ...props.context,
         props: props.props ? JSON.stringify(props.props) : undefined
       }))
@@ -173,6 +179,8 @@ export default defineComponent({
       }
       setPayload(key, result)
       return result
+
+
     }
 
     async function fetchComponent (force = false) {

packages/nuxt/src/components/islandsTransform.ts

@@ -8,8 +8,7 @@ import MagicString from 'magic-string'
 import { ELEMENT_NODE, parse, walk } from 'ultrahtml'
 import { hash } from 'ohash'
 import { resolvePath } from '@nuxt/kit'
-import { isVue } from '../core/utils'
-
+import { isVue } from '../core/utils' 
 interface ServerOnlyComponentTransformPluginOptions {
   getComponents: () => Component[]
   /**

packages/nuxt/src/components/runtime/server-component.ts

@@ -25,3 +25,28 @@ export const createServerComponent = (name: string) => {
     }
   })
 }
+
+/*@__NO_SIDE_EFFECTS__*/
+export const createIslandPage = (name: string) => {
+  return defineComponent({
+    name,
+    inheritAttrs: false,
+    props: { lazy: Boolean },
+    setup (props, { attrs, slots, expose }) {
+      const islandRef = ref<null | typeof NuxtIsland>(null)
+
+      expose({
+        refresh: () => islandRef.value?.refresh()
+      })
+
+      return () => {
+        return h('div', [h(NuxtIsland, {
+          name,
+          lazy: props.lazy,
+          props: attrs,
+          ref: islandRef
+        }, slots)])
+      }
+    }
+  })
+}

packages/nuxt/src/components/templates.ts

@@ -72,12 +72,21 @@ export const componentsIslandsTemplate: NuxtTemplate = {
   // components.islands.mjs'
   getContents ({ app }) {
     const components = app.components
+    const pages = app.pages
     const islands = components.filter(component =>
       component.island ||
       // .server components without a corresponding .client component will need to be rendered as an island
       (component.mode === 'server' && !components.some(c => c.pascalName === component.pascalName && c.mode === 'client'))
     )
 
+    const pageExports = pages?.filter(p => (p.server && p.file && p.name)).map((p) => {
+      const comment = createImportMagicComments({
+        chunkName: p.file!
+      })
+
+      return `"${p.name}": defineAsyncComponent(${genDynamicImport(p.file!, { comment })})`
+    }) || []
+
     return [
       'import { defineAsyncComponent } from \'vue\'',
       'export const islandComponents = import.meta.client ? {} : {',
@@ -87,7 +96,7 @@ export const componentsIslandsTemplate: NuxtTemplate = {
           const comment = createImportMagicComments(c)
           return `  "${c.pascalName}": defineAsyncComponent(${genDynamicImport(c.filePath, { comment })}.then(c => ${exp}))`
         }
-      ).join(',\n'),
+      ).concat(pageExports).join(',\n'),
       '}'
     ].join('\n')
   }

packages/nuxt/src/pages/module.ts

@@ -396,8 +396,11 @@ export default defineNuxtModule({
     nuxt.hook('build:manifest', (manifest) => {
       if (nuxt.options.dev) { return }
       const sourceFiles = getSources(nuxt.apps.default.pages || [])
-
       for (const key in manifest) {
+        if (manifest[key].src && Object.values(nuxt.apps).some(app => app.pages?.some(page => page.server && page.file === join(nuxt.options.srcDir, manifest[key].src!) ))) {
+          delete manifest[key]
+          continue
+        }
         if (manifest[key].isEntry) {
           manifest[key].dynamicImports =
             manifest[key].dynamicImports?.filter(i => !sourceFiles.includes(i))

packages/nuxt/src/pages/runtime/composables.ts

@@ -38,6 +38,8 @@ export interface PageMeta {
   path?: string
   /** Set to `false` to avoid scrolling to top on page navigations */
   scrollToTop?: boolean | ((to: RouteLocationNormalizedLoaded, from: RouteLocationNormalizedLoaded) => boolean)
+  /** render the page as a server island */
+  island?: boolean
 }
 
 declare module 'vue-router' {

packages/nuxt/src/pages/runtime/page.ts

@@ -38,7 +38,7 @@ export default defineComponent({
       default: null
     }
   },
-  setup (props, { attrs, expose }) {
+  setup(props, { attrs, expose }) {
     const nuxtApp = useNuxtApp()
     const pageRef = ref()
     const forkRoute = inject(PageRouteSymbol, null)
@@ -142,15 +142,15 @@ export default defineComponent({
   }
 })
 
-function _mergeTransitionProps (routeProps: TransitionProps[]): TransitionProps {
+function _mergeTransitionProps(routeProps: TransitionProps[]): TransitionProps {
   const _props: TransitionProps[] = routeProps.map(prop => ({
     ...prop,
     onAfterLeave: prop.onAfterLeave ? toArray(prop.onAfterLeave) : undefined
   }))
   return defu(..._props as [TransitionProps, TransitionProps])
 }
 
-function haveParentRoutesRendered (fork: RouteLocationNormalizedLoaded | null, newRoute: RouteLocationNormalizedLoaded, Component?: VNode) {
+function haveParentRoutesRendered(fork: RouteLocationNormalizedLoaded | null, newRoute: RouteLocationNormalizedLoaded, Component?: VNode) {
   if (!fork) { return false }
 
   const index = newRoute.matched.findIndex(m => m.components?.default === Component?.type)
@@ -163,7 +163,7 @@ function haveParentRoutesRendered (fork: RouteLocationNormalizedLoaded | null, n
     (Component && generateRouteKey({ route: newRoute, Component }) !== generateRouteKey({ route: fork, Component }))
 }
 
-function hasChildrenRoutes (fork: RouteLocationNormalizedLoaded | null, newRoute: RouteLocationNormalizedLoaded, Component?: VNode) {
+function hasChildrenRoutes(fork: RouteLocationNormalizedLoaded | null, newRoute: RouteLocationNormalizedLoaded, Component?: VNode) {
   if (!fork) { return false }
 
   const index = newRoute.matched.findIndex(m => m.components?.default === Component?.type)

packages/nuxt/src/pages/runtime/plugins/router.ts

@@ -71,7 +71,7 @@ const plugin: Plugin<{ router: Router }> = defineNuxtPlugin({
       ? nuxtApp.ssrContext!.url
       : createCurrentLocation(routerBase, window.location, nuxtApp.payload.path)
 
-    const router = createRouter({
+      const router = createRouter({
       ...routerOptions,
       scrollBehavior: (to, from, savedPosition) => {
         if (from === START_LOCATION) {
@@ -249,7 +249,7 @@ const plugin: Plugin<{ router: Router }> = defineNuxtPlugin({
         await nuxtApp.runWithContext(() => showError(error))
       }
     })
-
+  
     return { provide: { router } }
   }
 })

packages/nuxt/src/pages/utils.ts

@@ -14,6 +14,7 @@
 
 import { uniqueBy } from '../core/utils'
 import { toArray } from '../utils'
+import { distDir } from '../dirs'
 
 enum SegmentParserState {
   initial,
@@ -87,6 +88,11 @@
     // Array where routes should be added, useful when adding child routes
     let parent = routes
 
+    if(segments[segments.length - 1].endsWith('.server')) {
+      segments[segments.length - 1] = segments[segments.length - 1].replace('.server', '')
+      route.server = true
+    }
+
     for (let i = 0; i < segments.length; i++) {
       const segment = segments[i]
 
@@ -183,7 +189,7 @@
       try {
         extractedMeta[key] = JSON.parse(runInNewContext(`JSON.stringify(${valueString})`, {}))
       } catch {
         console.debug(`[nuxt] Skipping extraction of \`${key}\` metadata as it is not JSON-serializable (reading \`${absolutePath}\`).`)
         dynamicProperties.add(key)
         continue
       }
@@ -196,7 +202,7 @@
           continue
         }
         if (element.type !== 'Literal' || typeof element.value !== 'string') {
           console.debug(`[nuxt] Skipping extraction of \`${key}\` metadata as it is not an array of string literals (reading \`${absolutePath}\`).`)
           dynamicProperties.add(key)
           continue
         }
@@ -207,7 +213,7 @@
     }
 
     if (property.value.type !== 'Literal' || typeof property.value.value !== 'string') {
       console.debug(`[nuxt] Skipping extraction of \`${key}\` metadata as it is not a string literal or array of string literals (reading \`${absolutePath}\`).`)
       dynamicProperties.add(key)
       continue
     }
@@ -412,6 +418,7 @@
         meta: serializeRouteValue(metaFiltered, skipMeta),
         alias: serializeRouteValue(toArray(page.alias), skipAlias),
         redirect: serializeRouteValue(page.redirect),
+        server: serializeRouteValue(page.server),
       }
 
       for (const key of ['path', 'name', 'meta', 'alias', 'redirect'] satisfies NormalizedRouteKeys) {
@@ -423,7 +430,7 @@
       if (page.children?.length) {
         route.children = normalizeRoutes(page.children, metaImports, overrideMeta).routes
       }
-
+ 
       // Without a file, we can't use `definePageMeta` to extract route-level meta from the file
       if (!page.file) {
         return route
@@ -439,7 +446,7 @@
         meta: `${metaImportName} || {}`,
         alias: `${metaImportName}?.alias || []`,
         redirect: `${metaImportName}?.redirect`,
-        component: genDynamicImport(file, { interopDefault: true })
+        component: `(${metaImportName}?.island || ${route.server}) ? ${genDynamicImport(resolve(distDir, 'components/runtime/server-component'))}.then(({ createIslandPage }) => createIslandPage(${ route.name })) : ${genDynamicImport(file, { interopDefault: true })}`  
       }
 
       if (route.children != null) {