How to SSR dynamic routes in Vue 3 without generating static HTML for every URL? #16048
|
I'm working on a Vue 3 app using Vue Router, Express, and @vue/server-renderer. Fixed public pages are already prerendered, but dynamic pages still rely on API calls inside mounted(), so their content isn't available when JavaScript is disabled. I have two cases: Blogs: /blog/:blogTitle/:blogId Company profiles: Around 70–80k URLs currently, potentially millions. My Express server already fetches blog data for SEO metadata, but the Vue component fetches the content separately. What's the best way to render these dynamic pages as HTML on the server while keeping Vue interactivity? Can I reuse my existing SSR setup without generating static HTML for every URL? I want my content to be visible when js is disabled. |
Replies: 1 comment 1 reply
|
yes, you can reuse your express + vue ssr setup. render the requested url when the request arrives, rather than generating a file for every possible url your express handler already fetches the blog data for metadata, so i'd pass that same result into the vue page. for each dynamic-page request:
the content is there without js; interactivity needs js. you can keep prerendering the fixed pages, though ssr server load and caching still need planning |
yes, you can reuse your express + vue ssr setup. render the requested url when the request arrives, rather than generating a file for every possible url
your express handler already fetches the blog data for metadata, so i'd pass that same result into the vue page.
mounted()doesn't run during ssr, which leaves that client-fetched content out of the server htmlfor each dynamic-page request:
createMemoryHistory()on the server, install the router, thenawait router.push(req.originalUrl)andawait router.isReady()