0

I'm setting target: "static" to pre-generate most pages for my website.

There are some pages that are created at run-time, like if a user creates a new page in their account.

Problem: When the user creates a new page and refreshes, that static page wasn't generated, and instead it shows my homepage (default.vue).

Is there a way to have the 404 understand the route and load it client-side, as if i was using target: "server" or SPA mode?

I've tried different combinations of:

target: 'server',
ssr: true,
generate: {
    fallback: true,
},

I already have dynamic routes set up (/page/:id) but when I load a page that was created after nuxt generate, that generated page doesn't exist.

d-_-b
  • 21,536
  • 40
  • 150
  • 256
  • Where is your app hosted and what path is it? Couldn't you make a catch-all for that specific page? Your pages are supposed to be built at runtime too. – kissu Aug 20 '22 at 13:55
  • I'm hosting this on firebase. There are more than one page type that does this, so I was looking for a generic way to have it fallback to a typical Vue dynamic route – d-_-b Aug 20 '22 at 13:56
  • Not sure how Firebase handles that one. You can put anything into a catch-all per-se. Or you could define the paths in advance. Using Nuxt2 here? – kissu Aug 20 '22 at 13:58
  • You always exclude the routes and have them as SPA only: https://stackoverflow.com/a/66472634/8816585 – kissu Aug 20 '22 at 14:03
  • @kissu yes nuxt 2. How/why would I define a catchall if nuxt should already have my router.js. can't I reuse that somehow? – d-_-b Aug 20 '22 at 14:23

2 Answers2

0

This is not a hosting question. You can define a dynamic page that handles all user created pages.

/pages
 ---/user
      ---/_slug.vue

So you can have urls like: "https://www.example.com/user/1".

This user id (slug) is managed by your backend/data base, and when you make a request to _slug.vue page, you can manage if this user id exists, is valid or any kind of validation.

Something like (_slug.vue):

<template>
  <div>User page: {{ paramSlug }}</div>
</template>

<script>
export default {
  name: 'UserPage',

  validate({ params }) {
    // Required slug. Validation before call your DB
    return params.slug
  },

  asyncData({ params, error }) {
    const paramSlug = params.slug

    // Check paramSlug in your DB
    // Make validations

    // If user id is not valid redirect to error
    error({ statusCode: 404 })

    return {
      paramSlug
    }
  }
}
</script>

When you generate your site as static you must set your dynamic routes in the nuxt.config.js file:

generate: {
  fallback: true,
  async routes() {
    await _getRoutes()

    return routes
  }
}

And the _getRoutes function gets a slugs list of your dynamic pages from your DB.

async function _getRoutes() {
  const parsedRoutes = []
  const usersSlugsList = await requestToYourDB()

  if (Array.isArray(usersSlugsList)) {
    usersSlugsList.forEach((item) => {
      // Assuming item is your slug
      parsedRoutes.push(`/users/${item}`)
    })
  }

  return parsedRoutes
}
thebyteland
  • 359
  • 1
  • 2
  • 10
  • Hi @thebyteland I already have the dynamic pages setup, but when I load one with `target: "static"` it renders the homepage since it wasn't pre-rendered using `nuxt generate`. Does that help clarify? – d-_-b Aug 20 '22 at 15:19
  • @d-_-b try to host your app on Netlify. From what I understand, if you access a path that should be generated like `/pizza` (it's a dynamic route), it throws you back to `/`? You can also double-check that locally too with `yarn generate && yarn start`. – kissu Aug 20 '22 at 15:45
  • OK let me add to the answer how to generate your dymanic routes – thebyteland Aug 20 '22 at 16:01
  • Probably not the issue still. Especially since OP is fine with them not being rendered ahead of time as mentioned here: https://stackoverflow.com/questions/73427239/can-i-use-nuxt-static-target-with-spa-for-404-pages/73427513?noredirect=1#comment129669890_73427239 – kissu Aug 20 '22 at 16:02
0

You can create a page like /new_page. You can redirect to this page on Nginx or CloudFront in case 404 when the page does not exist with all query parameters and URL like /new_page?uri=<not generated url>. When page loaded with all user data you can use a client-side redirect by router.push to the correct place with parameters.

Gennady
  • 26
  • 2