Turning a server side page into static page in Next 13
Answered
Northern Saw-whet Owl posted this in #help-forum
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
Northern Saw-whet OwlOP
Hello, I have a page that contains a list of projects. I want to turn it into a static page instead of having the loader when a request is made to that page since the content doesn't change a lot.
Previously we would use
Current page implementation is as follows:
Previously we would use
getStaticProps
to do so. I'm aware of generateStaticParams
however it doesn't seem to be sending the data as props but as dynamic params, and this page has a fixed url.Current page implementation is as follows:
const ProjectsPage = async () => {
const projects = await getProjects()
return (
<div className="flex flex-col gap-20">
<div className="flex items-center justify-between">
<h1>Projects</h1>
<ProjectsViewType />
</div>
<ProjectsList projects={projects} />
</div>
)
}
export default ProjectsPage
Answered by Alfonsus Ardani
you can force it using
or
export const dynamic = 'force-static'
or
export const dynamic = "error"
15 Replies
![Avatar](https://cdn.discordapp.com/avatars/194128415954173952/708a8637ada505b6b7a85972807d9dca.webp?size=256)
Alfonsus Ardani
have you tried building it?
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
Northern Saw-whet OwlOP
yup, gets generated as server side
![Image](https://cdn.discordapp.com/attachments/1152355707006496829/1152359239759700029/image.png)
![Avatar](https://cdn.discordapp.com/avatars/194128415954173952/708a8637ada505b6b7a85972807d9dca.webp?size=256)
Alfonsus Ardani
did you use any of the (request-time)-specific features?
using headers() cookies(), will turn it into lambda
basically, i can't tell for sure since i don't know what you put in
getProjects
and ProjectsViewType
and ProejctsList
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
Northern Saw-whet OwlOP
i don't think so, here's getProjects
const getProjects = async () => {
const prisma = new PrismaClient()
const projects = await prisma.project.findMany({
where: {
isPublic: true,
},
orderBy: {
createdAt: 'desc',
},
})
return projects
}
ProjectsViewType
is just a client component that allows a user to switch and store user preferences, and ProejctsList
is the a display based on that preference![Avatar](https://cdn.discordapp.com/avatars/194128415954173952/708a8637ada505b6b7a85972807d9dca.webp?size=256)
Alfonsus Ardani
hmm do you have link to repo?
![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
Northern Saw-whet OwlOP
i can't share it
![Avatar](https://cdn.discordapp.com/avatars/194128415954173952/708a8637ada505b6b7a85972807d9dca.webp?size=256)
Alfonsus Ardani
oh
well
![Avatar](https://cdn.discordapp.com/avatars/194128415954173952/708a8637ada505b6b7a85972807d9dca.webp?size=256)
Alfonsus Ardani
you can force it using
or
export const dynamic = 'force-static'
or
export const dynamic = "error"
Answer
![Avatar](https://cdn.discordapp.com/avatars/194128415954173952/708a8637ada505b6b7a85972807d9dca.webp?size=256)
Alfonsus Ardani
the former will try to make it static
the latter will throw an error if dynamic features are used when its meant to be a static route
the latter will throw an error if dynamic features are used when its meant to be a static route
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
Asian black bear
@Northern Saw-whet Owl Since you have zero control over how PrismaClient works, and Next assumes it makes the page dynamic, please feel free to use
export const dynamic = 'force-static'
Personally, I prefer the declarative style of at least using
error
, because the Next guesses seem totally random