Merge branch 'main' of github.com:logotip4ik/nuxt into feat/client-on…

…ly-page
nuxt · danielroe · Mar 6, 2024 · Jan 3, 2024 · Jan 3, 2024 · Jan 3, 2024
commit e831dca86fa4652d0ce20911e28a62dbfdf5c32d
@@ -15,6 +15,7 @@ import type { NuxtPage } from 'nuxt/schema'
 import { uniqueBy } from '../core/utils'
 import { toArray } from '../utils'
 import { pageWrappersQueryKey } from './plugins/page-wrappers'
+import { distDir } from '../dirs'
 
 enum SegmentParserState {
   initial,
@@ -460,9 +461,18 @@ export function normalizeRoutes (routes: NuxtPage[], metaImports: Set<string> =
         meta: `${metaImportName} || {}`,
         alias: `${metaImportName}?.alias || []`,
         redirect: `${metaImportName}?.redirect`,
-        component: genDynamicImport(
-          page.mode !== undefined ? withQuery(file, { [pageWrappersQueryKey]: page.mode }) : file
-        , { interopDefault: true })
+        component: page.mode === 'server'
+          ? `() => createIslandPage(${route.name})`
+          : genDynamicImport(file, { interopDefault: true })
+      }
+
+      if (page.mode === 'server') {
+        metaImports.add(`
+let _createIslandPage
+async function createIslandPage (name) {
+  _createIslandPage ||= await import(${JSON.stringify(resolve(distDir, 'components/runtime/server-component'))}).then(r => r.createIslandPage)
+  return _createIslandPage(name)
+};`)
       }
 
       if (route.children != null) {

@@ -22,7 +22,7 @@ export type TSReference = { types: string } | { path: string }
 export type WatchEvent = 'add' | 'addDir' | 'change' | 'unlink' | 'unlinkDir'
 
 // If the user does not have `@vue/language-core` installed, VueCompilerOptions will be typed as `any`,
-// thus making the whole `VueTSConfig` type `any`. We only augment TSConfig if VueCompilerOptions is available. 
+// thus making the whole `VueTSConfig` type `any`. We only augment TSConfig if VueCompilerOptions is available.
 export type VueTSConfig = 0 extends 1 & VueCompilerOptions ? TSConfig : TSConfig & { vueCompilerOptions?: VueCompilerOptions }
 
 export type NuxtPage = {
@@ -33,6 +33,17 @@ export type NuxtPage = {
   alias?: string[] | string
   redirect?: RouteLocationRaw
   children?: NuxtPage[]
+  /**
+   * Set the render mode.
+   *
+   * `all` means the page will be rendered isomorphically - with JavaScript both on client and server.
+   *
+   * `server` means pages are automatically rendered with server components, so there will be no JavaScript to render the page in your client bundle.
+   *
+   * `client` means that page will render only on the client side.
+   *
+   * @default 'all'
+   */
   mode?: 'client' | 'server' | 'all'
 }