Implement SSR with an ORM (Prisma)
Answered
Eurasian Blackbird posted this in #help-forum
Eurasian BlackbirdOP
Hello !
I am a nextJS beginner so this might be obvious for some people, but even after spending few hours on it, it still is not for me.
I am having, a simple problem : I can't impelement SSR.
Code will explain better than me :
My page.tsx
My function fetchCategories() :
When I build & start the server, it correctly displays the list of categories. But if I add one, and I reload the page (& the server), it doesn't display the new one. I get that by default, pages are statically generated, but I've been told that using ORM in request will make the request not caching by default. What did I miss ?
Thank you 😄
I am a nextJS beginner so this might be obvious for some people, but even after spending few hours on it, it still is not for me.
I am having, a simple problem : I can't impelement SSR.
Code will explain better than me :
My page.tsx
import CreateForm from '@/components/Dashboard/Categories/create-fom';
import { fetchCategories } from '@/fetchs/categories';
export default async function Page() {
const categories = await fetchCategories();
return (
<div>
<h1>Title</h1>
{categories.map((category: { name: string; id: string }) => {
return <p key={category.id}>{category.name}</p>;
})}
<CreateForm />
</div>
);
}My function fetchCategories() :
import { db } from '@/lib/prisma';
export async function fetchCategories() {
try {
const categories = await db.category.findMany();
return categories;
} catch (e) {
console.log(e);
}
}When I build & start the server, it correctly displays the list of categories. But if I add one, and I reload the page (& the server), it doesn't display the new one. I get that by default, pages are statically generated, but I've been told that using ORM in request will make the request not caching by default. What did I miss ?
Thank you 😄
Answered by Ray
try
export const dynamic = 'force-dynamic' to make the page dynamic and you should see the fetchCategories refetch on page reload17 Replies
try
export const dynamic = 'force-dynamic' to make the page dynamic and you should see the fetchCategories refetch on page reloadAnswer
@Ray try `export const dynamic = 'force-dynamic'` to make the page dynamic and you should see the `fetchCategories` refetch on page reload
Eurasian BlackbirdOP
Okay thank you, I read bout that here : https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config
But I was wondering if I could only make the componenet dynamic instead of the whole page ?
But I was wondering if I could only make the componenet dynamic instead of the whole page ?
@Eurasian Blackbird Okay thank you, I read bout that here : https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config
But I was wondering if I could only make the componenet dynamic instead of the whole page ?
that would need to use partial prerendering
https://nextjs.org/docs/app/api-reference/next-config-js/partial-prerendering
https://nextjs.org/docs/app/api-reference/next-config-js/partial-prerendering
Eurasian BlackbirdOP
Okay thank you ! It is not ready for production (as is unstable_noStore()) so I guess I will go with first option
@Eurasian Blackbird Okay thank you ! It is not ready for production (as is unstable_noStore()) so I guess I will go with first option
you could also use client side fetching on that component
@Ray you could also use client side fetching on that component
Eurasian BlackbirdOP
Oh. It will then call the function directly in my backend ? Or do I have to use api ?
@Ray both way works
Eurasian BlackbirdOP
okay perfect thank you
I guess using "use client" can create layout shift :/
@Eurasian Blackbird I guess using "use client" can create layout shift :/
create a skeleton component for it
if (isLoading) return <Skeleton />Eurasian BlackbirdOP
And may I ask how to get isLoading ? Basic useState ?
@Ray yes
Eurasian BlackbirdOP
Perfect, thank you very much for all those answers