feat: options.target and full-static export

[atinux]

Types of changes

• Bug fix (a non-breaking change which fixes an issue)
• New feature (a non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Description

Introducing a target option in nuxt.config.js, available values:

• 'server' (default)
• 'static'

I also add the information in the Nuxt.js banner:

Add process.target in the Vue app + update process.static to use target === 'static' so it works in dev mode.

• With CLI: nuxt <command = dev> <dir = '.'> [--target='server']

This option will allow to:

• static: Enhance the developer experience when running nuxt dev:

  • Remove req & res from context
  • Fallback to client-side on 404 / error / redirect
  • Dissociate nuxt build & nuxt generate -> creating nuxt export to only pre-render routes
  • Generate a payload for not-excluded routes + EXPORT_TIME (if generate.static = true)
  • Crawl every dynamic pages (if generate.crawler = true)
  • Handle Page.static = false or $nuxt.isPreview
  • Force $route.query to be empty on SSR to mimic nuxt export

• Check side effects of created vs beforeCreate for fetch

Checklist:

• My change requires a change to the documentation.
• I have updated the documentation accordingly. (PR: #)
• I have added tests to cover my changes (if not applicable, please state why)
• All new and existing tests are passing.

[codecov-io]

Codecov Report

Merging #6159 into dev will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##              dev    #6159   +/-   ##
=======================================
  Coverage   70.86%   70.86%           
=======================================
  Files          88       88           
  Lines        3587     3587           
  Branches      974      974           
=======================================
  Hits         2542     2542           
  Misses        848      848           
  Partials      197      197           

Flag	Coverage Δ
#unittests	70.86% <0.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 9aff6ef...9aff6ef. Read the comment docs.

[husayt]

This looks really interesting. One question. What is the difference between static and serverless?

As I understand new modes are more or less similar to the following:

• generate spa= serverless
• generate universal = static
• build spa/universal = server

Or did I miss the point?

[atinux]

Hey @husayt

Target is directly linked to the platform you want to host your Nuxt.js App, by default, it's server and is a normal node.js server with SSR.

• server: Normal node.js hosting (Heroku, Amazon EC2, etc)
• serverless: Serverless hosting (Now V2, AWS Lambda, Google Cloud Functions, etc)
• static: Static/CDN hosting (Netlify, GitHub Pages, Surge.sh, Amazon S3, etc)

They mainly differs when running nuxt build, so Nuxt.js knows what kind of hosting platform you are aiming at :)

[davidsneal]

Literally just came to as the same thing as @nilsnh :)

[pi0]

@nilsnh @davidsneal With nuxt export crawler should normally discover routes, so for setting a common payload you can use new hook method (#7422) (will be available with next edge release)

I have also checked for current routes[].payload support seems working fine with nuxt export:

nuxt.config:

export default {
  target: 'static',
  generate: {
    routes () {
      return [{
        route: '/',
        payload: { foo: 'bar' }
      }]
    }
  }
}

pages/index.vue:

export default {
  asyncData ({ payload }) {
    return {
      payload
    }
  }
}

dist/_nuxt/static/{version}/payload.js:

__NUXT_JSONP__("/", {data:[{payload:{foo:"bar"}}],fetch:[],mutations:void 0});

[rajesh-h]

Hi Team,

I am trying this static generation. I see Lot of 404 on my console whenever subpage has slug which has space in it.

open chrome inspect/devtools
go to homepage - https://cscom-2019.web.app
you can see many errors.
Here subpage is category. Any category which has a space(%20) in its name is giving 404 error on console for its payload.js.

One more scenario:
Single page - https://cscom-2019.web.app/aloo-puri-recipe-crispy-yet-soft-masala-potato-poori-cookingshooking

This post is linked to 6 categories, apart from one category rest 5 categories payload.js throws 404 error.

Please let me know if you need more details on the same.

[rajesh-h]

Ok I have planned to change my backend data for categories list.

But now I am stuck with querying :(

how can i look for slug = 'ABC' in the below categories list/array. This categories will be present in all posts so I need get the subset of posts matching a particular slug.

categories = [ {'slug':'123', category:'1 2 3'}, {'slug':'ABC', category:'A B C'}, {'slug':'XYZ', category:'X Y Z'}]

qry = this.$content().where({ categories: { $contains : 'How To Manage Slug Here' } })

Earlier I had categories as below, only values
categories = ['A B C', '1 2 3', 'X Y Z']
and my query was as below
qry = this.$content().where({ categories: { $contains : 'A B C' } })

[pi0]

@rajesh-h Would you please kindly report this issue to nuxt/content and with proper repro?

I will also try to reproduce and check the issue you mentioned about spaces :)

[rajesh-h]

Thank you @pi0. looks like json/netsed filter is not possible based on comments on this issue.

If space issue is resolved, I can go back to my original design where keeping categories array as simple list. Please let me know if you want any input for the space issue.

Thank you very much.

[Davounet]

Hello,

Thank you so much for the static generation mode, I'm trying it through nuxt-edge, great job from the team !
I stumbled upon a weird flash between route changes. The error page appears for a brief time, and displays a resolveRouteComponents is not defined message.

In dev mode, it happens on each route change.
In production mode (after nuxt build && nuxt export && nuxt serve) it does not happen between generated routes anymore, but still for fallback routes that are excluded from the static generation (the /profil route for example).

In both modes, the route loads after the flash. Did you encouter this behaviour before ?
Thank you !

EDIT: I was toying around the options. The weird flash only happened when I had loading: false in my nuxt config, I removed it and it is now working perfectly. I'm just leaving this message here in case someone finds themself in the same situation !

[rajesh-h]

@rajesh-h Would you please kindly report this issue to nuxt/content and with proper repro?

I will also try to reproduce and check the issue you mentioned about spaces :)

@pi0 I am not sure its the issue with space :( .
I removed the space on my category names still find the 404 error.

When you go down at this link - https://cscom-2019.web.app/category/cakes-more when more posts are getting loaded you will see lot of 404 for payload.js

this behavior not observed on homepage. https://cscom-2019.web.app you can keep going down and load posts.

Both have the same structure like load 10 posts initially then load further posts when you scroll down. Any lead to resolve this will be helpful.

In case you want to refer:
My Github Repo is here
SandBox - Here

Side Question: Does the static site removes that nice animation of horizontal line page loading on top when you click on a link?

[lautiamkok]

Pages with pagination navigations with this "full-static" feature don't work by the way. I assume that it is a bug. The pagination works fine with Nuxt 2.12.2.

[rajesh-h]

@rajesh-h Would you please kindly report this issue to nuxt/content and with proper repro?
I will also try to reproduce and check the issue you mentioned about spaces :)

@pi0 I am not sure its the issue with space :( .
I removed the space on my category names still find the 404 error.

When you go down at this link - https://cscom-2019.web.app/category/cakes-more when more posts are getting loaded you will see lot of 404 for payload.js

this behavior not observed on homepage. https://cscom-2019.web.app you can keep going down and load posts.

Both have the same structure like load 10 posts initially then load further posts when you scroll down. Any lead to resolve this will be helpful.

In case you want to refer:
My Github Repo is here
SandBox - Here

Side Question: Does the static site removes that nice animation of horizontal line page loading on top when you click on a link?

@pi0 did you happen to see what might be causing 404 errors? any lead would be helpful. Functionally no problem, just that too much error on console.

[simplenotezy]

I am eager to test this out, but I have two questions:

1. Will it work on a e-commerce platform with roughly 5-6000 routes with payload? Perhaps increase generate time a lot, or something else?
2. Will it work with Vuex? In my asyncData I do like so:

async asyncData ({ store, app, error, route, payload }) {
	if (payload) {
		store.dispatch('product/set', payload);
		return;
	}

[simplenotezy]

@atinux GREAT work! Seems to work out of the box. Even with routes which are meant to be fetched from server. Page switching is waay faster now.

However, I noticed my og:description is now "undefined". I am not sure if it is related to this pull through. I set og:description to process.env.npm_package_description. Has anything changed with this? @pi0

[simplenotezy]

One question though @atinux. I am curious, will this have any inital page speed / load time issues?

How is the implementation done exactly?

I really love the feature, and how fast it now switches pages, but we have a e-commerce platform with 5-6000 routes, so I am curious if this amount of pages will slow down initial page load speed.

You can check here https://beta.thejewelleryroom.com vs https://thejewelleryroom.com

[ReindDooyeweerd]

Hello,

Thank you so much for the static generation mode, I'm trying it through nuxt-edge, great job from the team !
I stumbled upon a weird flash between route changes. The error page appears for a brief time, and displays a resolveRouteComponents is not defined message.

In dev mode, it happens on each route change.
In production mode (after nuxt build && nuxt export && nuxt serve) it does not happen between generated routes anymore, but still for fallback routes that are excluded from the static generation (the /profil route for example).

In both modes, the route loads after the flash. Did you encouter this behaviour before ?
Thank you !

EDIT: I was toying around the options. The weird flash only happened when I had loading: false in my nuxt config, I removed it and it is now working perfectly. I'm just leaving this message here in case someone finds themself in the same situation !

Same issue over here, the following error flashes by when changing routes however no error is logged to the console.

resolveRouteComponents is not defined
An error occurred while rendering the page. Check developer tools console for details.

I have it in dev and production mode while running in ssr mode.

[josepjaume]

I'm finding a funny issue: Routes that return a 404 error still get statically rendered when using nuxt export. Shouldn't this halt the rendering and leave it to the fallback strategy?

[simplenotezy]

I'm finding a funny issue: Routes that return a 404 error still get statically rendered when using nuxt export. Shouldn't this halt the rendering and leave it to the fallback strategy?

Why would you generate a route that returns 404?

[josepjaume]

I'm finding a funny issue: Routes that return a 404 error still get statically rendered when using nuxt export. Shouldn't this halt the rendering and leave it to the fallback strategy?

Why would you generate a route that returns 404?

It's kind of a bug in my code (related to i18n and missing translated documents), but I can see some scenarios where the crawler can get confused and try to render a route that returns an error state - like, say, a route that comes from user input. Shouldn't Nuxt avoid statically rendering these routes and instead let the client-side code pick it up? Or, at least, shouldn't it statically render a 404 page? Right now it just falls back to the static SPA version of the page, which doesn't add much value. Funny enough; if you raise an exception, then the route doesn't get rendered (which is how I ultimately did the trick on my scenario).

In any case, this is such a neat feature and I'm enjoying it so much!

[atinux]

Normally if the crawler hits a page that render a 404, it will render the page with no ssr to let the client-side falling back

[anjali89r]

@atinux I want to host the app in aws s3 and still want to load data from my API for the dynamic routes. is there a to disable reading the payload.js and read the API response? I can exclude the dynamic routes but aws s3 will return it as 404 status and can impact the Google indexing