Issue with NextJS build making everything static

Question

I'm a bit of a newbie to NextJS and only have real experience and understanding of basic React apps. This is my first time trying to deploy a basic CRUD NextJS app (with prisma and mongoDB) which runs fine when using npm run dev but when using npm run build followed by npm run start or deploying to Vercel, the website behaves completely differently with all functionality lost.

The main page is a list of fragrances each with a delete button.

When trying to delete any of these or making an update from the MongoDB database, there is no updates to the content on the site after it has been built with 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;

This code is quite basic, but I am pretty sure I need to add some sort of getServerSideProps function at the bottom but I am not sure how, I have tried but it does not render anything. Am I missing some fundamental steps in NextJS and server rendered code? Would SSR or ISR be the right approach for me to take? What would that look like with my current code? All help is greatly appreciated :)

Answer 1

In npm run dev , You are useing a develper mode that means page will refresh after every change and saving. In build mode, page has been built and you cannot see changes like dev mode, so you have to use in client somthing like useState or useRef. Also you need to use connection with API in client or server side.

So, if you want to get access to DB without refreshing the page and see the result immediately, you have to use API connection in client with useEffect and save it in useState variable.