updates

frontEnd/app/services/[slug]/page.tsx

@@ -9,9 +9,10 @@ import Transform from "@/components/pages/services/Transform";
 import Footer from "@/components/shared/layout/footer/Footer";
 import ServicesScrollProgressButton from "@/components/pages/services/ServicesScrollProgressButton";
 import ServicesInitAnimations from "@/components/pages/services/ServicesInitAnimations";
-import { serviceService, Service } from "@/lib/api/serviceService";
+import { Service } from "@/lib/api/serviceService";
 import { generateServiceMetadata } from "@/lib/seo/metadata";
 import { ServiceSchema, BreadcrumbSchema } from "@/components/shared/seo/StructuredData";
+import { API_CONFIG } from "@/lib/config/api";
 
 interface ServicePageProps {
   params: Promise<{
@@ -19,16 +20,30 @@ interface ServicePageProps {
   }>;
 }
 
-// Force static generation - pages are pre-rendered at build time
-export const dynamic = 'force-static';
-export const dynamicParams = false; // Return 404 for unknown slugs
-export const revalidate = false; // Never revalidate - fully static
-
-// Generate static params for all services (optional - for better performance)
+// Generate static params for all services at build time (optional - for better performance)
+// This pre-generates known pages, but new pages can still be generated on-demand
 export async function generateStaticParams() {
   try {
-    const services = await serviceService.getServices();
-    return services.results.map((service: Service) => ({
+    const response = await fetch(
+      `${API_CONFIG.BASE_URL}/api/services/`,
+      {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        next: { revalidate: 60 }, // Revalidate every minute for faster image updates
+      }
+    );
+
+    if (!response.ok) {
+      console.error('Error fetching services for static params:', response.status);
+      return [];
+    }
+
+    const data = await response.json();
+    const services = data.results || data;
+    
+    return services.map((service: Service) => ({
       slug: service.slug,
     }));
   } catch (error) {
@@ -39,9 +54,25 @@ export async function generateStaticParams() {
 
 // Generate enhanced metadata for each service page
 export async function generateMetadata({ params }: ServicePageProps) {
+  const { slug } = await params;
+  
   try {
-    const { slug } = await params;
-    const service = await serviceService.getServiceBySlug(slug);
+    const response = await fetch(
+      `${API_CONFIG.BASE_URL}/api/services/${slug}/`,
+      {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        next: { revalidate: 60 }, // Revalidate every minute for faster image updates
+      }
+    );
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const service = await response.json();
     
     return generateServiceMetadata(service);
   } catch (error) {
@@ -53,23 +84,34 @@ export async function generateMetadata({ params }: ServicePageProps) {
 }
 
 const ServicePage = async ({ params }: ServicePageProps) => {
-  let service: Service;
+  const { slug } = await params;
   
   try {
-    const { slug } = await params;
-    service = await serviceService.getServiceBySlug(slug);
-  } catch (error) {
-    notFound();
-  }
+    const response = await fetch(
+      `${API_CONFIG.BASE_URL}/api/services/${slug}/`,
+      {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        next: { revalidate: 60 }, // Revalidate every minute for faster image updates
+      }
+    );
 
-  // Breadcrumb data for structured data
-  const breadcrumbItems = [
-    { name: 'Home', url: '/' },
-    { name: 'Services', url: '/services' },
-    { name: service.title, url: `/services/${service.slug}` },
-  ];
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
 
-  return (
+    const service: Service = await response.json();
+
+    // Breadcrumb data for structured data
+    const breadcrumbItems = [
+      { name: 'Home', url: '/' },
+      { name: 'Services', url: '/services' },
+      { name: service.title, url: `/services/${service.slug}` },
+    ];
+
+    return (
     <div className="enterprise-app">
       {/* SEO Structured Data */}
       <ServiceSchema service={service} />
@@ -88,7 +130,10 @@ const ServicePage = async ({ params }: ServicePageProps) => {
       <ServicesScrollProgressButton />
       <ServicesInitAnimations />
     </div>
-  );
+    );
+  } catch (error) {
+    notFound();
+  }
 };
 
 export default ServicePage;