feat: add initial support to pages for server-side data fetching

.github/workflows/ci.yml

@@ -10,7 +10,7 @@ env:
   DOCS_APP_ARTIFACT_NAME: docs-app
   DOCS_APP_PATH: dist/apps/docs-app/
   NODE_OPTIONS: --max-old-space-size=6144
-  NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
+  VITE_ANALOG_PUBLIC_BASE_URL: ${{ vars.VITE_ANALOG_PUBLIC_BASE_URL }}
 
 jobs:
   commitlint:
@@ -73,6 +73,8 @@ jobs:
 
   unit:
     runs-on: ubuntu-latest
+    needs:
+      - build
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
@@ -91,6 +93,8 @@ jobs:
 
   e2e:
     runs-on: ubuntu-latest
+    needs:
+      - build
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3

.gitignore

@@ -54,4 +54,6 @@ stats.html
 
 # Nitro
 .nitro
-/migrations.json
+/migrations.json
+
+.env

.node-version

@@ -1 +1 @@
-18.16.0
+18.13.0

apps/analog-app/src/app/app.config.ts

@@ -2,10 +2,11 @@ import { provideHttpClient } from '@angular/common/http';
 import { ApplicationConfig } from '@angular/core';
 import { provideClientHydration } from '@angular/platform-browser';
 import { provideFileRouter } from '@analogjs/router';
+import { withNavigationErrorHandler } from '@angular/router';
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    provideFileRouter(),
+    provideFileRouter(withNavigationErrorHandler(console.error)),
     provideHttpClient(),
     provideClientHydration(),
   ],

apps/analog-app/src/app/routes/(home).ts → apps/analog-app/src/app/pages/(home).page.ts

@@ -1,11 +1,11 @@
-import { RouteMeta } from '@analogjs/router';
+import { Component } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { RouteMeta, useLoad } from '@analogjs/router';
 import { NgForOf, NgIf } from '@angular/common';
-import { HttpClient } from '@angular/common/http';
-import { Component, inject } from '@angular/core';
 import { RouterLinkWithHref } from '@angular/router';
-import { catchError, of } from 'rxjs';
+
 import { ProductAlertsComponent } from '../product-alerts/product-alerts.component';
-import { Product } from '../products';
+import { load } from './(home).server';
 
 export const routeMeta: RouteMeta = {
   title: 'Product List',
@@ -18,7 +18,7 @@ export const routeMeta: RouteMeta = {
   template: `
     <h2>Products</h2>
 
-    <div *ngFor="let product of products">
+    <div *ngFor="let product of data().products">
       <h3>
         <a
           [title]="product.name + ' details'"
@@ -51,17 +51,7 @@ export const routeMeta: RouteMeta = {
   ],
 })
 export default class ProductListComponent {
-  products!: Product[];
-  http = inject(HttpClient);
-
-  ngOnInit() {
-    this.http
-      .get<Product[]>('/api/v1/products')
-      .pipe(catchError(() => of([])))
-      .subscribe((products) => {
-        this.products = products;
-      });
-  }
+  data = toSignal(useLoad<typeof load>(), { requireSync: true });
 
   share() {
     window.alert('The product has been shared!');

apps/analog-app/src/app/pages/(home).server.ts

@@ -0,0 +1,11 @@
+import { PageServerLoad } from '@analogjs/router';
+
+import { Product } from '../products';
+
+export const load = async ({ fetch }: PageServerLoad) => {
+  const products = await fetch<Product[]>('/api/v1/products');
+
+  return {
+    products: products,
+  };
+};

apps/analog-app/src/app/routes/products.[productId].ts → apps/analog-app/src/app/pages/products.[productId].page.ts

@@ -1,11 +1,11 @@
 import { Component, inject, OnInit } from '@angular/core';
 import { CurrencyPipe, NgIf } from '@angular/common';
 import { injectActivatedRoute } from '@analogjs/router';
+import { HttpClient } from '@angular/common/http';
+import { catchError, of } from 'rxjs';
 
 import { Product } from '../products';
 import { CartService } from '../cart.service';
-import { HttpClient } from '@angular/common/http';
-import { catchError, of } from 'rxjs';
 
 @Component({
   selector: 'app-product-details',

apps/analog-app/src/app/pages/products.[productId].server.ts

@@ -0,0 +1,9 @@
+import { PageServerLoad } from '@analogjs/router';
+
+export const load = async ({ params, fetch }: PageServerLoad) => {
+  return {
+    slug: true,
+  };
+};
+
+export type LoadType = Awaited<ReturnType<typeof load>>;

apps/analog-app/src/app/pages/shipping/index.server.ts

@@ -0,0 +1,6 @@
+export const load = async () => {
+  console.log('shipping');
+  return {
+    shipping: true,
+  };
+};

apps/analog-app/tsconfig.app.json

@@ -7,6 +7,6 @@
     "useDefineForClassFields": false
   },
   "files": ["src/main.ts", "src/main.server.ts"],
-  "include": ["src/**/*.d.ts", "src/app/routes/**/*.ts"],
+  "include": ["src/**/*.d.ts", "src/app/pages/**/*.page.ts"],
   "exclude": ["**/*.test.ts", "**/*.spec.ts"]
 }

apps/analog-app/vite.config.ts

@@ -19,7 +19,7 @@ export default defineConfig(({ mode }) => {
       analog({
         apiPrefix: 'api',
         prerender: {
-          routes: ['/'],
+          routes: ['/', '/cart'],
         },
         vite: {
           inlineStylesExtension: 'scss',

apps/blog-app/src/app/pages/blog/index.page.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  standalone: true,
+  template: ` <h2>Home</h2> `,
+})
+export default class BlogComponent {}

apps/blog-app/vite.config.ts

@@ -7,6 +7,9 @@ import { defineConfig } from 'vite';
 export default defineConfig(() => {
   return {
     publicDir: 'src/assets',
+    optimizeDeps: {
+      include: ['@angular/common'],
+    },
     build: {
       target: ['es2020'],
     },

nx.json

@@ -27,6 +27,9 @@
     "test": {
       "dependsOn": ["^build"]
     },
+    "e2e": {
+      "dependsOn": ["^build"]
+    },
     "serve": {
       "dependsOn": ["^build"]
     },

packages/platform/src/lib/clear-client-page-endpoint.ts

@@ -0,0 +1,37 @@
+import { Plugin, normalizePath } from 'vite';
+
+export function clearClientPageEndpointsPlugin(): Plugin {
+  return {
+    name: 'analogjs-platform-clear-client-page-endpoint',
+    config() {
+      return {
+        build: {
+          rollupOptions: {
+            onwarn(warning) {
+              if (
+                warning.message.includes('empty chunk') &&
+                warning.message.endsWith('.server')
+              ) {
+                return;
+              }
+            },
+          },
+        },
+      };
+    },
+    transform(_code, id, options) {
+      if (
+        !options?.ssr &&
+        id.includes(normalizePath('src/app/pages')) &&
+        id.endsWith('.server.ts')
+      ) {
+        return {
+          code: 'export default undefined;',
+          map: null,
+        };
+      }
+
+      return;
+    },
+  };
+}

packages/platform/src/lib/platform-plugin.ts

@@ -6,6 +6,7 @@ import { ssrBuildPlugin } from './ssr/ssr-build-plugin';
 import { contentPlugin } from './content-plugin';
 import viteNitroPlugin from '@analogjs/vite-plugin-nitro';
 import angular from '@analogjs/vite-plugin-angular';
+import { clearClientPageEndpointsPlugin } from './clear-client-page-endpoint';
 
 export function platformPlugin(opts: Options = {}): Plugin[] {
   const { apiPrefix, ...platformOptions } = {
@@ -32,5 +33,6 @@ export function platformPlugin(opts: Options = {}): Plugin[] {
       ? devServerPlugin({ entryServer: opts.entryServer })
       : false) as Plugin,
     ...angular({ jit: platformOptions.jit, ...(opts?.vite ?? {}) }),
+    clearClientPageEndpointsPlugin(),
   ];
 }

packages/router/src/index.ts

@@ -7,3 +7,5 @@ export {
 export { RouteMeta } from './lib/models';
 export { provideFileRouter } from './lib/provide-file-router';
 export { MetaTag } from './lib/meta-tags';
+export { PageServerLoad, LoadReturn } from './lib/route-types';
+export { useLoad } from './lib/use-load';

packages/router/src/lib/constants.ts

@@ -0,0 +1,2 @@
+export const ENDPOINT_EXTENSION = '.server.ts';
+export const APP_DIR = 'src/app';

packages/router/src/lib/endpoints.ts

@@ -0,0 +1,3 @@
+export const PAGE_ENDPOINTS = import.meta.glob([
+  '/src/app/pages/**/*.server.ts',
+]);

packages/router/src/lib/route-config.ts

@@ -1,16 +1,18 @@
+import { inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import type { Route } from '@angular/router';
+import { firstValueFrom } from 'rxjs';
+
 import { RedirectRouteMeta, RouteConfig, RouteMeta } from './models';
 import { ROUTE_META_TAGS_KEY } from './meta-tags';
+import { PAGE_ENDPOINTS } from './endpoints';
 
 export function toRouteConfig(routeMeta: RouteMeta | undefined): RouteConfig {
-  if (!routeMeta) {
-    return {};
-  }
-
-  if (isRedirectRouteMeta(routeMeta)) {
+  if (routeMeta && isRedirectRouteMeta(routeMeta)) {
     return routeMeta;
   }
 
-  const { meta, ...routeConfig } = routeMeta;
+  let { meta, ...routeConfig } = routeMeta ?? {};
 
   if (Array.isArray(meta)) {
     routeConfig.data = { ...routeConfig.data, [ROUTE_META_TAGS_KEY]: meta };
@@ -21,6 +23,40 @@ export function toRouteConfig(routeMeta: RouteMeta | undefined): RouteConfig {
     };
   }
 
+  if (!routeConfig) {
+    routeConfig = {};
+  }
+
+  routeConfig.resolve = {
+    ...routeConfig.resolve,
+    load: async (route) => {
+      const routeConfig = route.routeConfig as Route & {
+        meta: { endpoint: string; endpointKey: string };
+      };
+
+      if (PAGE_ENDPOINTS[routeConfig.meta.endpointKey]) {
+        const { queryParams, fragment: hash, params } = route;
+        const url = new URL('', import.meta.env['VITE_ANALOG_PUBLIC_BASE_URL']);
+        url.pathname = `/api/_analog${routeConfig.meta.endpoint}`;
+        url.search = `${new URLSearchParams(queryParams).toString()}`;
+        url.hash = hash ?? '';
+
+        Object.keys(params).forEach((param) => {
+          url.pathname = url.pathname.replace(`[${param}]`, params[param]);
+        });
+
+        if ((globalThis as any).$fetch) {
+          return (globalThis as any).$fetch(url.pathname);
+        }
+
+        const http = inject(HttpClient);
+        return firstValueFrom(http.get(`${url.href}`));
+      }
+
+      return {};
+    },
+  };
+
   return routeConfig;
 }
 

packages/router/src/lib/route-types.ts

@@ -0,0 +1,13 @@
+import type { H3Event, H3EventContext } from 'h3';
+import { $Fetch } from 'nitropack';
+
+export type PageServerLoad = {
+  params: H3EventContext['params'];
+  req: H3Event['node']['req'];
+  res: H3Event['node']['res'];
+  fetch: $Fetch;
+};
+
+export type LoadReturn<
+  A extends (pageServerLoad: PageServerLoad) => Promise<any>
+> = Awaited<ReturnType<A>>;

packages/router/src/lib/routes.spec.ts

@@ -515,7 +515,7 @@ describe('routes', () => {
     it('should add meta tags to data dictionary when they are defined as array', async () => {
       const routeMeta: RouteMeta = {
         data: { foo: 'bar' },
-        resolve: { x: () => of('y') },
+        resolve: { x: () => of('y'), load: expect.anything() },
         meta: [
           { charset: 'utf-8' },
           {
@@ -533,7 +533,7 @@ describe('routes', () => {
       // routeMeta.data should not be mutated
       expect(routeMeta.data).not.toBe(resolvedRoute.data);
       // routeMeta.resolve should not be changed
-      expect(resolvedRoute.resolve).toBe(routeMeta.resolve);
+      expect(resolvedRoute.resolve).toStrictEqual(routeMeta.resolve);
     });
 
     it('should add meta tags to resolve dictionary when they are defined as resolver', async () => {
@@ -554,6 +554,7 @@ describe('routes', () => {
       expect(resolvedRoute.resolve).toEqual({
         ...routeMeta.resolve,
         [ROUTE_META_TAGS_KEY]: routeMeta.meta,
+        load: expect.anything(),
       });
       // routeMeta.resolve should not be mutated
       expect(routeMeta.resolve).not.toBe(resolvedRoute.resolve);