Turning a server side page into static page in Next 13

Answered

Northern Saw-whet Owl posted this in #help-forum

Northern Saw-whet OwlOP

2023-09-15T21:30:10.000Z

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 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
export const dynamic = 'force-static'
or
export const dynamic = "error"

View full answer

15 Replies

Alfonsus Ardani

2023-09-15T21:42:52.000Z

have you tried building it?

Northern Saw-whet OwlOP

2023-09-15T21:44:13.000Z

yup, gets generated as server side

Alfonsus Ardani

2023-09-15T21:44:37.000Z

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

https://nextjs.org/docs/app/building-your-application/rendering/server-components#switching-to-dynamic-rendering

Northern Saw-whet OwlOP

2023-09-15T21:47:20.000Z

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

Alfonsus Ardani

2023-09-15T21:48:07.000Z

hmm do you have link to repo?

Northern Saw-whet OwlOP

2023-09-15T21:50:59.000Z

i can't share it

Alfonsus Ardani

2023-09-15T21:51:18.000Z

well

Alfonsus Ardani

2023-09-15T21:51:43.000Z

you can force it using
export const dynamic = 'force-static'
or
export const dynamic = "error"

Answer

Alfonsus Ardani

2023-09-15T21:52:10.000Z

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

Asian black bear

2023-09-15T23:37:56.000Z

@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