I migrated my personal website from Next.js to Deno Fresh
- General
- Web performance
I migrated my personal website from Next.js to Deno Fresh
Since I knew about Deno and Fresh, I wanted to give these a try. I found the perfect excuse for this: migrating my personal website to these technologies.
This website was previously built using Next.js, which is an amazing framework. Even though I really like Next.js and I feel very comfortable working with it, my natural curiosity kicked in, so I decided to try something new and different.
About Fresh and Deno
Fresh is a full stack framework for Deno, which is a JavaScript and TypeScript runtime based on the V8 engine and written in Rust by Ryan Dahl, creator of Node.js.
Deno brings to the table some great improvements. It was created with the main idea of countering some of the flaws or mistakes the creator made when he first designed and released Node.js.
As stated in Deno Fresh's docsopens a new window, it was built for speed, reliability, and simplicity. Here are some of the main features of this amazing framework:
Just in time rendering on the edge: Fresh is designed to be deployed on Deno Deployopens a new window platform's globally distributed edge network, but can also be deployed to any system or platform that can run a Deno based web server.
Sends ZERO JavaScript to the client-side by default.
Interactive islands architecture: Fresh applications ship pure HTML to the client by default, so you can ship only the necessary JavaScript to add some interactivity here and there, just where you need it. These interactive islands will be independently re-hydrated.
TypeScript support out of the box: No configuration needed!
No build step required: The code is executed server-side and any TypeScript or JSX transpilation to JavaScript is done on the fly.
Uses Preactopens a new window instead of React!
Built-in linter and code formatter: sorry Prettier, we don't need you!
The migration process was very straightforward, since it has some similarities with Next.js. For example, the routing system is pretty much the same!
The performance boost
I experienced some significant performance improvements. Even though the website's performance was good enough before, I noticed that I was shipping too much JavaScript for my liking (around 400kB vs 55kB with Deno Fresh).
Like someone once said: one image is worth a lot more than one thousand words, and I brought two of them!
These are pretty good improvements if you ask me!
Overall, I can say that I'm very happy with the results, and I hope this article ignited your curiosity about Deno and Fresh. I definitely think you should give them a try!
That's all for today, I hope you found this article interesting and/or entertaining. See you in the next one.