Fresh, Server Side Rendering en Deno

Este tutorial es acerca de un framework de Javascript y Typescript nuevo, llamado Fresh. Pero en esta ocasion no hablaremos de un framework basado en herramientas de Nodejs sino en Deno, el entorno de ejecucion de Javascript y Typescript alternativo a Deno.

¿Qué es Deno?

Deno es un entorno de ejecución similar a Nodejs, de hecho es muy similar a Deno, solo que soporta código de Typescript, ES Modules y esta desarrollado encima de Rust. La idea de Deno es ser una alternativa moderna y con mejores diseños que Nodes, de hecho esta desarrollado por el mismo creador de Nodejs.

Entonces como ya sabemos que es Deno, ahora veamos Fresh.

¿Qué es Fresh?

Fresh es un nuevo framework Fullstack de Javascript/Typescript que permite crear aplicaciones web usando Server Side Rendering, en este sentido es muy similar a frameworks de Javascript como Nextjs, o Remix. Aunque su idea principal a diferencia de estos es generar un contenido estatico de HTML que sera cargado inicialmente y a medida que el usuario va navegando en la aplicacion se van caragando el resto de partes, algo que se le conoce como hidratacion parcial (la cual viene basado en tipo de arquitectura llamado Island Architecture), la cual tambien tienen frameworks como Astro.

Aunque si no entendista nada de esto, puedes pensarlo como una alternativa a Nextjs, Remix, Gatsby, e incluso Astro (ya que tambien usa el mismto tipo de arquitectura), pero viniendo del mundo de Deno.

Caractersiticas de Fresh

• Just in time rendering, esto significa que todo el proeceso de Renderizado se hace en el backen en el momento que se necesite
• Por defecto lo que se envia al frontend no es un archivo de Javascript sino de HTML, y luego se rehidrata con posible código de Javascript (similar a Astro)
• No es necesario configurar muchas cosas basicas como el enrutador, o archivos de typescript
• No es necasario compilar tu proyecto final (0 Build time)
• Soporta Typescript por defecto
• Fresh usa Preact y JSX para poder crear interfaces interactivas en el frontend

Instalación de Deno

Para poder instalar Fresh, primero necesitas instalar Deno:

curl -fsSL https://deno.land/x/install/install.sh | sh

• Otros metodos de Instalación: https://deno.land/manual/getting_started/installation

Instalación de Fresh

deno run -A -r https://fresh.deno.dev my-project
cd my-project
deno task start

Enrutador basado en archivos de sistema

Fresh viene con una carpeta routes. Cualquier componente de Preact que uses dentro de esta carpeta creara una pagina en el frontend, similar a Nextjs o Remix.

Cada pagina sera renderizado desde el servidor (Similar a un Template engine en otros frameworks de servidor)

/** @jsx h */
import {h} from 'preact'

function About() {
  return (
    <div>about</div>
  )
}

export default About

Esta pagina tambien actualiza el archivo llamado fresh.gen.ts de forma automatica. esto quiere decir que esta escrito en tu codigo que es lo que esta siendo importado. Esto tambien lo hacen frameworks de Nodejs como Remix o Nextjs, solo que lo hacen cuando se ejecuta un build, y no esta a la vista del desarrollador.

Parametros

Vamos a crear la siguiente ruta /products/[productName].tsx

/** @jsx h */
import {h} from 'preact'
import {PageProps} from '$fresh/server.ts'
import {tw} from '@twind'

const Products = (props: PageProps) => {
  return (
    <div>
      <h1 class={tw`text-3xl font-bold`}>Product Page: {props.params.productName}</h1>
    </div>
  )
}

export default Products

Inslands

si creas un componente fuera de la carpeta ìslands esta no se ejecutara cuando lo llames, esto es porque solo lo que esta dentro de la carpeta sera añadido dinamicamente.

Fetch Data

/products/index.ts

/** @jsx h */
import { h } from "preact";
import { Handlers, PageProps } from "$fresh/server.ts";
import { tw } from "../../utils/twind.ts";

interface Photo {
  albumId: number;
  id: number;
  title: string;
  url: string;
  thumbnailUrl: string;
}

export const handler: Handlers = {
  async GET(req, ctx) {
    const res = await fetch("https://jsonplaceholder.typicode.com/photos");
    const data = await res.json();
    return ctx.render(data);
  },
};

function PhotosPage(props: PageProps) {
  return (
    <div class={tw`grid grid-cols-3 gap-4`}>
      {props.data.map((photo: Photo) => (
        <div>
          <h1>{photo.title}</h1>
          <img src={photo.thumbnailUrl} alt="" />
        </div>
      ))}
    </div>
  );
}

export default PhotosPage;

Api Routes

Tambien es posible crear funciones que se ejecutan desde el backend usando API Routes

// routes/api/random-uuid.ts

import { Handlers } from "$fresh/server.ts";

export const handler: Handlers = {
  GET(req) {
    const uuid = crypto.randomUUID();
    return new Response(JSON.stringify(uuid), {
      headers: { "Content-Type": "application/json" },
    });
  },
};

Deno Deploy

En cuanto al Despliegue de la aplicacion, podemos usar Deno Deploy, el cual es un servicio por parte de Deno que permite deslegar aplicaciones en Edge, el cual es una red de Nodos distribuidas al rededor del mundo lo que significa que tu sitio sera servidor de forma rapida al tener poca latencia con los computadores de tus usuarios:

https://fresh.deno.dev/docs/getting-started/deploy-to-production

Más recursos

• https://fresh.deno.dev/