Vercel Deployment Architecture
Relevant source files
The following files were used as context for generating this wiki page:
The Vercel Deployment Architecture for Sunrise Communication manages the distribution of a signal-based Angular application integrated with Server-Side Rendering (SSR). This architecture ensures that high-intent service clusters and product catalogs are optimized for search engines and user discovery through a combination of static route generation and server-side hydration.
The system uses a custom build process to generate static assets for the Vercel Content Delivery Network (CDN) while maintaining the ability to serve dynamic content via an Express-based server. This hybrid approach supports SEO-critical features like JSON-LD @graph injection and AEO (Answer Engine Optimization) answer boxes.
Sources: implementation_plan.md:10-18, sunrise-angular/build-routes.js:33-40
Build and Routing Strategy
The project employs a two-tier routing strategy to balance performance and SEO requirements. Static routes are generated during the build phase to facilitate fast CDN delivery, while dynamic routes utilize Angular's RenderMode.Server to ensure content is pre-rendered for crawlers.
Static Route Generation
A Node.js script, build-routes.js, automates the creation of physical directories and index.html files within the dist/ folder. This process enables "clean URLs" on the Vercel CDN without requiring a runtime server for every request.
The diagram shows the sequence from the initial Angular build to the generation of static route artifacts for deployment.
Sources: sunrise-angular/build-routes.js:3-32
Pre-Defined Static Routes
The deployment configuration includes a comprehensive list of static routes that are explicitly generated for the CDN.
| Route Category | Example Paths |
|---|---|
| Core Pages | /about, /services, /contact, /404 |
| Service Clusters | /services/cctv-surveillance-systems, /services/biometric-access-control |
| Locations | /locations/cctv-installation-thane-west, /locations/security-systems-navi-mumbai |
| Technical Guides | /guides/housing-society-cctv-installation-guide, /guides/cctv-amc-checklist-for-societies |
| Tools | /tools/cctv-storage-calculator |
Sources: sunrise-angular/build-routes.js:20-39
Server-Side Rendering (SSR) Configuration
The application utilizes @angular/ssr with an Express server to handle dynamic data hydration and SEO metadata injection. All routes are configured with RenderMode.Server to ensure that the initial HTML payload contains the full content, including JSON-LD schema graphs.
This diagram illustrates the flow for dynamic product detail pages where server-side execution is required to fetch specific data before responding.
Sources: implementation_plan.md:144-159, implementation_plan.md:286-292
SSR Verification Parameters
To ensure the deployment remains technically accurate, the architecture must satisfy specific SSR checks:
- Transfer State: Uses
provideHttpClient(withFetch())to automatically transfer state from server to client. - HTML Shell: The server-rendered response must contain actual product content, not just the root component tags.
- Meta Discovery: Dynamic
<title>and<meta>tags must reflect the specific entity (Product, Service, or Guide) being requested.
Sources: implementation_plan.md:118-125, implementation_plan.md:295-303
Deployment Configuration
The vercel.json file (if present in the root or subdirectory) defines the behavior of the Vercel platform regarding routing, headers, and clean URLs. The project structure separates the frontend Angular application within the sunrise-angular/ directory.
Build and Implementation Summary
| Component | Implementation Detail |
|---|---|
| Framework | Angular v22 with Standalone Components |
| SSR Engine | @angular/ssr with Express |
| Output Mode | server |
| Data Fetching | HttpClient with withFetch() for SSR compatibility |
| Deployment Target | Vercel CDN (Static) + Vercel Functions (SSR) |
Sources: implementation_plan.md:10-25, sunrise-angular/README.md:1-25
The Vercel Deployment Architecture effectively bridges the gap between static performance and dynamic SEO needs. By using a custom route builder alongside Angular SSR, the project ensures that high-value pages like the Requirement Estimator and Service Clusters are discoverable by AI agents and human users alike.