Nuxt.js: Want understanding correct server-side cache page

[ausir0726]

hi , usually I use nuxt generate project , but I have a frequently update project need deploy nuxt project self hosting ( with SSR ).

As I know we can set nuxt.config.js cache as true to open cache
and in page component set name and serverCacheKey for component cache ..

ok ... but I in my case , I always have 3-4 sec TTFB ( server-side fetch data alway )
... In face , I check the source code , It really have cache for the date date ( no change when fresh )

ummm.... it seems like server-side return a cache data , but still block on async/await function...
why it now just return a cache data , and escape asyncData function ? ..
Am I do it correct ?

And if I fetch data in vuex serverInit , does it have cache ? Cloud I also get a long time TTFB ?

this is my code ... just fetch a fake 3 second delay function

thanks.

and you can try my test on this url
http://cache-test.dk.finpo.com.tw/
( note !! open this link need wait over than 3 seconds. )
( maybe this link can't browser few month later ... )

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

[ausir0726]

It looks like I misunderstand something ....

remote data not fetch again in client render ( I monitor chrome network )
so.... page loading just need 3 sec ( SSR + client ) not 3*2 sec .

but how can I cache data from server side ? I want reduce TTFB when second time load page...
( just throw a cache page -with remote data for SEOO ) and client fetch again ( loading.... and append data )

[ausir0726]

hi , It's me again ...

I have some tested about cache ...
I use nuxt/express create a project , like before for test TTFB issue .

I add a package apicache , like it's name , it's a middle cache for all route
so I add to my server.js

...
const apicache = require('apicache')
let cache = apicache.middleware
app.use(cache('5 minutes'))
...

I execute yarn run dev
first time , I got 4 seconds TTFB , when I refresh , it down to 27ms
but .... the asyncData dose not call api again on client-side ...
( reasonable ) it's same without apicache ...

so , for client side re-fetch data .. I modify my code as following
index.vue

<script>
import axios from 'axios'

async function fetchData() {
  const { data } = await axios.get('https://ausir.stdlib.com/[email protected]/')
  return Object.assign(data, { date: Date.now() })
}

export default {
  name: 'home',
  data() {
    return { loading: false }
  },
  async asyncData () {
    // get a just 3 second delay api
    return await fetchData();
  },
  async beforeMount () {
    this.loading = true;
    const data = await fetchData();
    this.text = data.text;
    this.date = data.date;
    this.loading = false;
  }
}
</script>

when I refresh , I got 27ms TTFB , and 3 seconds loading and append new data .
and source code have nice SEO data .
voilà! that's I want ... it's same experience with nuxt generate static page .

but ... if that page has no cached , that person will waiting 4 seconds TTFB and 3 seconds loading....
seems not very good ... ( if cache time is long enough , should a few people waiting so long ... )

I don't know is this a best practice ? or correct ? ....
If use SSR ( just fetch a few http request api data ) will create a long time TTFB every request ...
I don't know how to use SSR on demand .

@Atinux If nuxt.js had server-side component cache , should nuxt.js need server-side data cache ?
as I know , cache have many choose , like memory , filesysem , keyvalue db ...etc
and many option ... TTL , memory size , file size , db connect ...
But if there is an official cache out of the box is the best

but .. if without this , are we really only accept long time TTFB ?
( I just have request 2-3 api data , my TTFB is 3s )....

here is my express demo link . it cache 5 mins .
If no one access this page , you need 3 sec TTFB , and 3 sec Loaing .
( refresh just 25ms TTFB , and 3 sec loading ... )
http://express-test.dk.finpo.com.tw/

and this is my test repo
https://github.com/ausir0726/nxut-express-cache-demo

[alexchopin]

@ausir0726 Nuxt simply uses what Vue recommend for caching. You can have a look on the official Vue SSR Documentation for understand how caching works.

[ausir0726]

just share my resolve .

I install a varnish cache server front nuxt.js server , and a nginx server front varnish server .

and varnish cache nuxt.js render html about 15min - 1day , and nginx use e-tag cache .
so , in 15 mins , just one visitor need long time TTFB , other just only need about 25ms
if api data changed , I trigger varnish clear that page cache , and nginx will generate a new e-tag .
visitor will get a new fresh SSR page .

seems it a best solution for me . now my TTFB is reduce 1.7s- 2s to 46ms ( just e-tag check 20ms )

Finally , I don't have use VUE component cache .

[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.