fix: resolve hydration mismatch by moving config fetch to server-side

2026-03-13 14:14:54 +08:00
parent 259b790309
commit 342c706552
2 changed files with 115 additions and 104 deletions
@@ -0,0 +1,93 @@
+"use client";
+
+import { useEffect } from 'react';
+import { useSearchParams } from 'next/navigation';
+import dynamic from 'next/dynamic';
+import { HeroSection } from "@/components/sections/hero-section";
+import { SectionSkeleton } from "@/components/ui/loading-skeleton";
+
+const ServicesSection = dynamic(
+  () => import('@/components/sections/services-section').then(mod => ({ default: mod.ServicesSection })),
+  { 
+    loading: () => <SectionSkeleton />,
+    ssr: false 
+  }
+);
+
+const ProductsSection = dynamic(
+  () => import('@/components/sections/products-section').then(mod => ({ default: mod.ProductsSection })),
+  { 
+    loading: () => <SectionSkeleton />,
+    ssr: false 
+  }
+);
+
+const CasesSection = dynamic(
+  () => import('@/components/sections/cases-section').then(mod => ({ default: mod.CasesSection })),
+  { 
+    loading: () => <SectionSkeleton />,
+    ssr: false 
+  }
+);
+
+const AboutSection = dynamic(
+  () => import('@/components/sections/about-section').then(mod => ({ default: mod.AboutSection })),
+  { 
+    loading: () => <SectionSkeleton />,
+    ssr: false 
+  }
+);
+
+const NewsSection = dynamic(
+  () => import('@/components/sections/news-section').then(mod => ({ default: mod.NewsSection })),
+  { 
+    loading: () => <SectionSkeleton />,
+    ssr: false 
+  }
+);
+
+interface SiteConfig {
+  feature_services?: { enabled: boolean; items: string[] };
+  feature_products?: { enabled: boolean; showPricing: boolean; featuredProducts: string[] };
+  feature_news?: { enabled: boolean; displayCount: number; categories: string[]; sortOrder: 'asc' | 'desc' };
+}
+
+interface HomeContentProps {
+  config: SiteConfig;
+}
+
+function HomeContent({ config }: HomeContentProps) {
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    const section = searchParams.get('section');
+    if (section) {
+      const timer = setTimeout(() => {
+        const targetElement = document.getElementById(section);
+        if (targetElement) {
+          targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
+      }, 100);
+      
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+  }, [searchParams]);
+
+  const showServices = config.feature_services?.enabled !== false;
+  const showProducts = config.feature_products?.enabled !== false;
+  const showNews = config.feature_news?.enabled !== false;
+
+  return (
+    <main className="min-h-screen bg-white dark:bg-(--color-bg-primary)">
+      <HeroSection />
+      {showServices && <ServicesSection config={config.feature_services} />}
+      {showProducts && <ProductsSection config={config.feature_products} />}
+      <CasesSection />
+      <AboutSection />
+      {showNews && <NewsSection config={config.feature_news} />}
+    </main>
+  );
+}
+
+export { HomeContent };