¿El frontend necesita servidor o solo un CDN? (Arquitectura desde cero)

OpenSource

Perdón si la pregunta es muy básica, pero llevo poco en esto del desarrollo web. Siempre he trabajado con proyectos que ya tenían todo montado, pero ahora quiero hacer un portafolio personal con React y me surge la duda: ¿necesito montar un servidor propio o puedo subir los archivos estáticos a un CDN y listo? He visto que algunos dicen que React necesita un servidor para el routing, pero otros suben el build a Netlify y funciona. ¿Cuál es la diferencia real? ¿Alguien me puede explicar la arquitectura básica sin humo?

Retro

Buena pregunta, y no es tan básica como crees. La clave está en si tu app necesita renderizado en servidor (SSR) o solo cliente. Si tu portafolio es estático (no tiene datos dinámicos por usuario), puedes subir el build a un CDN y listo. Pero si usas react-router con rutas tipo /proyecto/1, necesitas que el servidor redirija todas las rutas a tu index.html (SPA fallback). Netlify y Vercel lo hacen automáticamente, pero un CDN puro como CloudFront no por defecto.

Broadway

Exacto, y añado: no confundas 'servidor' con 'backend'. Un servidor web (Nginx, Apache) puede servir archivos estáticos, pero también puedes usar un hosting estático (GitHub Pages, Netlify) que actúa como CDN. La diferencia es que un CDN solo distribuye archivos, no ejecuta lógica. Para un portafolio, lo más simple es usar un generador estático (Astro, Next.js estático) y subirlo a cualquier CDN. Si necesitas algo dinámico, ya hablamos de funciones serverless.

Data

Perdón, pero creo que están complicando demasiado. Para un portafolio en React, lo único que necesitas es un servidor que sirva el index.html y los assets. Si usas BrowserRouter, sí necesitas el fallback, pero si usas HashRouter (con # en la URL) no necesitas nada especial. Claro, las URLs son más feas, pero para un proyecto personal sirve. Yo haría eso y lo subo a Netlify sin pensarlo.

OpenSource

Gracias por las respuestas. Entonces, si entiendo bien: para mi caso, con React y rutas simples, puedo usar HashRouter y subirlo a un CDN sin configurar nada. Pero si uso BrowserRouter, necesito que el servidor haga un redirect. ¿Eso es correcto? Me da miedo que luego en producción me salgan 404 al recargar una ruta.

Alt

Sí, correcto. Y para evitar el 404, en Netlify añades un archivo _redirects con /* /index.html 200. En Vercel, un vercel.json con rewrite. Pero si usas HashRouter, ni eso. Aunque te recomiendo que aprendas a configurar el redirect, porque es una habilidad fundamental. No te quedes en el atajo.

Surfing

Ojo, que también hay que considerar el rendimiento. Un CDN te da caché y latencia baja, pero si tu app es muy pesada, el primer render puede ser lento. Si te importa el SEO, igual necesitas SSR o prerenderizado. Pero para un portafolio, no te preocupes por eso ahora. Yo me centraría en aprender la diferencia entre estático y dinámico, y luego ya profundizarás.

Dance

No estoy de acuerdo con lo de que el SEO no importa. Si quieres que te encuentren, necesitas al menos prerenderizado. Pero bueno, para un portafolio personal quizás no sea crítico. Lo que sí me parece importante es que entiendas que 'servidor' no es solo un VPS. Puedes tener un backend en una función serverless y el frontend en un CDN. Arquitectura moderna: frontend estático + APIs serverless. Eso es lo que yo usaría.

OpenSource

Vale, me está quedando más claro. Creo que voy a probar con Netlify y el redirect, y de paso aprendo a configurarlo. Gracias a todos, en especial a los que me han dado ejemplos concretos. Cuando lo tenga montado, subo el resultado para que me den feedback.

Blockchain

Si vas a por Netlify, te recomiendo que configures los headers de caché para los assets estáticos (con hash en el nombre) y el archivo `_redirects` para el SPA fallback. Así matas dos pájaros: rendimiento y rutas limpias. Y si luego metes una API serverless, ya tienes la arquitectura completa sin servidor que mencionaban. Eso sí, no te olvides del prerenderizado si el SEO te preocupa de verdad; puedes usar plugins para generar los HTML estáticos en build time.