convert CSR pages to SSR/Static rendering for SEO optimization

app/caregivers/page.js

@@ -1,5 +1,5 @@
-import dynamic from "next/dynamic";
 import Layout from "@/components/layout/Layout";
+import CaregiversPage from "./CaregiversPage";
 
 export const metadata = {
   title: "Trusted Caregiver Support Services – Rapharehab Clinic",
@@ -7,10 +7,6 @@ export const metadata = {
     "Rapharehab offers professional caregiver services tailored to support patient recovery, ensuring comfort, safety, and dedicated assistance.",
 };
 
-const CaregiversPage = dynamic(() => import("../caregivers/CaregiversPage"), {
-  ssr: false,
-});
-
 export default function Page() {
   return (
     <Layout

app/contact/page.js

@@ -1,5 +1,5 @@
-import dynamic from "next/dynamic";
 import Layout from "@/components/layout/Layout";
+import ContactClient from "./ContactClient";
 
 export const metadata = {
   title: "Contact Rapharehab | Etobicoke",
@@ -7,11 +7,6 @@ export const metadata = {
     "Book your physiotherapy appointment in Etobicoke today. Call now or schedule online for expert rehab care.",
 };
 
-// 👇 Dynamically import ContactClient to disable SSR (fix hydration issues)
-const ContactClient = dynamic(() => import("../contact/ContactClient"), {
-  ssr: false,
-});
-
 export default function Page() {
   return (
     <Layout

app/faq/page.js

@@ -1,11 +1,5 @@
-// src/app/faq/page.jsx
-import dynamic from "next/dynamic";
 import Layout from "@/components/layout/Layout";
-
+import FaqClient from "./FaqClient";
-const FaqClient = dynamic(
-  () => import("../faq/FaqClient"),
-  { ssr: false }
-);
 
 export const metadata = {
   title: "RaphaRehab FAQs – Rehab & Wellness Help",

app/locations/page.js

@@ -1,17 +1,16 @@
-import dynamic from 'next/dynamic';
+import LocationsClient from './LocationsClient';
-const LocationsClient = dynamic(() => import('./LocationsClient'), { ssr: false });
 import Layout from "@/components/layout/Layout"
 
 export const metadata = {
-    title: "Rapharehab Locations - Physiotherapy Clinic in Etobicoke & Serving GTA",
+  title: "Rapharehab Locations - Physiotherapy Clinic in Etobicoke & Serving GTA",
-    description:
+  description:
-        "Visit Rapharehab, a leading physiotherapy clinic in Etobicoke serving Toronto, Mississauga, and the GTA. Professional rehabilitation services close to home.",
+    "Visit Rapharehab, a leading physiotherapy clinic in Etobicoke serving Toronto, Mississauga, and the GTA. Professional rehabilitation services close to home.",
 };
 
 export default function Gallery() {
-    return (
+  return (
-        <Layout headerStyle={1} footerStyle={1} breadcrumbTitle="Locations" bannerImage="/assets/images/location/location-banner.webp">
+    <Layout headerStyle={1} footerStyle={1} breadcrumbTitle="Locations" bannerImage="/assets/images/location/location-banner.webp">
-            <LocationsClient />
+      <LocationsClient />
-        </Layout>
+    </Layout>
-    );
+  );
 }

app/page.js

@@ -1,50 +1,31 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import dynamic from "next/dynamic";
 import Layout from "@/components/layout/Layout";
-
+import AboutSection from "@/components/sections/home/AboutSection";
-// ✅ Banner components — immediate load (important for FCP)
+import ServicesSection from "@/components/sections/home/ServicesSection";
-import Banner from "@/components/sections/home2/Banner";
+import MobileServicesSection from "@/components/sections/home/MobileServicesSection";
-import MobileBanner from "@/components/sections/home2/MobileBanner";
+import MobileFeatureCard from "@/components/sections/home/MobileFeatureCard";
-
+import Features from "@/components/sections/home2/Features";
-// ✅ Lazy load all other sections (FCP/LCP performance boost)
+import FaqSection from "@/components/sections/home/FaqSection";
-const AboutSection = dynamic(() => import("@/components/sections/home/AboutSection"), { ssr: false });
+import AreaOfInjury from "@/components/sections/home/AreaOfInjury";
-const ServicesSection = dynamic(() => import("@/components/sections/home/ServicesSection"), { ssr: false });
+import WhyChooseUsSection from "@/components/sections/home/WhyChooseusSection";
-const MobileServices = dynamic(() => import("@/components/sections/home/MobileServicesSection"), { ssr: false });
+import CounterSection from "@/components/sections/home/CounterSection";
-const MobileFeatureCard = dynamic(() => import("@/components/sections/home/MobileFeatureCard"), { ssr: false });
+import Testimonial from "@/components/sections/home1/Testimonial";
-const Features = dynamic(() => import("@/components/sections/home2/Features"), { ssr: false });
+import Solution from "@/components/sections/home2/Solution";
-const FaqSection = dynamic(() => import("@/components/sections/home/FaqSection"), { ssr: false });
+import Video from "@/components/sections/home1/Video";
-const AreaOfInjury = dynamic(() => import("@/components/sections/home/AreaOfInjury"), { ssr: false });
+import Faq from "@/components/sections/home/NeedHelpSection";
-const WhyChooseUsSection = dynamic(() => import("@/components/sections/home/WhyChooseusSection"), { ssr: false });
+import { HomeBannerSwitch, HomeServicesSwitch } from "@/components/sections/home/HomeBannerSwitch";
-const CounterSection = dynamic(() => import("@/components/sections/home/CounterSection"), { ssr: false });
-const Testimonial = dynamic(() => import("@/components/sections/home1/Testimonial"), { ssr: false });
-const Solution = dynamic(() => import("@/components/sections/home2/Solution"), { ssr: false });
-const Video = dynamic(() => import("@/components/sections/home1/Video"), { ssr: false });
-const Faq = dynamic(() => import("@/components/sections/home/NeedHelpSection"), { ssr: false });
 
 export default function Home() {
-  const [isMobile, setIsMobile] = useState(false);
-
-  useEffect(() => {
-    // ✅ Detect mobile screen only in browser
-    const checkScreenSize = () => setIsMobile(window.innerWidth <= 768);
-    checkScreenSize();
-    window.addEventListener("resize", checkScreenSize);
-    return () => window.removeEventListener("resize", checkScreenSize);
-  }, []);
-
   return (
     <Layout headerStyle={2} footerStyle={2}>
       {/* ✅ Prevent layout shift for banner */}
       <section style={{ minHeight: "100vh", position: "relative" }}>
-        {isMobile ? <MobileBanner /> : <Banner />}
+        <HomeBannerSwitch />
       </section>
 
       {/* ✅ Lazy loaded sections — improve Lighthouse performance */}
       <AboutSection />
 
-      {isMobile ? <MobileServices /> : <ServicesSection />}
+      <HomeServicesSwitch />
 
       <MobileFeatureCard />
       <Features />
@@ -55,7 +36,7 @@ export default function Home() {
       <Testimonial />
       <Solution />
       <Video />
-      <Faq/>
+      <Faq />
     </Layout>
   );
 }

app/payment-insurance/page.js

@@ -1,5 +1,5 @@
-import dynamic from "next/dynamic";
 import Layout from "@/components/layout/Layout";
+import RefugeeIFHPPage from "./PaymentInsurence";
 
 export const metadata = {
   title:
@@ -8,11 +8,6 @@ export const metadata = {
     "Learn about payment options, direct billing, insurance coverage, and how RaphaRehab helps you access physiotherapy, rehab, and wellness services easily.",
 };
 
-// 👇 Disable SSR to prevent hydration mismatch issues
-const RefugeeIFHPPage = dynamic(() => import("../payment-insurance/PaymentInsurence"), {
-  ssr: false,
-});
-
 export default function Page() {
   return (
     <Layout

components/sections/home/HomeBannerSwitch.js

@@ -0,0 +1,35 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Banner from "@/components/sections/home2/Banner";
+import MobileBanner from "@/components/sections/home2/MobileBanner";
+import ServicesSection from "@/components/sections/home/ServicesSection";
+import MobileServices from "@/components/sections/home/MobileServicesSection";
+
+export function HomeBannerSwitch() {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    // Detect mobile screen only in browser
+    const checkScreenSize = () => setIsMobile(window.innerWidth <= 768);
+    checkScreenSize();
+    window.addEventListener("resize", checkScreenSize);
+    return () => window.removeEventListener("resize", checkScreenSize);
+  }, []);
+
+  return isMobile ? <MobileBanner /> : <Banner />;
+}
+
+export function HomeServicesSwitch() {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    // Detect mobile screen only in browser
+    const checkScreenSize = () => setIsMobile(window.innerWidth <= 768);
+    checkScreenSize();
+    window.addEventListener("resize", checkScreenSize);
+    return () => window.removeEventListener("resize", checkScreenSize);
+  }, []);
+
+  return isMobile ? <MobileServices /> : <ServicesSection />;
+}