Nuxt Content page very slow even with .select() or queryCollectionNavigation()
Hey,
I’m using Nuxt Content and have around 26 large markdown files (about 4 MB each).
On my homepage, I only need a few fields like
id, word, path.
I tried using this:
and also
But my page is still very slow, and I see a big .sql.txt file being loaded on the first request.
Does anyone know how to make the page faster? I want to build a static page, so ideally no api end routes.
I just want to list my articles without loading all the big markdown files.
Thanks for any advice 🙏2 Replies
Hi @.fondazione. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Your experience is expected with Nuxt Content v3 when working with large markdown files: even if you use
When you use static site generation (
With Nuxt Content v3, the initial load will always include the full content database, regardless of how many fields you select in your queries. This is a trade-off of the new SQL-based architecture, and there is currently no documented way to avoid loading the full
.select() or queryCollectionNavigation() to fetch only a few fields, the initial load involves downloading a large .sql.txt file (the SQLite database dump). This is because Nuxt Content v3 uses a SQL-based storage system, and on the first client-side query, it downloads the entire content database to the browser and initializes a local SQLite database using WASM. All subsequent queries are then performed locally, which is fast, but the initial download can be large if your content is large—even if you only need a few fields for your homepage WASM SQLite in Browser.
Key points from the documentation:
- The database dump contains all your content, not just the fields you select. The .select() method only limits what is returned from the query, not what is downloaded to the browser.
- This architecture enables offline access and fast client-side navigation, but the trade-off is that the initial payload can be large if your content is large Advanced Database.
- This behavior is the same whether you use queryCollection or queryCollectionNavigation queryCollection, queryCollectionNavigation.
For static sites:When you use static site generation (
npx nuxi generate), Nuxt prerenders your pages and bundles the content database for client-side queries. The large .sql.txt file is still needed for client-side navigation and dynamic queries, so the initial download size remains large if your content is large Static Hosting.
Possible workarounds (based on current documentation):
- Reduce content size: If possible, split your large markdown files or remove unnecessary data.
- Limit client-side queries: For purely static sites, you could pre-render the homepage and avoid client-side queries for the article list, but this is not the default behavior with Nuxt Content v3.
- No documented way to generate a minimal database: The knowledge sources do not mention a way to generate a "partial" or "field-limited" database dump for the browser.
Summary:With Nuxt Content v3, the initial load will always include the full content database, regardless of how many fields you select in your queries. This is a trade-off of the new SQL-based architecture, and there is currently no documented way to avoid loading the full
.sql.txt file for client-side queries, even on static sites Advanced Database, Static Hosting.
If you need to avoid this, you may need to consider alternative approaches or wait for future optimizations from the Nuxt Content team.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@910553251949195276> Kapa.ai is still learning and improving, please let me know how I did by reacting below.