Implementing Server-Side Rendering (SSR) with Angular Universal

{
  "title": "Implementing Server-Side Rendering (SSR) with Angular Universal",
  "description": "Techniques for using Angular Universal to enable SSR, improving SEO and initial load times for Angular applications.",
  "category": "Angular Cursor Rules",
  "rules": [
    {
      "id": "angular-ssr-setup",
      "description": "Set up Angular Universal to enable server-side rendering for your Angular application.",
      "recommendation": "Use the Angular CLI to add Angular Universal to your project: `ng add @nguniversal/express-engine`.",
      "severity": "error"
    },
    {
      "id": "angular-ssr-hydration",
      "description": "Ensure proper hydration to reuse server-rendered DOM structures and maintain application state.",
      "recommendation": "Enable client-side hydration by adding `provideClientHydration()` in the providers array of `app.config.ts`.",
      "severity": "warning"
    },
    {
      "id": "angular-ssr-browser-apis",
      "description": "Avoid using browser-specific APIs that are unavailable during server-side rendering.",
      "recommendation": "Use Angular's `isPlatformBrowser` function to conditionally execute browser-specific code.",
      "severity": "error"
    },
    {
      "id": "angular-ssr-transferstate",
      "description": "Utilize Angular's TransferState API to transfer data from server to client, preventing redundant API calls.",
      "recommendation": "Implement TransferState to cache API responses during server-side rendering and reuse them on the client side.",
      "severity": "warning"
    },
    {
      "id": "angular-ssr-preboot",
      "description": "Use Preboot to manage user interactions during the transition from server-side to client-side rendering.",
      "recommendation": "Integrate Preboot to capture and replay user events, ensuring a seamless user experience.",
      "severity": "warning"
    },
    {
      "id": "angular-ssr-meta-tags",
      "description": "Set dynamic title and meta tags to improve SEO for server-side rendered pages.",
      "recommendation": "Use Angular's Meta and Title services to update meta tags based on page content.",
      "severity": "warning"
    },
    {
      "id": "angular-ssr-lazy-loading",
      "description": "Implement lazy loading to reduce initial load time and improve performance.",
      "recommendation": "Configure lazy loading for feature modules in your routing setup.",
      "severity": "warning"
    },
    {
      "id": "angular-ssr-prerendering",
      "description": "Use prerendering to generate static HTML for routes at build time, enhancing performance and SEO.",
      "recommendation": "Configure prerendering in `angular.json` and specify routes to prerender.",
      "severity": "warning"
    },
    {
      "id": "angular-ssr-caching",
      "description": "Implement caching mechanisms to reduce server load and improve response times.",
      "recommendation": "Use caching strategies like Redis or Memcached to store frequently accessed data.",
      "severity": "warning"
    },
    {
      "id": "angular-ssr-testing",
      "description": "Regularly test your server-side rendered application to ensure proper functionality and performance.",
      "recommendation": "Use tools like Lighthouse to audit your application's performance and SEO.",
      "severity": "warning"
    }
  ]
}