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).
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<br>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<br>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<br>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<br>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).
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!
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2338">#c2338</a>)</em></sub></div>