SSG without fetch on server components

[Emonee]

Hi all!

I have been fighting on understand the new way of doing SSG. In the docs says that you just use the fetch function, that already has the default { cache: 'force-cache' } and that data will be statically generated in the server at build time. All fine and good to this points, but.

What happens when I want to generate static data that doesn't come from a fetch function and comes from other types of async functions, like a db query?

export default async function Page () {
  const data = await someAsyncFunc()
  return (
    <main>
      <DataHolder data={data}  />
    </main>
  )
}

When I do stuff like this, the someData variable is generated on each user demand and I don't see any way to generate that just in build time.

Am I just missing something? I love Next and the way of fetching data inside a component like this is just great, but i think is a back step to do SSG only with the fetch method where you are forced to consult an API.

Any answer are welcome! Thanks!

[icyJoseph]

Could you try using export const dynamic = 'force-static' at page level?

• https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config

[Emonee]

Hi @icyJoseph thanks a lot for your respose.

Yeah, I tried that but it doesn't work on my case because I need to use searchParams in that page. Here is a more deeper example of my code:

import { getData } from '@/lib'

export default async function Page ({ searchParams }) {
  const data = await getData()
  return (
    <>
      <Component data={data} />
      <Component2 searchParams={searchParams} />
    </>
  )
}

If I use export const dynamic = 'force-static' the data will be statically generated indeed, but my Page will break because searchParams will not return the expected values.

One solution that I found recently is this:

import { getData } from '@/lib'
import { unstable_cache } from 'next/cache'

const cacheData = unstable_cache(getData, ['some-key'])

export default async function Page ({ searchParams }) {
  const data = await cacheData()
  return (
    <>
      <Component data={data} />
      <Component2 searchParams={searchParams} />
    </>
  )
}

I don't know if this is ideal, but it works in this case. Do you know if is there a better strategy?