Transformación de Aplicaciones React a Server-Side Rendering

¿Qué es ElixEye y cómo funciona?

ElixEye es una aplicación que ofrece la fascinante experiencia de interactuar con la API de la NASA para mostrar imágenes de galaxias. Esta aplicación ha sido construida con un stack tecnológico interesante que incluye TypeScript, React, Styled Components, y Webpack.

¿Cómo está estructurado el stack de ElixEye?

ElixEye utiliza varias tecnologías modernas para su desarrollo:

• TypeScript: Se usa para manejar los componentes de React, garantizando mayor robustez y seguridad en el código al definir tipos.
• Styled Components: Permite manejar estilos de manera elegante usando CSS en Javascript, facilitando la creación de componentes dinámicos.
• Webpack: Se encarga de crear el servidor de desarrollo y empaquetar los archivos del proyecto para que sean entendidos por el navegador.
• Express: Un servidor pequeño que sirve para publicar la aplicación y sobre el cual se basará el futuro server-side rendering.

¿Cómo se consume la API de la NASA?

ElixEye utiliza la API NASA Image and Video Library para obtener datos sobre galaxias. La API devuelve un objeto con varios detalles, como el título, ID de NASA, keywords, y tipo de asset (imagen, video, audio).

function fetchGalaxies() {
    return fetch('https://images-api.nasa.gov/search?q=galaxies')
        .then(response => response.json())
        .then(data => data.collection.items);
}

Este código realiza una solicitud a la API de la NASA y retorna un objeto JSON con los elementos solicitados.

¿Cómo correr la aplicación?

La aplicación puede ejecutarse en modo desarrollo de manera sencilla utilizando Yarn o NPM. Aquí cómo hacerlo:

• Para instalar dependencias con Yarn: yarn
• Para correr el servidor de desarrollo: yarn dev

En caso de querer hacerlo con NPM:

• Instalar dependencias: npm install
• Correr en modo desarrollo: npm run dev

¿Qué aporta TypeScript al desarrollo?

Una de las grandes ventajas de TypeScript en ElixEye es su capacidad para identificar errores antes de que lleguen a producción, permitiendo una depuración más sencilla. TypeScript amplía JavaScript al ofrecer un sistema de tipos opcionales.

interface User {
    name: string;
    age: number;
}

const user: User = { name: 'John', age: 30 };
console.log(user.name);

En este ejemplo, TypeScript ayudará a asegurar que el objeto user cumpla con la estructura definida por la interfaz User.

¿Cuáles son las particularidades de los Styled Components?

Styled Components ofrece la posibilidad de definir estilos dentro de los propios componentes de React usando template literals. Esto lo hace especialmente atractivo para proyectos orientados a server-side rendering.

const StyledButton = styled.button`
  background-color: blue;
  color: white;
  padding: 10px;
`;

<StyledButton>Click Me!</StyledButton>

¿Cómo transformaremos ElixEye de client-side a server-side rendering?

La transición planeada para ElixEye es emocionante: convertir una aplicación de client-side render a server-side render. Esto implica reestructurar cómo la aplicación procesa y entrega las páginas al usuario, asegurando una mayor velocidad y optimización en la renderización inicial. ¿Te entusiasma seguir aprendiendo sobre esta transformación? ¡No te pierdas las siguientes lecciones!