Problemas que resolví construyendo un portafolio con Astro, Svelte y React

¿Problemas?

Hace unos meses escuché sobre Astro y su capacidad de mezclar diferentes tecnologías en un solo proyecto. Eso me llevó a utilizar React y Svelte al mismo tiempo para mostrar mis habilidades en mi portafolio. Sin embargo, no todo fue tan sencillo como parecía.

Falta de Conocimiento en Astro

Uno de los primeros problemas a los que me enfrenté fue mi limitado conocimiento en Astro, por lo que tuve que aprender sobre la marcha. Afortunadamente, Astro es bastante fácil de aprender y su documentación es muy completa.

El Proceso de Instalación

Aunque la configuración de cualquier proyecto en cualquier tecnología puede ser tediosa, Astro simplifica las instalaciones con comandos muy sencillos.

Al final, me quedó un archivo de configuración muy limpio y ordenado, junto con otros archivos de configuración necesarios, como svelte.config.js. Aquí está mi archivo astro.config.mjs:

import { defineConfig } from "astro/config";
import mdx from "@astrojs/mdx";
import react from "@astrojs/react";
import svelte from "@astrojs/svelte";
import tailwind from "@astrojs/tailwind";
import vercel from "@astrojs/vercel/serverless";

export default defineConfig({
  integrations: [react(), svelte(), tailwind(), mdx()],
  output: "server",
  adapter: vercel(),
  i18n: {
    defaultLocale: "en",
    locales: ["en", "es"],
    routing: {
      prefixDefaultLocale: true,
    },
  },
});

Astro incluso incluye un adaptador para Vercel, que es el que estoy usando actualmente. Fue tan fácil como ejecutar un comando para tener mi proyecto listo y compatible con Vercel.

Integrando i18n con Astro

Astro ofrece una integración bastante amigable con i18n, pero me encontré con un pequeño obstáculo: olvidé por completo que mi proyecto estaba en modo server. Esto hizo que obtener los datos de cada idioma en Svelte y React fuera casi imposible.

El problema surgió porque tanto en Svelte como en React, necesitaba obtener la URL, y cualquiera podría pensar que simplemente apuntar a window.location.href sería suficiente, pero no lo es. La solución fue bastante sencilla: usar useEffect en React y onMount en Svelte para obtener la URL cuando el componente se carga.

Así que terminé con dos hooks, uno para React y otro para Svelte:

// usei18n.ts (React)
export const useI18n = (route?: TranslateArgs) => {
  const [i18text, setI18text] = useState<string>("");
  const [lang, setLang] = useState<string>("en");

  useEffect(() => {
    const currentURL = new URL(window.location.href);
    const language = getLangFromUrl(currentURL);
    setLang(language);
    if (!route) return;
    const t = useTranslations(language as TranslationsArgs);
    setI18text(t(route as TranslateArgs));
  }, [route]);

  if (!route) return [lang];
  return [i18text, lang];
};

// usei18nSvelte.ts (Svelte)
export function useI18n(route?: TranslateArgs) {
  const currentURL = new URL(window.location.href);
  const lang = getLangFromUrl(currentURL);
  if (!route) return [lang];
  const t = useTranslations(lang as TranslationsArgs);
  return [t(route as TranslateArgs), lang];
}

Conclusiones

En general, Astro es una herramienta bastante poderosa y amigable que nos permite mezclar tecnologías y mantener un proyecto limpio y ordenado.

Sin embargo, el dominio de diferentes tecnologías es obviamente independiente, pero si tienes los conocimientos necesarios, Astro es una herramienta que te permitirá hacer cosas increíbles.