Nuxt Server Side Components ReInvalidation
Please suggest implementation fixes of Nuxt Server Side Components (SSCs) revalidation,
(pages/app.sever.ts):
<script setup>
const { data } = await useFetch("/api/apps", {
transform: (_apps) => _apps.data,
});
</script>
server/api/apps.get.ts
// server/users.ts
export default defineEventHandler(async (event) => {
try {
const response = await fetch("API/apps");
const data = await response.json();
return {data};
} catch (error) {
return {error };
}
});
In nuxt.config.ts, I've set up /api for caching. After the initial deployment with 4 records and static server pages created, will the local server components not update with new records and server pages after 300 seconds?
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
experimental: {
componentIslands: true,
},
devtools: { enabled: true },
serverMiddleware: [
// Add server middleware for handling API routes
{ path: '/api', handler: '~/api/apps.get.ts' } // Adjust the path and handler as needed
],
routeRules: {
'/': { prerender: true },
'/apps': { swr: 3600 },
'/apps/*': { swr: 3600 },
'/api/': { cache: { maxAge: 300 } },
},
})
What changes to be done to achive this ?
(pages/app.sever.ts):
<script setup>
const { data } = await useFetch("/api/apps", {
transform: (_apps) => _apps.data,
});
</script>
server/api/apps.get.ts
// server/users.ts
export default defineEventHandler(async (event) => {
try {
const response = await fetch("API/apps");
const data = await response.json();
return {data};
} catch (error) {
return {error };
}
});
In nuxt.config.ts, I've set up /api for caching. After the initial deployment with 4 records and static server pages created, will the local server components not update with new records and server pages after 300 seconds?
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
experimental: {
componentIslands: true,
},
devtools: { enabled: true },
serverMiddleware: [
// Add server middleware for handling API routes
{ path: '/api', handler: '~/api/apps.get.ts' } // Adjust the path and handler as needed
],
routeRules: {
'/': { prerender: true },
'/apps': { swr: 3600 },
'/apps/*': { swr: 3600 },
'/api/': { cache: { maxAge: 300 } },
},
})
What changes to be done to achive this ?
