DevOps Tools / Frontend Development / Software Development

Deno’s Fresh Uses Server-Side Rendering for Faster Apps

30 Jun 2022 5:00am, by
Fresh Uses Server-Side Rendering for Faster Apps

Deno software engineer Luca Casonato was finishing up the documentation late last week for Tuesday’s official launch of Fresh, a new full-stack web framework for Deno. He took a break to share details on his latest project.

“Fresh is a new style of web framework that’s written for Dino rather than NodeJS,” Casonato, who created Fresh, told The New Stack. “It’s really optimized for edge computing.”

He compared it to Node.js or Vercel, which he said might have serverless functions that run on Amazon Web Services in a single region. Make a request to the server from the U.S. and if the host is in the EU, then the request has to literally transverse the ocean, Casonato said. Instead, Fresh leverages edge computing, where the request is routed to the server nearest the user, he added.

Another JS Framework?

But why another JavaScript framework in an already crowded and potentially unnecessary field of frameworks? First, there’s the speed issue presented by most frameworks, Casonato said. Second, there’s the user or developer experience.

“They’re all not fast enough, or they don’t have a good enough user experience or good enough developer experience,” Casonato said. “With Fresh, we’ve tried to look at all the frameworks, at all the things they do correctly and all the things they don’t do correctly.”

The combination, he contended, is a better framework with fewer downsides than existing frameworks.

“The framework is really built for server-side rendering so it sends very little JavaScript, very little code to the clients, and keeps as much as possible on the server, to make it a really snappy experience for users,” he said.

The majority of the rendering is done on the server, so the client “is only responsible for re-rendering small islands of interactivity,” the announcement stated. That translates into great performance all over the world, Casonato claimed, even on slow devices. Other JavaScript frameworks that send more code to the client often struggle by comparison on slow devices, he said.

Fresh Unboxed

Fresh is based on Deno and Preact, a JavaScript library that promotes itself as an alternative to Meta’s React, which is a JavaScript library for building user interfaces based on UI components.

Fresh combines a routing framework and a templating engine, to render pages on-demand on the server, according to the documentation. Fresh also provides an interface for rendering some components on the client for maximum interactivity, it states. The framework uses Preact and JSX for rendering and templating on both the server and the client.

It’s built to deploy on Deno, a runtime for JavaScript, TypeScript and WebAssembly — so the only installation requirement for Fresh is downloading Deno 1.22.3 or later.

Fresh supports TypeScript out of the box and requires zero configuration, according to the documentation. Perhaps one of its more compelling features, however, is the fact it does not have a build step. Build steps can take up to 10 minutes to run, Casonato pointed out.

”With Fresh, that takes no minutes — it’s immediate, there’s no build step,” he said. “So you can take the source code that you’ve written and immediately deploy it to all of your servers without having to transform it in-between, which can really speed up the development.”

It does take the extra set of transpiring TypeScript code to Javascript first, to execute TypeScript on browsers that do not natively execute TypeScript. That takes milliseconds on the fly, Casonato explained.

“There’s some efforts in the works that will allow browsers to eventually execute some form of TypeScript, but it’s not quite there, so what we have to do for now is take the TypeScript code and strip out all the types before we serve the JavaScript to the browser,” he said. “When a user makes a request for some resource, and the browser is not natively able to handle that resource type, we have to just transform it on the fly.”

Casonato foresees Fresh’s primary competition as being Astro, Remix and Next.js.

The Deno company last week announced it had raised $21 million in an investment round led by Sequoia Capital. It has so far raised $25.9 million in funding over two rounds, according to Crunchbase.

The New Stack is a wholly owned subsidiary of Insight Partners, an investor in the following companies mentioned in this article: Deno.

Image via Fresh.