Layouts Preview does not work when building in full static mode

Question

Layouts Preview does not work when building in full static mode

yannbertrand opened this issue 3 years ago · comments

Yann Bertrand commented 3 years ago

Versions

nuxt: 2.15.7
@nuxtjs/prismic: 1.3.2
node: 16.10.0

Reproduction

Reproduction repository :
https://github.com/yannbertrand/prismic-nuxt-preview-test

Built app with a beta header : ✅ works after static build
https://prismic.link/3cLAI4o

Screenshots

Prismic config

Result

Dev app with a beta footer : ✅ works before static build

Screenshots

#### Prismic config

Result

Built app with a beta footer : ❌ does not work after static build
https://prismic.link/3cLCwud

Screenshots

#### Prismic config

Result

Steps to reproduce

Clone the repository
Install deps npm install
Change the PRISMIC_APIS_HREF value in nuxt.config.js to one you created (*see next section "Prismic config")
Launch the project with npm run dev
Activate Prismic preview mode on the local env for the main_footer
See that it is really previewed on the footer layout element
Stop the dev server
Build the project using npm run build
Launch the statically build project server locally npm run start
See that the preview does not work on the footer layout element

Prismic config

Here is the Prismic setup I used (but you should be able to tweak it and reproduce the issue):

Custom Type - slices_page with a URI uid field and both banner_title + banner_content RTE fields
Custom Type - main_footer with a footer_forselect field (with pix-site default value) and a text RTE paragraph field
A published fr-fr Slices page with the URI index-pix-site with a running modification (ready to be previewed)
A published fr-fr Main footer with the footer_for=pix-site with a running modification (ready to be previewed)

What is Expected?

Preview mode should work the same way in Developpement+SSR+Static and after Full Static build.

What is actually happening?

Preview mode works the same way on page elements, but not on layout instantiated component.

Lucie · Answer 1 · Thu Nov 25 2021 01:14:30 GMT+0800 (China Standard Time)

Hey there, thank you so much for the detailled report! I'll have a look at it next week.

At first glance it looks like this is probably related to the following: nuxt/nuxt#9439

I'll investigate that!

Yann Bertrand · Answer 2 · Thu Nov 25 2021 05:48:05 GMT+0800 (China Standard Time)

Thank you for your help! Let me know if you need more information :)

Lucie · Answer 3 · Mon Nov 29 2021 18:55:18 GMT+0800 (China Standard Time)

Hey there,

Thanks to your detailed instruction I was able to reproduce easily the behavior you encountered.

So the issue here is the one described in this Nuxt issue: nuxt/nuxt#9439 (the one from before), but tl;dr; Nuxt is not able to refresh fetch hooks coming directly from a layout file (not a page).

I'll try to push for the PR fixing that to be merged. In the meantime, I'd recommend setting layouts data through the store rather than with the fetch hook, You can also stay like that, assuming that it's fine for you to not have previews working with layouts (while it might be more critical for blog posts for example)

Yann Bertrand · Answer 4 · Tue Nov 30 2021 18:29:14 GMT+0800 (China Standard Time)

Thank you for the update and providing a temporary patch! We'll definitely look into using the store to get data.

Is it ok to keep this issue open until the PR you mention is merged? It would be the best for us to get updated :)

Lucie · Answer 5 · Tue Nov 30 2021 20:15:00 GMT+0800 (China Standard Time)

Definitely ☺️ This is still a valid "bug"

Lucie · Answer 6 · Wed Mar 16 2022 18:11:59 GMT+0800 (China Standard Time)

Sadly the PR fixing this one on Nuxt end (nuxt/nuxt#9530) won't land as Nuxt team shifts its effort toward Nuxt 3.

I'm closing it with a wontfix flag and will update it should the PR change its status.