Una mirada a Remix y las diferencias con Next.js

 

 

 

  • Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX

  • Índice
    1. ¿Qué es Remezcla?
    2. Características principales de la remezcla
    3. ¿Cuáles son las diferencias entre Remix y Next.js?
      1. Basado en reaccionar
      2. Representación del lado del servidor
      3. Generación de sitios estáticos
      4. Obsoleto mientras se revalida
      5. Navegación del lado del cliente
      6. Borde primero
      7. Código del lado del servidor
      8. Dependencia de Node.js
    4. Conclusión
      1. Lecturas adicionales sobre la revista Smashing

    Hablemos de Remix, el marco para crear proyectos JavaScript utilizando renderizado del lado del servidor. Repasemos sus principales características y conceptos y veamos las similitudes y diferencias con Next.js. Remix se convirtió en código abierto no hace mucho y tiene un futuro prometedor. Veamos cómo evoluciona, qué características se agregan, qué proyectos relacionados se crean para mejorar la experiencia del desarrollador y qué otros escenarios intenta resolver.

     

    En la comunidad de desarrolladores, es muy común ver aparecer cada día nuevos frameworks y herramientas. Algunos de ellos ofrecen un enfoque diferente para resolver escenarios que actualmente se están resolviendo con otras herramientas. Otros aportan un nuevo concepto o idea, proponiendo una forma diferente de afrontar los proyectos. Como el carpintero tiene diferentes herramientas para realizar diferentes tareas, los desarrolladores tienen muchos marcos y bibliotecas disponibles que se adaptan bien a diferentes casos de uso.

    Hablemos de Remix, el (tipo de) nuevo marco para crear proyectos JavaScript utilizando renderizado del lado del servidor. Repasemos sus características y conceptos principales y veamos las similitudes y diferencias con otro marco de JavaScript popular: Next.js.

    ¿Qué es Remezcla?

    Según su sitio web oficial , Remix es un marco de pila completo de vanguardia que permite a los desarrolladores crear excelentes experiencias de usuario centrándose en los estándares web. Con él, puede crear su aplicación web usando React y JavaScript tanto para la representación del lado del cliente como para la representación del lado del servidor.

    Como está construido sobre la API Web Fetch, las aplicaciones creadas con Remix pueden ejecutarse en cualquier lugar. Remix utiliza la representación del lado del servidor para manipular los datos y representar el contenido HTML en el servidor, enviando la menor cantidad de JavaScript posible al cliente.

    Remix era originalmente un marco premium basado en suscripción pero, hace menos de un año, se lanzó como un marco de código abierto. Después de esto, la comunidad de desarrolladores y usuarios de Remix comenzó a crecer y hacerse más popular.

    Características principales de la remezcla

    Destaquemos algunas de las características principales proporcionadas por Remix:

    • Rutas:
      al igual que otros frameworks, Remix permite a los desarrolladores gestionar las diferentes rutas de sus proyectos web utilizando archivos JavaScript/TypeScript que contienen funciones de controlador. Podemos generar rutas en nuestro sitio web creando archivos que siguen la jerarquía del sistema de archivos de nuestros proyectos, creando URL analógicas para nuestras páginas. Las rutas Remix funcionan utilizando la función de enrutamiento parcial proporcionada por React-Router . Con este enfoque en mente, podemos destacar los siguientes beneficios.

    • Componentes anidados:
      Remix te brinda la posibilidad de administrar páginas y componentes anidados. Podemos crear un archivo para manejar una determinada ruta y, en el mismo nivel del sistema de archivos, una carpeta con el mismo nombre. Todos los archivos que creemos dentro de esa carpeta serán componentes anidados de la ruta principal, en lugar de páginas diferentes.

    • Manejo de errores:
      los componentes anidados aportan otro beneficio: si se produce un error al representar un determinado componente, no afecta a las otras partes anidadas de la página. Entonces, podemos encapsular el error solo en la sección donde ocurrió, en lugar de obtener un error de página general.

    • Formularios : como Remix se centra en los estándares
      web, utiliza métodos nativos ( POST,,, ) para manejar formularios en lugar de usar JavaScript para eso.PUTDELETEPATCH

    • Cargadores y acciones:
      Remix proporciona dos tipos diferentes de funciones para crear contenido dinámico del lado del servidor. Las loaderfunciones se utilizan para manejar GETsolicitudes HTTP en el servidor, principalmente para obtener datos de diferentes fuentes. Las actionfunciones monitorean POST, PUT, DELETEy PATCHsolicitudes, enfocadas a la manipulación y modificación de datos.

       

    Ahora que hablamos de algunas de las características principales de Remix, comparémoslo con uno de los frameworks React más populares y utilizados hoy en día: Next.js.

    ¿Cuáles son las diferencias entre Remix y Next.js?

    Si echamos un vistazo rápido, puede parecer que Next.js y Remix persiguen el mismo objetivo y, probablemente, lo hagan. Pero si analizamos las características y enfoques que ofrecen, identificaremos similitudes y diferencias, y podremos pensar en escenarios que se resuelven de forma más adecuada con uno de los frameworks más que con el otro.

    Basado en reaccionar

    Ambos marcos se crearon sobre React, pero Remix intenta desacoplarse de él. Podemos ver que Remix proporciona niveles más altos de abstracción. Además, diferentes miembros de la comunidad Remix han estado trabajando en diferentes implementaciones utilizando otros marcos , como Vue.js, Angular y Svelte. Next.js depende de React y no hay ningún plan para cambiar esto por el momento.

    Representación del lado del servidor

    Además de las características que mencionamos anteriormente, podemos ver que tanto Remix como Next.js ofrecen renderizado del lado del servidor (SSR) para generar el marcado y el contenido de nuestras páginas desde el servidor web antes de enviarlo al cliente. Korean Beauty

    Tanto Next.js como Remix usan React, por lo que pueden confiar en funciones como la hidratación del lado del cliente. Por otro lado, ambos marcos también admiten la representación previa de HTML desde el servidor. Dependiendo del proyecto en el que estemos trabajando, es posible que queramos generar la mayor cantidad de contenido posible en el lado del servidor, evitando enviar código JavaScript y obtener datos del cliente.

    Generación de sitios estáticos

    Por otro lado, Next.js ofrece la posibilidad de pregenerar páginas y contenidos estáticos en el momento de la compilación, utilizando la generación de sitios estáticos (SSG), mientras que Remix no lo hace. Dependiendo del tipo de páginas que queramos crear, esta característica es algo que podría aportar grandes beneficios. Con SSG podemos recuperar datos y renderizar páginas en el momento de la construcción, teniendo páginas estáticas antes de que los usuarios visiten nuestro sitio web, sin tener que esperar a que se genere el contenido.

     

    Pero SSG también podría volverse problemático: cada vez que aplicamos cambios al código o al contenido de nuestra aplicación, debemos esperar a que un proceso de compilación genere la nueva versión de los activos estáticos. Esto podría convertirse en un problema, ya que el tiempo de construcción aumentará si nuestro proyecto se hace cada vez más grande. Para manejar este problema, el equipo de Next.js desarrolló una función llamada Regeneración estática incremental (ISR) y el nuevo ISR bajo demanda .

    Obsoleto mientras se revalida

    Para ofrecer contenido lo más rápido posible, Remix se basa en la directiva de almacenamiento en caché obsoleta mientras se revalida (SWR). En lugar de generar previamente contenido estático, prepara el caché cuando la aplicación recibe tráfico. Las páginas y documentos se sirven desde el caché, mientras se revalidan en segundo plano para el siguiente visitante.

    Next.js también ofrece la posibilidad de trabajar con obsoleto mientras se revalida. Dentro de la getServerSidePropsfunción, puede utilizar encabezados de control de caché obsoletos mientras se revalida .

    Una de las funciones utilizadas por Next.js para ofrecer una navegación fluida a los usuarios es la captación previa . Podemos usar el Linkcomponente para hacer que nuestro sitio web precargue la página a la que linkredirige cuando el elemento aparece en la ventana gráfica. Si visitamos la página de inicio de un sitio web y vemos un enlace de "Contacto" en la página, Next.js descargará y recuperará el contenido relacionado con la página de contacto. Entonces, cuando hacemos clic en el enlace, no tenemos que esperar a que se descargue la página.

    Pero hay una limitación: el Link​componente solo ofrece búsqueda previa de páginas que se crearon previamente mediante generación de sitios estáticos (SSG). Si tenemos enlaces a páginas que se generan dinámicamente, la función no se activará.

    Remix usa la etiqueta HTML link rel="prefetch"​(en lugar de un caché como Link​el componente Next.js), por lo que podemos precargar no solo los enlaces, sino también cualquier página. En el caso de que queramos implementar algo similar usando Next.js, es posible usar el next/headcomponente​ y agregar la prefetchetiqueta​.

    Borde primero

    Cuando recuperamos datos y representamos contenido del servidor, también tenemos que evaluar qué tan lejos está el servidor que ejecuta el código de los usuarios que envían las solicitudes HTTP. Si mi servidor principal está ubicado en Brasil y un usuario visita mi sitio web desde China, el proceso de carga de la página será más lento que el mío si visito la misma página desde Argentina. Esto está relacionado con la distancia geográfica que debe recorrer la solicitud HTTP hasta el servidor más cercano que la evalúa y ejecuta el código.

    Aunque las aplicaciones modernas dependen de CDN para entregar contenido estático, el código del lado del servidor que se procesa para generar contenido dinámico generalmente se ejecuta en el centro de datos, ejecutándose en una ubicación particular. Una solución alternativa a este escenario sería utilizar la directiva de almacenamiento en caché SWR, con la advertencia de que eventualmente se entregará contenido obsoleto mientras la CDN actualiza el recurso.

     

    Teniendo en cuenta esta problemática, en los últimos años se originó un nuevo concepto: el Edge Computing. La idea es seguir el mismo enfoque utilizado por las CDN, replicando la lógica del servidor en diferentes servidores y ubicaciones, ejecutando el código dinámico lo más cerca posible del usuario. Si bien Remix se define como "Edge First", lo que significa que se pensaba que el marco se ejecutaba en Edge desde su concepción, Vercel lanzó Edge Functions como una característica adicional para la aplicación implementada en la plataforma.

    Código del lado del servidor

    Al describir las características principales de Remix, dijimos que el marco utiliza métodos HTTP nativos para administrar formularios con la ayuda de actiony loaderfunciones. Un formulario, un servidor, una POSTsolicitud que transporta los datos serializados del formulario al servidor, una acción del lado del servidor, una nueva página como resultado de nuestra solicitud. Volver a los estándares web.

    Remix proporciona el Formelemento, una versión optimizada del formulario HTML. Con él y las actionfunciones podremos tener el código de cliente y el código de servidor relacionados con nuestras rutas en un mismo archivo. Remix sabrá cómo gestionar la interfaz de usuario de nuestras páginas y el comportamiento del lado del servidor asociado a las solicitudes. Sin contexto, sin gestión estatal.

    Next.js, por otro lado, se basa en código JavaScript para saber gestionar el estado de la aplicación, a qué API llaman, revalidar datos y actualizar la interfaz de la página web. Usando API Routes , podemos tener archivos separados que ejecutan la funcionalidad del lado del servidor y devuelven datos a nuestra interfaz.

    Como decíamos, y como podéis ver, Remix tiene una forma de mutar los datos que intenta volver a lo básico, recordando aquellos días en los que PHP era lo grande.

    Dependencia de Node.js

    Como dijimos antes, Remix se basa en la API Web Fetch, en lugar de depender de Node.js. Eso nos da la posibilidad de ejecutar aplicaciones Remix no sólo sobre servidores Node.js (como Vercel o Netlify), sino también en otro tipo de plataformas (como Cloudflare Workers o el nuevo Deno Deploy).

    Con la última versión de Next.js, 12.2 , ahora puede seleccionar Edge Runtime para todo su proyecto Next.js, en lugar de usar el tiempo de ejecución predeterminado de Node.js.

    Conclusión

    Remix se convirtió en código abierto no hace mucho, pero ya cuenta con una comunidad muy activa colaborando y creando proyectos siguiendo los estándares web. El marco tiene un futuro prometedor. Veamos cómo evoluciona, qué características se agregan, qué proyectos relacionados se crean para mejorar la experiencia del desarrollador y qué otros escenarios intenta resolver.

    Lecturas adicionales sobre la revista Smashing

    • “ Rutas de remezclas desmitificadas ”, Átila Fassina
    • “ Obtención dinámica de datos en una aplicación Next.js autenticada ”, Caleb Olojo
    • “ Cómo mantener una aplicación Next.js de gran tamaño ”, Nirmalya Ghosh
    • “ Localización de su aplicación Next.js ”, Átila Fassina

    (NL, IL)Explora más en

    • Aplicaciones
    • Marcos
    • Siguiente.js
    • javascript





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Una mirada a Remix y las diferencias con Next.js

    Una mirada a Remix y las diferencias con Next.js

    ¿Qué es Remezcla?Características principales de la remezcla¿Cuáles son las diferencias entre Remix y Next.js?ConclusiónPatrones de diseño de interfaces

    programar

    es

    https://pseint.es/static/images/programar-una-mirada-a-remix-y-las-diferencias-con-next-1149-0.jpg

    2024-06-18

     

    Una mirada a Remix y las diferencias con Next.js
    Una mirada a Remix y las diferencias con Next.js

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Update cookies preferences