React Router Framework llega con tres diferentes estrategias para crear aplicaciones React. 3️⃣

Mientras que otros frameworks te quieren forzar a trabajar de una sola manera, React Router te deja elegir a ti mismo. Si no lo sabes, la comunidad front end se está resistiendo, arduamente, a migrarse por completo al servidor. A la mayoría le gusta más trabajar en el cliente; ya sea porque les da miedo el servidor o porque prefieren ofrecer una experiencia instantánea para sus usuarios. React Router lo sabe y por eso no nos obliga a trabajar a huevo en el servidor. Podemos escoger una de sus tres estrategias, o mejor aún: ¡podemos combinarlas! 🏳️‍🌈

1. Client Side Rendering

¿No quieres saber nada del servidor? Venga, apaguemos el ssr en el archivo de configuración, pues.

// react-router.config.ts

export default {
  ssr: false, // ¡SPA a la orden!
}

Así nomás con esto, ahora todas tus rutas se renderizarán solo en el navegador, como en los viejos tiempos de React. 📟

👀 Ten en cuenta que si optamos por apagar el SSR: ya no podremos exportar la función loader o action.

2. Server Side Rendering

Bueno, pero, si tu no estás tan aferrado a lo de siempre 🙊 y prefieres explotar todas las capacidades de tu servidor web, además de hacerle caso al dictador de React que dice que todos nos debemos mudar al servidor, pues entonces, el server side rendering es para ti. ✡️

// react-router.config.ts

export default {
  ssr: true, // ¡Sevidor listo!
}

Esta es ahora la estrategia por default de React Router. Lo mejor de esta estrategia de renderizado es, que aún podemos seleccionar rutas específicas para que sean estáticas. Lo veremos en un momento.

👀 No te olvides de las funciones clientLoader y clientAction. Con este par de funciones siempre podremos optar por trabajar solo en el cliente, aunque tengamos encendido el ssr. 😳

3. Static pre-rendering

Y llegamos a lo más hot. 👙🥵 Con esta estrategia: las razones para usar Astro se van desvaneciendo poco a poco… 😶‍🌫️ 

La estrategia de pre-renderizado estático es una operación que sucede al crear el build de producción. ✅

Esta estrategia genera archivos HTML para todas las rutas de nuestra aplicación, si está encendida prerender:true o para las rutas específicas que son parte del array.

// react-router.config.ts

export default {
  // Esto generara archivos HTML estáticos en "build time"
  prerender:true
}

// react-router.config.ts

export default {
  // Esto generara archivos HTML estáticos en "build time"
  async prerender() {
    return ["/", "/contacto", "/terms"];
  },
}

Esto es maravilloso para el SEO y para la hiper-velocidad en la entrega de las rutas de nuestra app. ¿Bajar solo un archivo HTML en cuanto se hace una petición GET? fuck yeah!. 😎 Recuerda que los datos que cargue el loader de cada ruta, se incluirá en el HTML. Puedes ver más sobre esto que te digo en el video sobre la carga de datos de este curso. 📺

¡Pues ya está! Bienvenido(a) al futuro híbrido de la web. 🛸

bliss.