Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: options.target and full-static export #6159

Merged
merged 179 commits into from May 7, 2020
Merged

feat: options.target and full-static export #6159

merged 179 commits into from May 7, 2020

Conversation

@Atinux
Copy link
Member

@Atinux Atinux commented Jul 30, 2019

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:
Screenshot 2019-07-31 at 17 31 24

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
Copy link

@codecov-io codecov-io commented Jul 30, 2019

Codecov Report

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

Impacted file tree graph

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

Loading

packages/vue-renderer/src/renderer.js Outdated Show resolved Hide resolved
Loading
packages/webpack/src/config/base.js Outdated Show resolved Hide resolved
Loading
@nuxt nuxt deleted a comment from codecov-io Aug 2, 2019
@husayt
Copy link
Contributor

@husayt husayt commented Aug 2, 2019

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?

Loading

@Atinux
Copy link
Member Author

@Atinux Atinux commented Aug 2, 2019

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 :)

Loading

packages/config/src/options.js Outdated Show resolved Hide resolved
Loading
packages/core/src/module.js Show resolved Hide resolved
Loading
packages/vue-app/template/router/routes.json Outdated Show resolved Hide resolved
Loading
packages/vue-app/template/server.js Show resolved Hide resolved
Loading
packages/generator/src/generator.js Outdated Show resolved Hide resolved
Loading
@pi0 pi0 mentioned this pull request Aug 5, 2019
@emiliobondioli
Copy link

@emiliobondioli emiliobondioli commented May 26, 2020

Hey all! First of all thanks for the work you're doing on this :)
I finally managed to get full static generation where all I have to do is upload the dist folder on Netlify and everything works right away, payload and assets included.

Right now I'm still using a little hack to add a generate:staticAssets hook to grab the image links and replace them with local versions (as discussed here) before saving the json payloads. I wanted to ask the Nuxt team if it's possible to include a hook to modify the payload before it goes through @nuxt/devalue, or if you guys have some better ideas on how to handle this case - I tried to look around the code but I'm still a bit lost on how everything works under the hood.

Loading

@nilsnh
Copy link

@nilsnh nilsnh commented May 27, 2020

Hi! Thanks for all the hard work everyone. This is indeed a great feature. I'm wondering if the generate route+payload feature has been removed?

export: {
  routes (): {
     return [{
       route: '/',
       payload: pageData
     }]
  }
}

I'm asking because I'm using Sanity CMS as backend and they have a price cap on the number of API calls we make. So, I would like to be able to grab all the page data in one call and feed it to all the pages, instead of making API calls per page on each deploy or content change.

I did some testing with the classic generate route+payload feature just now using nuxt-edge@2.13.0-26508984.2383bcbd. I'm calling npx nuxt build && npx nuxt export. And it doesn't seem to use my pre-generated route payloads.

Might be bugs in my code off course. Nonetheless, it would be great to hear if generating data for all pages in one action is still supported?

Thanks. 🙏

cc: @Atinux

Loading

@davidsneal
Copy link

@davidsneal davidsneal commented May 27, 2020

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

Loading

@pi0
Copy link
Member

@pi0 pi0 commented May 27, 2020

@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});

Loading

@rajesh-h
Copy link

@rajesh-h rajesh-h commented May 28, 2020

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.

Loading

@rajesh-h
Copy link

@rajesh-h rajesh-h commented May 28, 2020

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' } })

Loading

@pi0
Copy link
Member

@pi0 pi0 commented May 28, 2020

@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 :)

Loading

@rajesh-h
Copy link

@rajesh-h rajesh-h commented May 28, 2020

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.

Loading

@Davounet
Copy link

@Davounet Davounet commented May 29, 2020

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 !

Loading

@rajesh-h
Copy link

@rajesh-h rajesh-h commented May 29, 2020

@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?

Loading

@lautiamkok
Copy link

@lautiamkok lautiamkok commented Jun 1, 2020

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.

Loading

@rajesh-h
Copy link

@rajesh-h rajesh-h commented Jun 4, 2020

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

Loading

@simplenotezy
Copy link

@simplenotezy simplenotezy commented Jun 8, 2020

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;
	}

Loading

@pi0 pi0 mentioned this pull request Jun 10, 2020
@simplenotezy
Copy link

@simplenotezy simplenotezy commented Jun 10, 2020

@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

Loading

@simplenotezy
Copy link

@simplenotezy simplenotezy commented Jun 15, 2020

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

Loading

@Vout
Copy link

@Vout Vout commented Jun 22, 2020

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.

Loading

@josepjaume
Copy link

@josepjaume josepjaume commented Jul 3, 2020

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?

Loading

@simplenotezy
Copy link

@simplenotezy simplenotezy commented Jul 3, 2020

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?

Loading

@josepjaume
Copy link

@josepjaume josepjaume commented Jul 3, 2020

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!

Loading

@Atinux
Copy link
Member Author

@Atinux Atinux commented Jul 4, 2020

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

Loading

@anjali89r
Copy link

@anjali89r anjali89r commented Sep 3, 2020

@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

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
No open projects
Nuxt v2.10
  
In progress
Linked issues

Successfully merging this pull request may close these issues.

None yet