Home

Intro

We’re using Nuxt.js to build a site. We have an GraphQL API that we query to get all the content. Nuxt.js is then used to generate a ‘prerendered’ version of the site, that will be interactive once fully loaded. Consecutive page loads (user navigating around the site) only load GraphQL data (and if needed, additional JS).

Problem

Now, we were anticipating that the ‘universal’ mode would allow us to generate routes for all dynamic pages, but when someone adds new data, some problems arise.

Imagine the following on the async-data example when being served on a static hosting (e.g. Netlify, Firebase Hosting) being built by running nuxt generate:

1. User navigates to home page
   We serve the generated index.html through Firebase Hosting, the page will become interactive but no additional queries are performed on the client side.
2. User clicks on Blog
   We query the posts and show all post titles with a link to their respective routes.
3. User clicks on a post that hasn’t been generated (/posts/1 is generated, but all the others are not and exists only in the database
   We query the post by id, and we render the component.
4. For some reason (refresh, user copies URL and shares it, etc.) the page is loaded from scratch
   Now, there are two ways this could go:
   1. Firebase responds with a 404 status (because the prerendered file could not be found)
   2. We could serve the index.html, but since it assumes that it was correctly generated, upon becoming interactive, it won’t notice the route doesn’t match the rendered content, and shows the wrong content (the homepage).

Proposal

So to solve this issue and to make Nuxt.js more flexible when used in ‘universal’ mode but deployed statically, I’d want to suggest a configuration option where—aside from the generated pages—a HTML file with the SPA template (with the loader and without any data) would be returned which would allow us to route all ‘Not found’ traffic to the SPA template.

This would allow us to build a platform where data changes trigger rebuilds of the site (e.g. run nuxt generate asynchronously) but where the route would function instantly.

I’d love to get your thoughts on this, to see if you have a better suggestion on handling cases like these. Thanks!