Nuxt.js: SSR extremely slow (1000ms +)

[nnqq]

Hello. I have a website with Nuxt.js and i think it's unreasonably very slow when HTML is server-side rendered (first page open). In my case latency is around 1500-2000ms (i have a bit more components than in reproduce repo). It seems that the latency grows exponentially along with the increase in the number of components. I created small repo to reproduce it, details below

Versions

• nuxt: v2.14.6
• node: v12.18.3

Reproduction

1) Clone repo https://github.com/nnqq/issue-nuxt-slow-ssr

2) Start app in production mode npm run build && npm start

3) Measure the http://localhost:3000 latency via Postman (or another tool)

Steps to reproduce

1) Create Nuxt project with create-nuxt-app

npm init nuxt-app@latest issue          

create-nuxt-app v3.4.0
✨  Generating Nuxt.js project in issue
? Project name: issue
? Programming language: TypeScript
? Package manager: Npm
? UI framework: Bootstrap Vue
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? What is your GitHub username? nnqq
? Version control system: None

2) Add some medium size components

3) Start app in production mode npm run build && npm start

4) Measure the http://localhost:3000 latency via Postman (or another tool)

What is Expected?

Lower latency around 100-300ms or less

What is actually happening?

Very slow SSR HTML response (1055ms)

[nnqq]

I changed TS to JS in another branch, but the latency is around the same (bad) https://github.com/nnqq/issue-nuxt-slow-ssr/tree/js

[manniL]

Works fine on my machine for both: with and without bootstrap vue.

Plain

---

With BT Vue

[aryraditya]

You are rendering 100 records on the CardDeck component

[manniL]

Whoops 🙈 I thought based on the issue that its about a plain version of Nuxt. As @aryraditya mentioned, having so much data in the actual view might take a bit of time for the Node.js server to render on the initial request. You can try to mitigate this a little by caching the response or the component.

Related: https://github.com/nuxt-community/modules/tree/master/packages/component-cache , https://ssr.vuejs.org/guide/caching.html#component-level-caching

[nnqq]

@manniL @aryraditya thank you. I thought that 100 items not so much to cache it. Component cache on repeated cards has reduced latency