Next.js App Router生产构建数据未更新问题求助
问题描述
我用Next.js App Router实现服务端渲染(SSR)搭建了网站Clush Sport。现在遇到个问题:就算从后端删掉所有精选产品,生产构建包里还是会显示这些产品,而且网站所有板块都存在这种数据不同步的情况。
相关代码
首页组件(Home.tsx)
import ChampionsinAction from "@/components/home/ChampionsinAction"; import FeaturedProduct from "@/components/home/FeaturedProduct"; import HomeBanner from "@/components/home/HomeBanner"; import HomeBlog from "@/components/home/HomeBlog"; import HomeDeisgnTool from "@/components/home/HomeDeisgnTool"; import HomeSample from "@/components/home/HomeSample"; import HomeSteps from "@/components/home/HomeSteps"; import HomeTrust from "@/components/home/HomeTrust"; import BlogService from "@/service/BlogService"; import ContentService from "@/service/ContentService"; import ProductService from "@/service/ProductService"; import SettingsService from "@/service/SettingsService"; export default async function Home() { const data = await getFeaturedProducts(); const blogData = await getBlogs(); const sampleProducts = await getSampleProducts(); const testimonials = await getstestimonials(); const pageData = await getPageContent(); const bannersection = pageData.sections.find( (el: any) => el.title === "Home Banner" ); const FeaturedProducts = pageData.sections.find( (el: any) => el.title === "Featured Products" ); const HomeStepsData = pageData.sections.find( (el: any) => el.title === "Easy As 1, 2 & 3" ); const HomeSampleData = pageData.sections.find( (el: any) => el.title === "See, Feel, Believe" ); const ChampionsinActionData = pageData.sections.find( (el: any) => el.title === "Champions in action" ); const BuiltOnTrustData = pageData.sections.find( (el: any) => el.title === "Built On Trust" ); const blogsData = pageData.sections.find((el: any) => el.title === "Latest on clush sports"); console.log("pageData", pageData); return ( <main> <HomeBanner data={bannersection} /> <HomeDeisgnTool /> <FeaturedProduct products={data} data={FeaturedProducts} /> <HomeSteps data={HomeStepsData} /> <HomeSample products={sampleProducts} data={HomeSampleData} /> <ChampionsinAction data={ChampionsinActionData} /> <HomeTrust testimonials={testimonials} data={BuiltOnTrustData} /> <HomeBlog blogData={blogData} data={blogsData} /> </main> ); } async function getPageContent() { let name = "home"; const data = ContentService.getContentData(name); return data; } async function getFeaturedProducts() { const products = ProductService.getFeaturedProducts(null); return products; } async function getBlogs() { const blogs = BlogService.getFrontBlogs(null); return blogs; } async function getSampleProducts() { const products = ProductService.getHomeSampleProducts(null); return products; } async function getstestimonials() { const testimonials = SettingsService.getTestimonials(null); return testimonials; }
FeaturedProduct.tsx组件
"use client"; import { Suspense } from "react"; import Carousel from "../reuseable/Carousel"; const FeaturedProduct = ({ products, data }: any) => { console.log("products: ", products); let blockData = data?.blocks[0]; console.log("blockData", blockData); return ( <> <div className="home-featured-pro float-left mt-[60px] lgx:mt-[90px] w-full pt-[53px] pb-[60px] lgx:pb-13"> <div className="container mx-auto"> <h2 className="text-4xl md:text-5xl lgx:text-64px font-bold leading-noraml tracking-[1.28px] text-center text-black mb-3"> {blockData.title} </h2> <></> <p className="text-center text-lg lg:text-xl font-medium tracking-[0.48px] captilize w-full max-w-[1173px] mx-auto mb-[23px] lgx:mb-10" dangerouslySetInnerHTML={{ __html: blockData.description }} ></p> </div> <div className="featured-slider centerSlider w-full"> <Carousel slides={products} // carouselSettings={carouselSettings} buttontext="Customize Now" buttonClass="customize-now w-[calc(100%-40px)] md:w-[calc(100%-(40px*2))] 2xl:w-[calc(100%-(68px*2))] text-xl md:text-2xl font-bold leading-noraml tracking-[0.48px] uppercase text-white text-center mx-auto block bg-w-blue hover:bg-w-green px-4 py-6 absolute bottom-[20px] lgx:bottom-[68px] left-1/2 -translate-x-1/2 opacity-0 invisible" nav={true} dots={false} /> </div> </div> </> ); }; export default FeaturedProduct;
内容的提问来源于stack exchange,提问作者Ali
相关产品推荐
相关产品推荐

