我是一个NextJS新手,对基本的React应用程序只有真实的的经验和理解。这是我第一次尝试部署一个基本的CRUD NextJS应用程序(使用prisma和mongoDB),当使用npm run dev
时运行良好,但当使用npm run build
然后使用npm run start
或部署到Vercel时,网站的行为完全不同,所有功能都丢失了。
主页是一个香水列表,每个香水都有一个删除按钮。
当尝试删除这些内容或从MongoDB数据库进行更新时,在使用npm run build
构建网站后,网站上的内容不会更新。
import { getFragrances } from "@/lib/prisma/fragrances";
import FragranceListItem from "./fragranceListItem";
const Fragrances = async () => {
const { fragrances } = await getFragrances();
const sortedFragrances = fragrances.sort((a, b) =>
a.name.localeCompare(b.name)
);
return (
<section className="fixed h-full w-full bg-gray-900">
<div className="center py-4">
<h2 className="mb-4 text-xl font-medium text-white">Fragrances</h2>
<nav aria-label="Main Nav" className="flex flex-col space-y-1">
{sortedFragrances?.map((fragrance) => {
return <FragranceListItem fragrance={fragrance} />;
})}
</nav>
</div>
</section>
);
};
export default Fragrances;
这段代码是相当基本的,但我很确定我需要在底部添加某种getServerSideProps函数,但我不知道如何,我已经尝试过,但它没有呈现任何东西。我错过了NextJS和服务器渲染代码中的一些基本步骤吗?SSR或ISR是我采取的正确方法吗?我目前的代码看起来会是什么样子?非常感谢所有帮助:)
1条答案
按热度按时间u0njafvf1#
在
npm run dev
中,您使用的是开发者模式,这意味着页面将在每次更改和保存后刷新。在build mode
中,页面已构建,您无法看到dev mode
等更改,因此您必须在客户端使用useState
或useRef
之类的东西。您还需要在客户端或服务器端使用API
连接。所以,如果你想在不刷新页面的情况下访问数据库并立即看到结果,你必须在客户端使用
useEffect
的API
连接,并将其保存在useState
变量中。