Generating Dynamic Routes for Static Site Generation with Nuxt 3

#nuxt #webdev #vue #tutorial

Static Site Generation (SSG) is an increasingly popular approach for building websites that combines the benefits of server-side rendering with the simplicity of static site hosting. Nuxt 3 is a powerful framework for building static sites that includes support for generating dynamic routes, allowing you to create static pages for every possible route parameter. In this blog post, we will explore how to generate dynamic routes for static site generation with Nuxt 3.

What is Dynamic Route Generation?

Dynamic routes are routes that are generated based on dynamic data, such as user-generated content or data from an API. For example, a blog site might have a dynamic route for each blog post, where the route includes the post's slug. Generating dynamic routes allows you to create static pages for each possible route, improving site performance and SEO.

How to Generate Dynamic Routes in Nuxt 3:

To generate dynamic routes in Nuxt 3, we need to fetch all of our data during build time and pass this to our nitro config to render the routes, at the moment this is not possible yet with command generate .

Current git issue: https://github.com/nuxt/nuxt/issues/13949

the solution I'm writing about was originally done by the user Smef

Let's start by modifying the nuxt.config.js file. In this example I will be using my Directus CMS endpoint to fetch all the blogs I have.

We will need to install axios first I've found that I can't use the composable useFetch inside the nuxt.config



import axios from 'axios'
// create a function to fetch the routes from the API
const getPostRoutes = async () => {
  const response = await axios.get(
    'https://sli1n332.directus.app/items/posts?filter={%22status%22:%22published%22}&sort=-date_created'
  );
  // return the array of routes
  return response?.data?.data.map((post) => `/post/${post.slug}`);
};
export default defineNuxtConfig({
ssr: true, // this should be set to true for static websites
 hooks: {
    async 'nitro:config'(nitroConfig) {
      // fetch the routes from our function above
      const slugs = await getPostRoutes();
      // add the routes to the nitro config
      nitroConfig.prerender.routes.push(...slugs);
    },
  },
})

In this example the ssr property is set to true, indicating that the website should be built using server-side rendering.

The hooks property is an object containing a list of functions that are executed during different stages of the Nuxt.js build process. In this code block, the nitro:config hook is used to add the generated routes to the Nitro config object.

Inside the nitro:config hook, the getPostRoutes function is called to fetch the post routes from the API. The routes are then added to the nitroConfig.prerender.routes array using the push method.

now if we run the command