Renderizado del lado del servidor utilizando WebAssembly

Lo primero de lo que hablaremos es cómo logramos el renderizado en el lado del servidor. Ahora, las formas tradicionales son o bien, digamos, utilizar un framework React como NestJs que admite el renderizado en el lado del servidor de forma nativa, o, si eres uno de esos ingenieros que desean configurar el renderizado en el lado del servidor manualmente, podrías crear una nueva tienda Redux en cada solicitud que se envía y luego obtener estos datos de la tienda y realizar el renderizado en el lado del servidor, o otra forma alternativa también es configurar un servidor Express que se puede utilizar para servir el contenido del directorio de compilación como archivos estáticos a tu frontend.

Entonces, primero, antes de pasar a cómo puedes lograr el renderizado en el lado del servidor con WebAssembly, hablemos un poco más sobre WebAssembly. WebAssembly es un lenguaje que no está relacionado directamente con la web ni con el lenguaje ensamblador en sí. Lo que realmente es, es un bytecode eficiente, de bajo nivel y altamente eficiente y una compilación portátil, segura y agnóstica del lenguaje. Esto significa que básicamente puedes tomar cualquiera de tus lenguajes de programación de alto rendimiento como C++, o incluso lenguajes de script como Python o Go, y compilarlo en un bytecode de WebAssembly que se puede utilizar directamente. Ahora, ¿por qué se ha vuelto tan popular es que básicamente puede reducir algunas de las desventajas que tenemos en términos de rendimiento, especialmente con JavaScript. Y puede superar esas limitaciones de rendimiento utilizando lenguajes de programación más eficientes como C++ o Rust, y convirtiéndolos en WebAssembly, y luego ejecutándolos en el navegador junto con JavaScript. Y ahora WebAssembly no se limita solo al frontend o al navegador, y encuentra muchos casos de uso diferentes en aplicaciones en el lado del servidor y en la nube también.

Y ¿qué es Wasmage? Wasmage es un tiempo de ejecución ligero de WebAssembly que se enfoca principalmente en construir muchas aplicaciones nativas de la nube y basadas en el borde, y actualmente Wasmage es un CNC, que es el proyecto Sandbox de la Cloud Native Computing Foundation. Entonces, la pregunta es, ¿cómo se puede utilizar WebAssembly para implementar el renderizado en el lado del servidor? Entonces, Wasmage, como mencionamos, es el tiempo de ejecución para WebAssembly, especialmente para dispositivos en el borde. El tiempo de ejecución SDK de JavaScript de Wasmage proporciona un contenedor ligero y de alto rendimiento, que puede ejecutar tanto funciones de servidor JavaScript como también funciones de servidor React en servidores de borde. Entonces, digamos que tienes recursos muy limitados y muy poca potencia de cálculo, entonces puedes ejecutar estos contenedores ligeros de WebAssembly en aplicaciones en el borde y aún así poder tener funciones de alto rendimiento que se ejecutan de manera muy fluida. Y el motor Wasmage Quick JS, que Quick JS es básicamente muy similar a cómo funcionan las funciones de V8, es un motor JavaScript, y el motor Wasmage Quick JS es capaz de renderizar componentes de aplicaciones React en el lado del servidor y luego enviar ese HTML renderizado como una cadena al navegador. Y admite principalmente tanto el renderizado del lado estático como el renderizado en streaming que se proporciona desde el lado del servidor. Pero la pregunta más importante es ¿por qué deberíamos usar WebAssembly en primer lugar para implementar el renderizado en el lado del servidor? Porque ya tenemos frameworks tan populares como Next.js y también puedes configurarlo manualmente con Node.js. Principalmente hay dos razones diferentes que me gustaría señalar por qué es útil WebAssembly. Ahora, en comparación con el enfoque estándar en el que se ejecuta V8, utiliza Node.js y un entorno basado en Linux. Wasmage y especialmente WebAssembly tienen una huella mucho más pequeña en términos del tamaño total y de cuán rápido puedes iniciar un contenedor basado en WebAssembly. Entonces, en términos de rendimiento, es mucho más rápido y especialmente cuando estás trabajando con recursos muy limitados en una aplicación en el borde o en un dispositivo en el borde. Y esto ayuda con tiempos de carga mejorados y ganancias de rendimiento, especialmente si estás ejecutando tus aplicaciones en el borde. Y en segundo lugar, Wasmage también proporciona aislamiento y protección debido a cómo WebAssembly gestiona la memoria al proporcionar una capa de sandbox alrededor de cualquier aplicación que estés utilizando con WebAssembly. Esto significa que la implementación de Wasmage para el renderizado en el lado del servidor es capaz de ejecutar cualquier código que se ejecute en ese entorno de sandbox que es el mecanismo fundamental de cómo funciona WebAssembly. Y ese es uno de los mayores beneficios en términos de rendimiento y también en términos de privacidad.

Lo primero que debes hacer es instalar algunas de las dependencias. Esto incluye instalar un lenguaje de programación, que es Rust porque básicamente compilaremos el código de Rust en un Wasm, que es un ejecutable de WebAssembly. Luego también usaremos Wasi, Wasi es la interfaz del sistema de WebAssembly que te permite interactuar básicamente con el lado del servidor y los componentes de red de tu computadora. Y luego también instalaremos Wasm Edge, que es el tiempo de ejecución para WebAssembly, el CLI para eso, y también el kit de herramientas Quake.js Wasm Edge. Hemos proporcionado esos enlaces en las diapositivas. Puedes revisarlos e instalarlos por separado.

Una vez que hayas hecho eso, simplemente procederemos a instalar una aplicación React muy simple utilizando nbx-create-react-app. Y ahora llegamos al paso más importante, que es convertir nuestro código en renderizado en el lado del servidor. Básicamente, lo que haremos principalmente es utilizar el contenedor Wasm Edge, que podrá ejecutar nuestro código de renderizado en el lado del servidor y también ejecutar nuestro React JavaScript. Entonces, primero, creemos un nuevo directorio que se llamará server, y dentro de ese directorio, crearemos un nuevo archivo, index.js. Ahora puedes llenar ese contenido del archivo index.js yendo a este archivo que he creado, y encontrarás ese código aquí. Básicamente, simplemente ejecuta una aplicación Node.js, y esto también es capaz de... También tiene algunos componentes relacionados con WebAssembly, donde básicamente estamos renderizando el servidor real, básicamente el código de React.js dentro de nuestro backend de Node. Te recomendaría que revises esta base de código en particular, y una vez que hayas hecho eso, una vez que hayas agregado este código en particular a tu archivo index.js, entonces procederemos. Pero esto responderá qué está sucediendo detrás de escena.

Básicamente, el servidor que estamos creando ahora, que es el servidor de Node, básicamente está renderizando el componente de la aplicación, y en lugar de enviar este componente de la aplicación al frontend, lo que estamos haciendo es enviar HTML renderizado de vuelta al navegador. Principalmente, si vemos eso en casos estándar con React, la cadena renderizada del servidor de React DOM se usa típicamente para renderizar la aplicación a una cadena HTML. Y básicamente eso es lo que estamos enviando a nuestro navegador en este caso. Entonces, básicamente ahora, lo que estamos haciendo es que el contenido de la aplicación se está inyectando en el elemento dev con un ID de enrutador y ahora se está enviando de vuelta como una respuesta HTTP al navegador web.

Ahora, una vez que hayas creado ese archivo index.html, el archivo index.js, procederemos a construir e implementar nuestra aplicación con la ayuda de rollup.js. Nuevamente, hemos proporcionado un archivo de configuración para rollup en caso de que estés interesado en usarlo. Nuevamente, eso se proporciona en el segundo gist, que está aquí, que es el rollup.config.js. Esto es responsable no solo de construir, sino también de implementar el código del lado del servidor que hemos creado dentro del archivo index.js. Entonces, una vez que implementemos nuestro código con la ayuda de rollup.js, las últimas cosas que quedan son, en primer lugar, agregar algunos de los paquetes dependientes en nuestro archivo package.json. Estos están principalmente relacionados con el paquete rollup que acabamos de instalar en nuestra diapositiva anterior. Y lo último que tenemos que hacer es actualizar nuestra sección de scripts. Esto se utiliza principalmente para poder ejecutar el servidor Wasmic desde la CLI de Wasmic que nos ayudará a tomar nuestro código REST y convertirlo en el bytecode de WebAssembly. Y luego, en realidad, esto servirá para también tomar tu código QuickJS, que también invoca a webpack y al archivo de configuración.

Y esto ayudará a resolver nuestra salida de compilación y así lo hace nuestro front-end. Y finalmente, simplemente procederemos a ejecutar los siguientes comandos para primero construir nuestra aplicación y luego renderizar la cadena HTML en el navegador.

Y finalmente, antes de ver qué es exactamente lo que sucede o cuál es la salida, examinemos cuál es el cambio real en la aplicación antes y después de habilitar el renderizado en el lado del servidor con la ayuda de WebAssembly.

Anteriormente, la fuente HTML simplemente mostraba la plantilla con los marcadores de posición de renderizado en el lado del servidor. Pero ahora, una vez que la función de renderizado en el lado del servidor se está ejecutando en el servidor y estamos obteniendo nuestro HTML, el flujo de HTML generado desde el servidor y lo estamos renderizando en un navegador, puedes ver que en la esquina inferior, lo que puedes ver es que ahora también obtenemos esta ruta de datos de React. Ahora, esto es lo que se obtiene de nuestro servidor que está renderizando nuestros archivos estáticos, y eso es lo que se está renderizando ahora en el navegador. Y así es como básicamente comenzarás a verlo en acción en vivo, una vez que comiences a renderizarlo.

Entonces, ¿qué más hay en términos de soporte para el renderizado en el lado del servidor con WebAssembly? Hay soporte actual para React 18, que es la última versión de React, y también puedes crear aplicaciones de transmisión debido a la funcionalidad que viene con WebAssembly. Te permite crear aplicaciones de transmisión debido a la forma en que WebAssembly se carga en el navegador. En lugar de, digamos, un archivo JSON estático, el bytecode de WebAssembly básicamente se carga de manera continua y se carga en el navegador de manera continua. Entonces también puedes crear aplicaciones de transmisión, la que mostramos fue una aplicación estática. Con eso, me gustaría concluir mi charla. Muchas gracias. En caso de que estés interesado en saber más, puedes conectarte conmigo en mi Twitter, en TheCloudWeb. Publico mucho sobre WebAssembly y WebAssembly es una tecnología realmente futurista y una de las tecnologías a tener en cuenta, especialmente hoy y en los próximos años. Especialmente tanto para aplicaciones en el navegador en el front-end como en el lado del servidor y en aplicaciones en la nube. Con eso en mente, muchas gracias y espero que disfrutes de React Advanced. Muchas gracias.