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 };
@@ -1,50 +1,8 @@
-"use client";
-
-import { Suspense, useEffect, useState } 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 
-  }
-);
+import { Suspense } from 'react';
+import { db } from '@/db';
+import { siteConfig } from '@/db/schema';
+import { HomeContent } from './home-content';
+import { SectionSkeleton } from '@/components/ui/loading-skeleton';

 interface SiteConfig {
  feature_services?: { enabled: boolean; items: string[] };
@@ -52,68 +10,28 @@ interface SiteConfig {
  feature_news?: { enabled: boolean; displayCount: number; categories: string[]; sortOrder: 'asc' | 'desc' };
 }

-function HomeContent() {
-  const searchParams = useSearchParams();
-  const [config, setConfig] = useState<SiteConfig>({});
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    const fetchConfig = async () => {
-      try {
-        const res = await fetch('/api/config');
-        const data = await res.json();
-        if (data.success) {
-          setConfig(data.data);
-        }
-      } catch (error) {
-        console.error('获取配置失败:', error);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchConfig();
-  }, []);
-
-  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]);
-
-  if (loading) {
-    return <SectionSkeleton />;
+async function getSiteConfig(): Promise<SiteConfig> {
+  try {
+    const allConfigs = await db.select().from(siteConfig);
+    
+    const configMap = allConfigs.reduce((acc, config) => {
+      acc[config.key] = config.value;
+      return acc;
+    }, {} as Record<string, any>);
+    
+    return configMap as SiteConfig;
+  } catch (error) {
+    console.error('获取配置失败:', error);
+    return {};
  }
-
-  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 default function HomePage() {
+export default async function HomePage() {
+  const config = await getSiteConfig();
+  
  return (
    <Suspense fallback={<SectionSkeleton />}>
-      <HomeContent />
+      <HomeContent config={config} />
    </Suspense>
  );
 }