How to Implement Page Caching Using Server Middleware in Nuxt3

[Wulawa]

I am currently working on a Nuxt.js project and I am trying to increase the performance of my application by implementing page caching. I would like to manually implement this within a server middleware in Nuxt.js.

Could you please provide some guidance on how to achieve this? I am particularly interested in understanding:


In nuxtjs2, I will use res.end() to respond to caching in advance in serverMiddleware, but in nuxt3, it is not recommended to respond to requests in Server Middleware

I appreciate any help or resources you can provide on this topic.

Thank you for your time.

[manniL]

You can use route rules for now. For a more fine-grained approach, follow #26598

[xjccc]

Like manniL said, you could look at this.
routeRules

or

Legacy Handler or Middleware

[Wulawa]

Thank you very much for your suggestion. Yes, using fromNodeMiddleware is work, Currently, I have implemented it in the following way:

export default defineEventHandler(async (event) => {
	const cacheableKey  = await getCacheableKey(event);
	if (cacheableKey) {
		const hit = cachePage.get(cacheableKey);
		return hit
	}
	event.node.res.original_end = event.node.res.end;
	event.node.res.end  =  function (html) {
		if (event.node.res.statusCode === 200) {
			cachePages.set(cacheableKey, html);
		}
		event.node.res.original_end(html)
		return this;
	}
})

Do you see any issues with this approach?

[xjccc]

😂 For long time ago, i have a similar scene.
cache
But i don't think its a good complete. For now we could use routeRules

[Wulawa]

Ok, Thank you once again. I'll try routeRules . Also, do you have any good examples of routeRules that you could share?😊

[xjccc]

Look at routeRules for some examples in your scene.