Nuxt.js: using "cachios" with Nuxt.js to share an axios cache between server and browser ?

[yann-yinn]

Hello !
I am using cachios, which speeds up a lot my site by caching http request with different ttl for each request.

But it seems that running Nuxt.js, there is one cachios instance for the server and one for the browser, so when a page has been cached by server, browser can not get it; and vice versa.

Is it possible with Nuxt.js that browser and server feed and get data from the same cachios instance ? I have no idea how to to this, maybe with store and nuxtServerInit action ?

i want to access then this cache object instance from this file : https://github.com/nyl-auster/yineo-nuxt-wordpress/blob/master/services/wpContentApi.js

But how am i supposed to access the store object from this service file ?

(code below is my index.hs from store and does not work at all , saying : "TypeError: Converting circular structure to JSON")

import cachios from 'cachios'
import Vuex from 'vuex'

/**
 * This our global state for our app.
 */
const createStore = () => new Vuex.Store({
  state: {
    menuMobileIsOpened: false,
    cachiosInstance: null
  },
  mutations: {
    setMenuMobileIsOpened (state, value) {
      state.menuMobileIsOpened = value
    },
    setCachiosInstance (state, value) {
      state.cachiosInstance = value
    }
  },
  actions: {
    nuxtServerInit ({ commit }) {
      commit('setCachiosInstance', cachios)
    }
  }
})

export default createStore

_{This question is available on Nuxt.js community (#c1124)}

[yann-yinn]

Hum, i moving toward another way : using an express server with nuxt as a middleware (see here : https://nuxtjs.org/api/nuxt-render#nuxt-render-req-res- ).
This way i can create a proxy : a custom local url that will call the actual wordpress api using cachios. This way, cachios should be consistent (i hope).

[pi0]

@nyl-auster You can also do the reverse if don't want an external webserver (https://nuxtjs.org/api/configuration-servermiddleware) :D and add proxy to a route. Also there is a ready-to-use proxy module for nuxt: https://github.com/nuxt-community/modules/tree/master/modules/proxy

[yann-yinn]

@pi0 oh okay, will look at that, note sure about the advantages of one or the other, maybe less code with the second option ? first option (express with nuxt as middleware) seems easy and straightforward to me.

[pi0]

@nyl-auster Both are the same! This is the magic of connect/express middleware that can compose in a shape is easier for us :) PS: Feel free closing issue if problem resolved.

[yann-yinn]

Did not try it yet but i am closing for now : using a local proxy with server side caching to call an expensive external api seems the best option in this case. thanks @pi0

[yann-yinn]

hi @pi0 , i try to follow the doc but i failed to use serverMiddleware plugins. Am I doing something wrong ?

nuxt.config.js :

module.exports = {
  serverMiddleware: [
    { path: '/cache', handler: '~/services/cache.js' }
  ],
  ...

~/services/cache.js :

module.exports = (req, res, next) => {
  console.log("hello")
  next()
}

I expected to see "hello" visiting /cache or cache/* but this is not the case, any idea ?

Here is my corresponding branch : https://github.com/nyl-auster/yineo-nuxt-wordpress/tree/cache

[pi0]

Hi @nyl-auster . Ah i think there is a unhandled case in nuxt renderer while registering will fix it soon. You can currently use this:

nuxt.config.js :

module.exports = {
  serverMiddleware: [
   '~/services/cache.js' 
  ],

~/services/cache.js :

module.exports = {
 path: '/cache',
 handler: (req, res, next) => {
  console.log("hello")
  next()
 }
}

[yann-yinn]

@pi0 indeed works great this way. Do you want me to open issue for the first syntax not working ?

[pi0]

@nyl-auster No need :) fixed!

[yann-yinn]

For other people : this is how i managed to use cachios :

1. I created a local "/api" url with express. All my client http requests are requesting this local node api server.
2. This API is handled by a "proxy.js" file : it send back cache , or it requests wordpress api with the passed url if there is no local cache ( cachios do that for me )

Some code here :
https://gist.github.com/nyl-auster/5a6d1a523aa8c3698b1675985a68422a

Example : navigating on yineo.fr now fills a consistent node cache : https://yineo.fr/api/cache

[pi0]

@nyl-auster That's awesome. Would be my honor if I can help developing a ready to use Module for cachios if interested.

[yann-yinn]

@pi0 i'm waiting to see first if it is okay on production during several days. And trying to understand if i can use @nuxtjs/proxy for this use case, not sure to understand which is the typical use case for it.

[pi0]

@nyl-auster Sure! So just ping me or open new issue in case of any help was needed in side of us :) Best wishes.

[Goopil]

Nice catch there ! thanks for sharing ;)

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.