`nuxt generate` is not creating pre-rendered html pages when target is static. #8218

dsmurrell · 2020-10-18T20:20:44Z

dsmurrell
Oct 18, 2020

Is this expected? For a sample html page generated in the /dist folder, I get the following body (the head has all the metadata and pre-fetch information):

<body>
    <div id="__nuxt"><style>#nuxt-loading{background:#fff;visibility:hidden;opacity:0;position:absolute;left:0;right:0;top:0;bottom:0;display:flex;justify-content:center;align-items:center;flex-direction:column;animation:nuxtLoadingIn 10s ease;-webkit-animation:nuxtLoadingIn 10s ease;animation-fill-mode:forwards;overflow:hidden}@keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}@-webkit-keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}#nuxt-loading>div,#nuxt-loading>div:after{border-radius:50%;width:5rem;height:5rem}#nuxt-loading>div{font-size:10px;position:relative;text-indent:-9999em;border:.5rem solid #f5f5f5;border-left:.5rem solid #fff;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:nuxtLoading 1.1s infinite linear;animation:nuxtLoading 1.1s infinite linear}#nuxt-loading.error>div{border-left:.5rem solid #ff4500;animation-duration:5s}@-webkit-keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style><script>window.addEventListener("error",function(){var e=document.getElementById("nuxt-loading");e&&(e.className+=" error")})</script><div id="nuxt-loading" aria-live="polite" role="status"><div>Loading...</div></div></div><script>window.__NUXT__={config:{dev:!1,baseURL:"http://localhost:3000",gqlURL:"http://localhost:8080/v1/graphql"},staticAssetsBase:void 0}</script>
  <script src="/_nuxt/runtime.5bab07b.js"></script><script src="/_nuxt/commons/app.0ba5ac4.js"></script><script src="/_nuxt/vendors/app.d203231.js"></script><script src="/_nuxt/app.72088a7.js"></script></body>

I have ssr: false. From reading around it's suggested that nuxt generate is supposed to pre-render the pages but besides the head information, they only have the .js files to load like a regular SPA page with no pre-rendering. When I disable javascript in the browser, I get a large white spinner (chrome) when accessing the /dist folder served through nuxt start.

When I switch ssr to true then I get the full static mode mentioned here, but this means that the fetch method is not called on route change.

Adding the following plugin to run on the client only:

export default function ({ query, enablePreview }) {
  enablePreview()
}

and { src: '~/plugins/preview-mode', ssr: false },...

works, but it feels like a hack and probably not what I should be doing.

Is there any way to get nuxt generate to generate the html pages that I'm seeing it generate when ssr is true?

inmake · 2020-12-22T18:40:37Z

inmake
Dec 22, 2020

У меня была такая же проблема. Попробуйте убрать строку ssr: false и сгенерировать еще раз (npm run generate), проверьте, что у вас есть строка target: 'static'. Это работает!

I had the same problem. Try removing the string ssr: false and generating it again (npm run generate), check that you have the string target: 'static'. It works!

P.S. https://github.com/mtlynch/pre-vue

0 replies

danielroe · 2020-12-22T18:46:27Z

danielroe
Dec 22, 2020
Maintainer

You need to set { ssr: true } if you want html to be generated (SSG is effectively SSR at build time).

If you don't want full static mode, with fetch run at generate time and payloads generated then, you can set { target: 'universal' } before generation.

1 reply

inmake Dec 22, 2020

You can omit the ssr: true parameter, because if it is not present, it is true by default.

dsmurrell · 2020-12-22T19:03:39Z

dsmurrell
Dec 22, 2020
Author

Thanks guys... 65 days and then two answer in the space of minutes :)

@inmake, thanks for the example I'll check it out!

@danielroe, I do want fetch run at generate time and payloads generated then (so that I can serve fully pre-rendered html pages), but I also want fetch to be called at run time.

"When I switch ssr to true then I get the full static mode mentioned here, but this means that the fetch method is not called on route change."

Do I need to call fetch from mounted or created for this to work as I'd like?

1 reply

danielroe Dec 23, 2020
Maintainer

Yes.

snaix93 · 2021-02-21T16:07:48Z

snaix93
Feb 21, 2021

I have exactly the same problem. When I run nuxt generate, in dist folder all the pages are generated but when I access the page and press ctrl+u i see only "Loading...." as html.
Can anyone point what is wrong?

         async fetch() {
            await this.filter();
            this.grid3();
          },
         mounted() {
             this.updatePaginate(1)
          },
           methods: {
             ...mapActions('filter', { getProducts: 'getProducts'}),
  async filter() {
    this.filters.category = this.$route.params.slug;
    await this.getProducts({Product: Product.filter(this.filters) })
    if(this.filterProduct.length > 0){
      this.category = this.filterProduct[0].category;
    }
  },

4 replies

danielroe Feb 21, 2021
Maintainer

Do you have ssr: false in your nuxt.config?

snaix93 Feb 22, 2021

I have tried removing ssr at all and tried with ssr: true, which I think are the same. The files are generated properly in /dist directory with full html there but when I hit ctrl+u in chrome, this is what I get as a body:
View source

danielroe Feb 22, 2021
Maintainer

Okay, I think this should be fixed in current version of Nuxt - and the issue only affected full static + Nuxt start.

snaix93 Feb 23, 2021

I hope so, will try to upgrade nuxt to 2.15.1. Thank you

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`nuxt generate` is not creating pre-rendered html pages when target is static. #8218

{{title}}

Replies: 4 comments 6 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

nuxt generate is not creating pre-rendered html pages when target is static. #8218

dsmurrell Oct 18, 2020

Replies: 4 comments · 6 replies

inmake Dec 22, 2020

danielroe Dec 22, 2020 Maintainer

inmake Dec 22, 2020

dsmurrell Dec 22, 2020 Author

danielroe Dec 23, 2020 Maintainer

snaix93 Feb 21, 2021

danielroe Feb 21, 2021 Maintainer

snaix93 Feb 22, 2021

danielroe Feb 22, 2021 Maintainer

snaix93 Feb 23, 2021

`nuxt generate` is not creating pre-rendered html pages when target is static. #8218

dsmurrell
Oct 18, 2020

Replies: 4 comments 6 replies

inmake
Dec 22, 2020

danielroe
Dec 22, 2020
Maintainer

dsmurrell
Dec 22, 2020
Author

danielroe Dec 23, 2020
Maintainer

snaix93
Feb 21, 2021

danielroe Feb 21, 2021
Maintainer

danielroe Feb 22, 2021
Maintainer