convert CSR pages to SSR/Static rendering for SEO optimization
This commit is contained in:
akash
parent
ed09e04434
commit
90101ac5c1
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -1,11 +1,5 @@
|
||||
// src/app/faq/page.jsx
|
||||
import dynamic from "next/dynamic";
|
||||
import Layout from "@/components/layout/Layout";
|
||||
|
||||
const FaqClient = dynamic(
|
||||
() => import("../faq/FaqClient"),
|
||||
{ ssr: false }
|
||||
);
|
||||
import FaqClient from "./FaqClient";
|
||||
|
||||
export const metadata = {
|
||||
title: "RaphaRehab FAQs – Rehab & Wellness Help",
|
||||
|
||||
@ -1,17 +1,16 @@
|
||||
import dynamic from 'next/dynamic';
|
||||
const LocationsClient = dynamic(() => import('./LocationsClient'), { ssr: false });
|
||||
import LocationsClient from './LocationsClient';
|
||||
import Layout from "@/components/layout/Layout"
|
||||
|
||||
export const metadata = {
|
||||
title: "Rapharehab Locations - Physiotherapy Clinic in Etobicoke & Serving GTA",
|
||||
description:
|
||||
"Visit Rapharehab, a leading physiotherapy clinic in Etobicoke serving Toronto, Mississauga, and the GTA. Professional rehabilitation services close to home.",
|
||||
title: "Rapharehab Locations - Physiotherapy Clinic in Etobicoke & Serving GTA",
|
||||
description:
|
||||
"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 (
|
||||
<Layout headerStyle={1} footerStyle={1} breadcrumbTitle="Locations" bannerImage="/assets/images/location/location-banner.webp">
|
||||
<LocationsClient />
|
||||
</Layout>
|
||||
);
|
||||
return (
|
||||
<Layout headerStyle={1} footerStyle={1} breadcrumbTitle="Locations" bannerImage="/assets/images/location/location-banner.webp">
|
||||
<LocationsClient />
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
53
app/page.js
53
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";
|
||||
|
||||
// ✅ Banner components — immediate load (important for FCP)
|
||||
import Banner from "@/components/sections/home2/Banner";
|
||||
import MobileBanner from "@/components/sections/home2/MobileBanner";
|
||||
|
||||
// ✅ Lazy load all other sections (FCP/LCP performance boost)
|
||||
const AboutSection = dynamic(() => import("@/components/sections/home/AboutSection"), { ssr: false });
|
||||
const ServicesSection = dynamic(() => import("@/components/sections/home/ServicesSection"), { ssr: false });
|
||||
const MobileServices = dynamic(() => import("@/components/sections/home/MobileServicesSection"), { ssr: false });
|
||||
const MobileFeatureCard = dynamic(() => import("@/components/sections/home/MobileFeatureCard"), { ssr: false });
|
||||
const Features = dynamic(() => import("@/components/sections/home2/Features"), { ssr: false });
|
||||
const FaqSection = dynamic(() => import("@/components/sections/home/FaqSection"), { ssr: false });
|
||||
const AreaOfInjury = dynamic(() => import("@/components/sections/home/AreaOfInjury"), { ssr: false });
|
||||
const WhyChooseUsSection = dynamic(() => import("@/components/sections/home/WhyChooseusSection"), { ssr: false });
|
||||
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 });
|
||||
import AboutSection from "@/components/sections/home/AboutSection";
|
||||
import ServicesSection from "@/components/sections/home/ServicesSection";
|
||||
import MobileServicesSection from "@/components/sections/home/MobileServicesSection";
|
||||
import MobileFeatureCard from "@/components/sections/home/MobileFeatureCard";
|
||||
import Features from "@/components/sections/home2/Features";
|
||||
import FaqSection from "@/components/sections/home/FaqSection";
|
||||
import AreaOfInjury from "@/components/sections/home/AreaOfInjury";
|
||||
import WhyChooseUsSection from "@/components/sections/home/WhyChooseusSection";
|
||||
import CounterSection from "@/components/sections/home/CounterSection";
|
||||
import Testimonial from "@/components/sections/home1/Testimonial";
|
||||
import Solution from "@/components/sections/home2/Solution";
|
||||
import Video from "@/components/sections/home1/Video";
|
||||
import Faq from "@/components/sections/home/NeedHelpSection";
|
||||
import { HomeBannerSwitch, HomeServicesSwitch } from "@/components/sections/home/HomeBannerSwitch";
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
35
components/sections/home/HomeBannerSwitch.js
Normal file
35
components/sections/home/HomeBannerSwitch.js
Normal file
@ -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 />;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user