DEV Community

Alan Schio
Alan Schio

Posted on

2 1

Mastering Nuxt hooks - Disable SSG default pages (200, 400) .

Nuxt is an awesome framework, build on top of another awesome framework, Vue, with a powerful structure that cover mostly everything you want and need, it allows you to do both, SPA, SSR and SSG.

Nuxt's Static Site Generation provider a set of default pages to help you, (root) index.html, 200.html and 400.html.
But image the case: you need to get rid of 200 and 400, for any reason like you need to merge nuxt generated pages into a already in production page/application (e.g. PHP legacy code and Nuxt new generated pages).

But these pages are hardcoded into Nuxt, so how would we avoid to get rid of then?

We can of course do a rm 200.html for example after the build, but lets image this scenario:

A legacy application that you are page by page migrating to Nuxt, using SSG facilitates your work because it will generate the same PHP/NGNIX structure: base HTTP directory driven routing.

Perform the build and after the rm 200.html rm 404.html rm index.html can be a pain and even may not work as expected: if we have the same pages on the legacy application root.

At Nuxt discussion page we can see a entry related to it Disable 200.html and 404.html #18831, but the solution there do not work.

You may think _"not a problem i can extend the routes and remove then". Well... that not work cuz they aren't a route on your project, and this happens in a lower layer than routes, on nitro. Nitro is the web server that powers Nuxt, but you probably already know that.

Till today (Jan/24/2025) Nuxt has not yet got it into its docs: https://nuxt.com/docs/guide/concepts/rendering#deploying-a-static-client-rendered-app and states that these pages are default with no option to undo that:

Nuxt Static Cliente Rendered - Docs

The Solution

After dig a little into the Nuxt's code, we can see the are add into the Nitro's hook: 'prerender:routes', this hook Taking a look into nitro pre render hook interface we can see it has a skip property, and its implementation is pretty straight forward and what we are lookin for:

\\ https://github.com/nitrojs/nitro/blob/main/src/core/prerender/prerender.ts
    // Check if route is skipped or has errors
    if (_route.skip || _route.error) {
      await nitro.hooks.callHook("prerender:route", _route);
      nitro.logger.log(formatPrerenderRoute(_route));
      dataBuff = undefined; // Free memory
      return _route;
    }

Enter fullscreen mode Exit fullscreen mode

With that knowledge we can safely skit the generation of this files by doing at your nuxt.config.ts

export default defineNuxtConfig({
  ssr: false,
  nitro: {
    hooks: {
      "prerender:generate"(route) {
        const routesToSkip = ['/200.html', '/404.html']; 
        if (routesToSkip.includes(route.route) ) {
          route.skip = true;
        }
      },
    },
  },
})
Enter fullscreen mode Exit fullscreen mode

In my case i even need the general root index on it: const routesToSkip = ['/200.html', '/404.html', 'index.html'];

And now we have a SSG dist generation without the default Nuxt pages:

Image description

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay