Allow separate providers for SSR and client (`provider: { server, client }`)
Assessment
- Difficulty
- 5/5
- Estimated time
- Over a week
- Newbie friendliness
- 45/100
- Issue type
- Feature
- Clarity
- Mostly clear
- Activity status
- Active
- Tech stack
- nuxt, typescript
- Domain
- full-stack
Research direction
Start with the linked reproduction and trace how the icon.provider option selects SSR and browser providers. Compare the server-bundle SSR path with the Iconify CDN client path, then verify that provider: { server, client } keeps SSR network-free while client-rendered icons use iconifyApiEndpoint.
Written by the indexing model from the issue text.
Description
Describe the feature
icon.provider is one value that controls two independent decisions: where SSR gets icon data, and where the browser gets it. I'd like to be able to set them separately:
export default defineNuxtConfig({
icon: {
provider: { server: 'server', client: 'iconify' },
iconifyApiEndpoint: 'https://icons.example.com', // self-hosted Iconify API / CDN
serverBundle: { collections: ['lucide', 'mdi'] },
},
})
SSR renders from the server bundle, with no network access and a deterministic result. The browser fetches icons that are first rendered on the client directly from the CDN, not from /api/_nuxt_icon on the Nuxt instances.
Motivation
We run a self-hosted Iconify API behind a CDN. We want:
- SSR: icons come from the server bundle. There is no outbound request during render, and a slow or unavailable CDN can't affect SSR.
- Browser: icons come from the CDN. Client icon traffic stays off the Nuxt instances.
With a single provider you can only get one of these at a time.
Current behavior
Reproduction: https://github.com/pont1s/nuxt-icon-ssr-and-browser-different-providers
provider: 'server' |
provider: 'iconify' |
|
|---|---|---|
Server bundle in .output/server |
lucide, mdi | none (silently disabled, no warning) |
| Outbound requests during SSR | 0 | GET https://api.iconify.design/lucide.json?icons=house, .../mdi.json?icons=github |
GET /api/_nuxt_icon/lucide.json?icons=house |
200 | 404 |
| Browser, client-rendered icons | GET /api/_nuxt_icon/lucide.json?icons=rocket, /api/_nuxt_icon/mdi.json?icons=heart, ... |
GET https://api.iconify.design/lucide.json?icons=rocket, .../mdi.json?icons=heart, ... |
In iconify mode, SSR makes the outbound request only the first time each instance renders a given icon, because @iconify/vue memoizes loaded icons. Every cold instance still depends on the CDN during render.
What we want is the SSR column of 'server' combined with the browser row of 'iconify', and no current option produces that.
Additional information
- Would you be willing to help implement this feature?
- Dominant language
- TypeScript
- Stars
- 1.2k
- Forks
- 97
- PR merge metrics
- No merged PRs in 30d
Getting set up
- No Dockerfile or Docker Compose file
- No pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from nuxt/icon
-
Difficulty 2/5 1-3 hours Newbie friendliness 55/100
-
Difficulty 3/5 1-2 days Newbie friendliness 65/100
-
Remote server bundle duplicates concurrent collection downloadsPossibly taken @onmax claimed this 47 days ago. Open
Difficulty 3/5 1-2 days Newbie friendliness 68/100
-
Difficulty 3/5 1-2 days Newbie friendliness 42/100
-
Difficulty 4/5 3-5 days Newbie friendliness 45/100
Similar issues
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
endora-commerce/endora-commerce#397 ·
Maintainers usually reply within 1 day
-
level/task
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
wazuh/wazuh-dashboard-plugins#9472 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 63/100
Maintainers usually reply within 1 day
-
ready-for-agent
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
xavxyz/bei-shan-lin-shui#57 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
opennextjs/opennextjs-cloudflare#1461 ·
Maintainers usually reply within 1 day