$prismic vs SliceZone with Nuxt.js in SSG mode

Developing with Prismic
1

I'm trying to better understand what's happening under the hood with the two methods of using $prismic and the SliceZone component with Nuxt.js in SSG mode.

I have Nuxt using target: 'static' in my nuxt.config.js.

I'm currently using the $prismic helper to fetch content from Prismic.

I see that while dev'ing with npm run dev the content is fetched with AJAX and injected into my page that way, but when generating my site with npm run generate it appears that the content is fetched at build-time, and some other non-essential API calls are made to prismic.

Is this correct? I'd be interested to see more details documentation on what's happening if it exists.

Also, I'm considering using <SliceZone> in some situations, is content fetched the same way as using $prismic when run with Nuxt in SSG mode?

Thanks in advance.

5

Hi James,

My understanding is that <SliceZone> uses $prismic, so the data is fetched the same way. I'm not 100% though so I'm reaching out to the team to get more information about this.

Thanks.

6

Multiple calls: Indeed to query Prismic content @prismicio/client has to first query your repository to resolve the Master ref

Vue SliceZone: It indeed uses $prismic under the hood to fetch data when using it in that fashion: <SliceZone :type="type" :uid="uid" /> but I'd recommend stop using it this way (because it's not future proof and has proved fragile) and just pass the Slices you already queried in your async data hook using the slices prop.

So in general:

  • Fetch all your required Prismic content using $prismic in async data
  • Multiple calls will be made when using $prismic , this is because the client needs to resolve the API first
  • Vue SliceZone has an inner fetch mechanism that relies both on $prismic and Nuxt fetch hook, but I'd recommend not using it and passing slices directly to it with the slices prop (and not using type , uid , etc.)
7

Not exactly understanding what you're saying.

Do you mean you discourage using <SliceZone> altogether? Currently i'm only using it for slices. Other data I'm fetching with $prismic.

Line 92

That's the page I'm using it on. I could only get <SliceZone> to work if I used a UID.

8

Yes, I would now discourage using it to do queries and just pass the slices data manually like below, this object might be returned as slices or body.

  <SliceZone
    :slices="post.data.slices"
    :resolver="({ sliceName }) => slices[sliceName]"
  />