The BEST way to proxy your API in Nuxt
➡️ Proxying routes to your back-end or third party APIs is a common practice! Over the last two years, various strategies came up in Nuxt. But not all of them work equally will. To figure out which two strategies are the recommended ones, we have a look at the four most common strategies, their shortcomings and which ones I would recommend to use! Key points: ✅ How a successful proxy strategy looks like 🔢 All common strategies - From Vite's proxy to a Nitro proxy endpoint ‼️ Which strategies to use and how to implement them Links: 📺 Nuxt vs. Nitro: https://www.youtube.com/watch?v=DkvgJa-X31k 🔗 GH discussion around proxying: https://github.com/nuxt/nuxt/discussions/15907?sort=old 📺 Common runtimeConfig mistakes: https://www.youtube.com/watch?v=_FYV5WfiWvs 🔗 H3 JSDoc: https://www.jsdocs.io/package/h3 🔗 Code: https://github.com/manniL/alexander-lichter-proxy-nuxt Don't forget to hit that "Subscribe" button, ring the notification bell and give a thumbs up! 🌐 Connect further: Website: https://www.lichter.io Twitter/X: https://twitter.com/TheAlexLichter Twitch: https://www.twitch.tv/TheAlexLichter Chapters: 00:00 Intro 00:54 Discussion around proxying 01:30 Setup & demo app 02:57 Goals for our proxy solution 04:14 Strategy 1 - Vite's proxy 07:30 Strategy 2 - Nitro's devProxy 10:16 Strategy 3 - Proxy routeRule 13:30 Strategy 4 - Nitro proxy API endpoint 19:28 Summary and what to use
Summary
Cette vidéo traite de la mise en place d'un proxy pour accéder à une API backend dans une application Next.js. L'auteur présente plusieurs approches et explique pourquoi certaines ne fonctionnent pas, notamment lors du rendu côté serveur (SSR).
La première approche testée est d'utiliser l'option "proxy" de Vite, mais cela ne fonctionne pas avec le SSR. La deuxième approche utilise le proxy intégré à Nitro, mais rencontre également des problèmes avec le SSR car Nitro ne gère pas correctement les appels internes à l'API.
La solution finale et recommandée par l'auteur est d'utiliser les "route rules" de Nitro pour définir le proxy. Cela permet de gérer le proxy à la fois côté client et serveur. De plus, l'URL du proxy peut être configurée via les variables d'environnement, ce qui permet de la changer facilement sans avoir à recompiler l'application.
En résumé, la meilleure façon de mettre en place un proxy dans une application Next.js est d'utiliser les "route rules" de Nitro et de configurer l'URL du proxy via les variables d'environnement. Cette solution répond à tous les critères de l'auteur : fonctionner côté client, fonctionner avec le SSR, et permettre de changer facilement l'URL du proxy.