Nuxt•4d ago

Nuxt Content is slow

I’m using Nuxt Content as a CMS for some of my pages, but I’m experiencing noticeable delays during page loading. I’m not sure what’s causing it. I also tried integrating NuxtHub with the following configuration in nuxt.config.ts

content: {
  preview: {
    api: 'https://api.nuxt.studio',
  },
  database: {
    type: 'd1',
    bindingName: 'DB',
  },
}

content: {
  preview: {
    api: 'https://api.nuxt.studio',
  },
  database: {
    type: 'd1',
    bindingName: 'DB',
  },
}

However, this call remains consistently slow:

const { data: page } = await useAsyncData('index', () => {
  return queryCollection('content').path('/').first()
})

const { data: page } = await useAsyncData('index', () => {
  return queryCollection('content').path('/').first()
})

It’s really strange because other pages where I make calls to hubDB in the setup function load instantly. Is there anything I can do to improve performance when using Nuxt Content with D1 and NuxtHub? I came across this GitHub issue, but it doesn’t seem to be resolved yet. Would my only real alternative be to stop using Nuxt Content altogether, or are there workarounds or best practices to speed it up?

GitHub

Issues · nuxt/content

The file-based CMS for your Nuxt application, powered by Markdown and Vue components. - Issues · nuxt/content

5 Replies

kapa.ai•4d ago

Hi @lorenzofiamingo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I understand you're experiencing performance issues with Nuxt Content, particularly with page loading times. Let me address your concerns based on the information available. Understanding the Performance Issue Nuxt Content v3 moved from file-based storage to an SQL database system specifically to improve performance. This change was made to address issues like slow queries and large bundle sizes that affected serverless deployments. The slowness you're experiencing could be related to several factors: 1. Cold Start in Serverless Environments: In serverless environments like NuxtHub, each user request can trigger a fresh instance of your Nuxt server, which means the database needs to be initialized from scratch each time. As mentioned in the documentation:

"During runtime, when the application executes the first query to retrieve content, the module reads the generated dump from the previous step and restores it into the target database." Database

2. Database Restoration: The first query might be slow because it's restoring the database dump. Potential Solutions Here are some approaches to improve performance: 1. Debug Your Database You might want to check if there are issues with your SQLite database:

npx nuxi cleanup && npx nuxi dev

npx nuxi cleanup && npx nuxi dev

This will clean up cached data and restart your Nuxt app with a fresh database. You can also use the SQLite VS Code extension to inspect your database as suggested in the Tools documentation. 2. Optimize Client-Side Navigation Nuxt Content v3 uses WASM SQLite in the browser for client-side navigation:

"When the application executes the first content query, it downloads the generated dump from the server and initializes a local SQLite database within the browser. From that point onward, all queries are executed locally without needing to call the server." Nuxt Content v3

This means subsequent navigations should be faster after the initial load. 3. Consider Alternative Database Adapters You're currently using the D1 adapter for Cloudflare Workers. You might want to try a different database adapter if your deployment environment supports it:

// For PostgreSQL
content: {
  database: {
    type: 'postgres',
    url: process.env.POSTGRES_URL,
  }
}

// For LibSQL/Turso
content: {
  database: {
    type: 'libsql',
    url: process.env.TURSO_DATABASE_URL,
    authToken: process.env.TURSO_AUTH_TOKEN,
  }
}

// For PostgreSQL
content: {
  database: {
    type: 'postgres',
    url: process.env.POSTGRES_URL,
  }
}

// For LibSQL/Turso
content: {
  database: {
    type: 'libsql',
    url: process.env.TURSO_DATABASE_URL,
    authToken: process.env.TURSO_AUTH_TOKEN,
  }
}

These options are detailed in the Configuration documentation. 4. Implement Document-Driven Mode If you're using a catch-all route to serve content, make sure you're implementing it efficiently:

<script lang="ts" setup>
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection('content').path(route.path).first()
})
</script>

<script lang="ts" setup>
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection('content').path(route.path).first()
})
</script>

This approach is recommended in the Migration documentation. Conclusion Before abandoning Nuxt Content, I'd recommend: 1. Debugging your database to ensure it's functioning correctly 2. Testing performance after the initial load (subsequent navigations should be faster) 3. Considering alternative database adapters if your deployment environment supports them If you continue to experience issues, you might want to check if there are any specific performance optimizations for NuxtHub deployments, as it's designed to work well with Nuxt Content:

"Nuxt Content module automatically enables NuxtHub database. And update database configuration to use Cloudflare D1 with DB binding name." NuxtHub Deployment

The GitHub issue you mentioned might be tracking ongoing performance improvements, so it's worth keeping an eye on it for updates. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

<@781217973053423616> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

lorenzofiamingoOP•4d ago

@kapa.ai My subsequent navigation are not faster, but equally slow. What can i do to speed up the load time?

kapa.ai•4d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand that your subsequent navigations are still slow, which is unexpected since Nuxt Content v3 should be using WASM SQLite in the browser for faster client-side navigation. Let me suggest some specific performance optimization strategies for your situation. Optimize Nuxt Content Performance 1. Reduce Payload Size One common issue with Nuxt applications is large payload sizes. The __NUXT__ payload can significantly impact performance:

"Performance is an evergreen topic! In my new series - 'Nuxt Performance In Depth', we will have a deep look into various perf topics. For the first video of the series, we check out the payload, also sometimes referred to as NUXT - and how to reduce it's size in your app!" Nuxt 3: Reduce the size of your payload and NUXT

Consider examining your payload size in the browser's network tab and look for ways to reduce it. 2. Implement Lazy Hydration Lazy hydration can significantly improve performance by delaying the hydration of components until they're needed:

<template>
  <div>
    <LazyMyComponent hydrate-on-visible />
  </div>
</template>

<template>
  <div>
    <LazyMyComponent hydrate-on-visible />
  </div>
</template>

This is particularly useful for content-heavy pages as explained in the Delayed Hydration documentation. 3. Pre-render Important Pages Since you're using NuxtHub with serverless deployment, pre-rendering can significantly improve performance:

"As each request trigger a fresh instance of your Nuxt server, the performance of your serverless application will be impacted if you don't pre-render some pages." Serverless Deployment

Add this to your nuxt.config.ts:

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/about': { prerender: true }
    // Add other important pages
  }
})

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/about': { prerender: true }
    // Add other important pages
  }
})

4. Optimize Database Queries Make sure your queries are as specific as possible. Instead of fetching all content and then filtering, use more targeted queries:

// Instead of this
const { data } = await useAsyncData('content', () => queryCollection('content').find())

// Use this
const { data } = await useAsyncData('page', () => 
  queryCollection('content')
    .where({ _path: '/your-path' })
    .only(['title', 'description', 'body']) // Only fetch needed fields
    .first()
)

// Instead of this
const { data } = await useAsyncData('content', () => queryCollection('content').find())

// Use this
const { data } = await useAsyncData('page', () => 
  queryCollection('content')
    .where({ _path: '/your-path' })
    .only(['title', 'description', 'body']) // Only fetch needed fields
    .first()
)

5. Check for Database Issues If your database is having integrity issues, it might be causing performance problems:

# Reset your database
rm -rf .data/content/contents.sqlite
npx nuxi cleanup
npx nuxi dev

# Reset your database
rm -rf .data/content/contents.sqlite
npx nuxi cleanup
npx nuxi dev

As mentioned in the Tools documentation, this will force a fresh database generation. 6. Consider Upgrading to Content v3 If you haven't already, consider upgrading to Nuxt Content v3, which has significant performance improvements:

"Content version 3 is out - introducing SQL based storage, collections, preview API for a better Studio integration and tons of performance improvements." Nuxt Content v3

The WASM SQLite in browser feature should make subsequent navigations faster, so if that's not happening, there might be an issue with your setup. If you've tried these optimizations and are still experiencing slow performance, you might want to consider reaching out to the Nuxt Content team directly or filing a detailed issue on GitHub with your specific setup and performance metrics. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

<@781217973053423616> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Nuxt Content is slow

Did you find this page helpful?