seo Question posted in
Some basic information to get you started with this can be found here.

Seo – Can you invalidate SWR/static routes depending on user actions using Hybrid Rendering in Nuxt 3?

Let’s say we have following pages:

/profile-edit: A private page, where the user can edit his profile let’s call him "Sam James".

/profile/sam-james: A publicy available profile page (like LinkedIn, Facebook etc., which should have very good SEO and performance in general)

The routeRules could look like this:

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    "/edit-profile": { ssr: false },
    "/profile/**": { swr: true },
    // OR?
    // "/profile/**": { static: true }, 
    
  },
});

The public user profile pages (e.g. profile/sam-james) are cached via static or SWR. This should improve performance and SEO score heavily.

Now here is the tricky part: Every time the user updates his profile, his current public profile page should be invalidated and on the next request to the page, the cache should be updated with the new data.

Can you do this kind of invalidation on the server manually in Nuxt 3?

Next.js already has this feature an calls it "On-Demand Revalidtion": https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration#on-demand-revalidation

Tags:

2

Answers


  1. 0

    I found partial solution for the case you’re looking for. There’s no public api with cache but theres a workaround. First of all you set up nitro storage (fs, redis, etc)

    nitro: {
    storage: {        
        db: {
            driver: 'fs',
            base: './.data/db'
        }
    },
},

routeRules: {
    '/profile/**': {
        swr: 3600,
        cache: {
            base: 'db',
        },
    }
}

    Then assign routeRules to specific storage as per example above.

    Then you setup the following server route (project/server/routes/invalidate.ts)

    export default defineEventHandler(async () => {
    const storage = await useStorage('db');

    const keys = await storage.getKeys();
    const keysToInvalidate = [];

    for (let key of keys) {
        if (key.startsWith('nitro:routes:_:_:profile')) {
            keysToInvalidate.push(key);
        }
    }

    for (let key of keysToInvalidate) {
        storage.removeItem(key);
    }

    return JSON.stringify(keysToInvalidate);
});

    Then when you want to invalidate you need to call http://website/invalidate
    This would flush all keys related to profile page. However you’ll have to do something with browser cache. I’m not yet sure how to fix browser cache but simple ctrl + shift + r helps to reset it and you see updated page. Sadly I couldn’t find any better solution so far.

    Login or Signup to reply.
  2. 0

    You can use this Nuxt module: https://nuxt-multi-cache.dulnan.net/ that have a "purge" API that works for your case. Here the purge api docs: https://nuxt-multi-cache.dulnan.net/features/api

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search