Nuxt.js: Cache component is not work?

Created on 24 Feb 2017 · 14Comments · Source: nuxt/nuxt.js

I followed the guide https://nuxtjs.org/examples/cached-components .But I find the cache didn't work! when I refresh the page every time, the date will change！

_{This bug report is available on Nuxt.js community (#c259)}

bug-confirmed question

Source

bimohxh

Most helpful comment

@ausir0726 @bimohxh

hey guys, I came up with a way to cache async data that is very simple.
you guys can refer the way on following which might give you inspiration.

import axios from 'axios';
import LRU from 'lru-cache';

const cache = LRU({
  max: 1000,
  maxAge: 1000 * 10,
});

export const get = async (url) => {
  let data = cache.get(url);
  if (data) {
    return JSON.parse(data);
  }
  const res = await axios.get(url);
  data = res.data;
  cache.set(url, JSON.stringify(data));
  return data;
};

and call get on your asyncData method.

yfxie on 22 Jun 2017

👍3

All 14 comments

+1 I have that problem too

evseevnn-zz on 24 Feb 2017

This url didn't provide the live demo link, maybe they find this has problem too?

bimohxh on 24 Feb 2017

Hi @bimohxh and @evseevnn

The example works perfectly, but Vue.js hydrates the date when the client-side is loaded:
vue hydrate

To see the example working, you need to check the source code: view-source:http://localhost:3000/ on Google Chrome and refresh, you will se that for 10 seconds, the <p>Timestamp: 1488371831438</p> won't change.

Atinux on 1 Mar 2017

@Atinux what is Vue.js hydrates the date when the client-side is loaded ?, so when I deploy my app in production , this problem is still exsit?

bimohxh on 10 May 2017

@bimohxh

component cache just cache the component , asycData will fetch again for client side .
so , you need view source in browser , you will see source html(with data) is cached .
https://github.com/nuxt/nuxt.js/issues/422

in my solution , I use varnish cache + nginx for cache solution .

here is my nuxt cache test
https://github.com/nuxt/nuxt.js/issues/550

ausir0726 on 10 May 2017

@ausir0726 so, the vue cache has no meaning? to be honest, we just want to cache the async data from api server, not a component view

bimohxh on 10 May 2017

@bimohxh yes , I also think it need server-side data cache .
but seems like we don't have right now .

so , I used varnish cache + nginx to build the cache system .

ausir0726 on 10 May 2017

@ausir0726 Thanks for your answer, do you have any tutorial about varnish cache + nginx to build the cache system?

bimohxh on 10 May 2017

@bimohxh I only have Chinese version document , 😆
and my nuxt app put on heroku ( dokku ) you can change you want

but you should modify POST/PUT method without cache .

https://paper.dropbox.com/doc/-reverse-proxy-server-0yTjxjz43D1ISYQ2EELNL

if you want use http2 , you should use ubuntu 16.04 ⬆️
it include openssl 1.0.2g

ausir0726 on 10 May 2017

@ausir0726 哈哈，谢谢，我是 Chinese

bimohxh on 10 May 2017

@bimohxh yes , I know 🤣
I just write English for some body find this discuss .

ausir0726 on 10 May 2017

👍1

@ausir0726 @bimohxh

hey guys, I came up with a way to cache async data that is very simple.
you guys can refer the way on following which might give you inspiration.

import axios from 'axios';
import LRU from 'lru-cache';

const cache = LRU({
  max: 1000,
  maxAge: 1000 * 10,
});

export const get = async (url) => {
  let data = cache.get(url);
  if (data) {
    return JSON.parse(data);
  }
  const res = await axios.get(url);
  data = res.data;
  cache.set(url, JSON.stringify(data));
  return data;
};

and call get on your asyncData method.

yfxie on 22 Jun 2017

👍3

@yfxie seems a good idea, I will try it

bimohxh on 22 Jun 2017

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.