Componentes de Servidor con Bun

♪♪ ♪♪ ♪♪ Mi nombre es Jared, y soy el creador de Bun. Bun es un moderno entorno de ejecución de JavaScript todo en uno. Está diseñado para iniciar rápido porque tiene en mente la ventaja. Está diseñado para alcanzar nuevos niveles de rendimiento extendiendo el núcleo de JavaScript, el motor. Está diseñado para ser una gran y completa herramienta, lo que significa que combina un empaquetador, un transpilador, un gestor de paquetes y un entorno de ejecución.

Y el entorno de ejecución está diseñado para ser un reemplazo directo para Node.js. Bun instala paquetes NPM 20 veces más rápido, y lo que esto significa es, que está creando una nueva carpeta Node.Modules, y está justo en— esto está diseñado para ser compatible con Node.js, por lo que puedes usar bun install en aplicaciones Node.js sin usar el entorno de ejecución de bun. Bun run inicia scripts de package.json 30 veces más rápido, y gran parte de eso se debe a que tomamos código nativo realmente rápido, y lo usamos para analizar tu package.json y el resto, y en bun build— en bun v0.6, introdujimos bun build, que es un nuevo empaquetador de JavaScript y TypeScript.

Un bun build tiene soporte incorporado para componentes de servidor. Los componentes de servidor te permiten usar await de nivel superior y componentes de React que se ejecutan en el servidor. Y puedes usar RPC, donde eso te permite mezclar y combinar código del lado del servidor y código del lado del cliente, y llamará a esas funciones. Y a través de la división de código del compilador, hará solicitudes de red y ejecutará realmente fácilmente el código en el servidor sin tener toda una API. Desde la perspectiva de Bun, useServer es principalmente solo división de código. No hay React en esta transformación. Voy a mostrarles una rápida demostración de componentes de servidor en Bun. Así que voy a refrescar la página, y puedes ver justo ahí muy rápido, viste que decía esperando hijo, componente hijo acing, y lo que hizo eso.

Así que tenemos la suspensión de fallback. Estamos renderizando la función de mensaje del servidor, pasándola, esperando, y estamos llamando a sleep por una razón, un wait dentro de un componente. Como cualquier otro código de JavaScript, puedes hacer eso con componentes de servidor. Y este código se ejecuta en el servidor. Si miramos en la respuesta, podemos ver que no hay página para el servidor. No hay página que diga hola desde el servidor. Está realmente en la red. Si miramos aquí en esta cadena HTML, puedes ver justo ahí. Dice hola desde el servidor. Así que eso se está transmitiendo en el servidor. Y luego si volvemos, podemos llamar a funciones en el servidor. Llamamos a get server timer. Miramos en el botón, puedes ver que le estamos pasando la función de saludo. Y si miramos en la función de saludo, podemos ver que hay esta directiva use server.

La idea aquí es que esto crea un límite de code división de código donde funcs.ts solo se ejecuta en el servidor. Y da una anotación especial a estas funciones que te permite llamar a este code en el servidor.

Entonces, si miramos el botón, podemos ver desde la perspectiva del botón, que es un componente de cliente usado, solo se ejecuta en el cliente, podemos simplemente usar el nivel superior de espera y llamará a esta función, que está en el servidor desde el cliente. Y aún puedes use state y el resto de react dentro de estos componentes de cliente porque estos se ejecutan completamente en el cliente y no en el servidor.

Entonces, la idea aquí, básicamente, es que es una forma realmente fácil de hacer RPC con el cliente, lo que significa que te permite llamar a funciones en el servidor, llamar a funciones en el servidor desde el cliente. Si miramos el code que se genera aquí, y sí, esto es un poco desordenado. Hay un error estúpido que no he corregido en esto donde está añadiendo dos al final de los nombres de las variables, pero podemos ver que en realidad no hay React en ninguna de estas importaciones. Esto es React, pero eso es porque esto es de usar JSX, pero la parte de los componentes del servidor, que está justo aquí, no hay React en eso.

La forma en que esto funciona es si vamos a... ¿Creo que este es el archivo correcto? No, no es el archivo correcto. Si vamos a... No, no es ese. Este archivo. Podemos ver que estamos sobrescribiendo las importaciones utilizando la API de plugins de Bun para cargar desde un manifiesto generado en BunBuild para saber a qué se resuelven cada una de esas importaciones de cliente y servidor. Y entonces, como parte de BunBuild, generamos este manifiesto de componentes, y eso es una lista de todos los componentes de servidor y cliente empaquetados en una compilación. Y todo esto es algo que vamos a lanzar que es mejor. Lo que estás viendo ahora es una demostración muy en progreso. Esto no es code limpio. Vamos a tener un proyecto que tiene una aplicación de demostración mucho mejor que esta que está más cerca de algo que la gente podría usar realmente. Pero el resultado final es que puedes ejecutar code que renderiza de forma continua React o cualquier otra biblioteca con la integración correcta desde el servidor y mezclar y combinar el code del cliente en eso también. Y el resultado final es que obtienes menos JavaScript que envías al cliente. Porque puedes tener code donde solo serializa el resultado en lugar de serializar todo. Y creo que eso es realmente emocionante.