# $prismic vs SliceZone with Nuxt.js in SSG mode

**URL:** <https://community.prismic.io/t/prismic-vs-slicezone-with-nuxt-js-in-ssg-mode/9276>\
**Category:** Developing with Prismic\
**Tags:** nuxtjs\
**Created:** [March 5, 2022, 11:45pm UTC](https://community.prismic.io/t/prismic-vs-slicezone-with-nuxt-js-in-ssg-mode/9276 "2022-03-05T23:45:22Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![james0r](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/james0r/32/4065_2.png) [@james0r](https://community.prismic.io/u/james0r)\
**Post date:** [March 5, 2022, 11:45pm UTC](https://community.prismic.io/t/prismic-vs-slicezone-with-nuxt-js-in-ssg-mode/9276/1 "2022-03-05T23:45:22Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [March 8, 2022, 11:44am UTC](https://community.prismic.io/t/prismic-vs-slicezone-with-nuxt-js-in-ssg-mode/9276/5 "2022-03-08T11:44:52Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [March 8, 2022, 12:08pm UTC](https://community.prismic.io/t/prismic-vs-slicezone-with-nuxt-js-in-ssg-mode/9276/6 "2022-03-08T12:08:21Z")

</div>

**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.)

---

<div class="post-metadata">

**Author:** ![james0r](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/james0r/32/4065_2.png) [@james0r](https://community.prismic.io/u/james0r)\
**Post date:** [March 8, 2022, 7:51pm UTC](https://community.prismic.io/t/prismic-vs-slicezone-with-nuxt-js-in-ssg-mode/9276/7 "2022-03-08T19:51:57Z")

</div>

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.

> <https://github.com/james0r/my-nuxt-app/blob/main/pages/_uid.vue>

Line 92

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

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [March 9, 2022, 5:48pm UTC](https://community.prismic.io/t/prismic-vs-slicezone-with-nuxt-js-in-ssg-mode/9276/8 "2022-03-09T17:48:14Z")

</div>

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`.

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

```