Originally posted here.
Yes, you heard that right, we’re going to be comparing the most popular react framework Next to a fresh new framework called Fresh (pun intended). Next will be running with a new runtime called Bun (you can checkout more about that here) and Fresh will be running with Deno. I’ve written 2 applications, a simple counter app, and a more complex app that renders some Pokémon. I’ll be using Hyperfine to benchmark the results. All the apps will be available on Github.
How am I measuring the performance?
We’re going to be looking at 5 metrics:
- First Contentful Paint (FCP): Measures the time from when the page starts loading to when any part of the page's content is rendered on the screen.
- Largest Contentful Paint (LCP): Marks the point in the page load timeline when the page's main content has likely loaded.
- DOM Content Loaded Listener (DCL): Marks the point when the page's initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
- Time to Interactive (TTI): Measures the time from when the page starts loading to when its main sub-resources have loaded and it is capable of reliably responding to user input quickly.
- Lighthouse: A tool developed by Google to measure a website’s performance using an average of six metrics.
*Some definitions above come from the Google Dev Tools. They do a great job describing these APIs, so I decided to put them here instead of trying to explain them.
These four metrics and an overall Lighthouse score will determine which of these two frameworks is the fastest.
Also, keep in mind I’m doing this locally, so we’re not going to be using Vercel or Deno Deploy in our benchmarks.
Counter (CSR)
| Framework | FCP | LCP | DCL | TTI | Lighthouse Score |
|---|---|---|---|---|---|
| Next | 0.07s | 0.07s | 0.07s | 0.07s | 100 |
| Fresh | 0.07s | 0.07s | 0.09s | 0.09s | 100 |
As you can see, both stacks are very similar in speed. Next beat Fresh very slightly but that would never make a noticeable difference for the end-user.
Pokémon (SSR)
| Framework | FCP | LCP | DCL | TTI | Lighthouse Score |
|---|---|---|---|---|---|
| Next | 0.15s | 0.15s | 0.15s | 0.15s | 100 |
| Deno | 0.10s | 0.10s | 0.12s | 0.12s | 100 |
But for Server Side Rendering, Deno & Fresh are faster by quite a big margin. FCP is 33% faster than with Next, and TTI is 20% faster.
What makes Fresh faster than Next?
Fresh does things a bit differently from Next. Here are the core reasons why:
- No JS overhead: Fresh only ships JavaScript when it needs to. This might include, like our examples above a Counter. If we made a fully static site, Fresh would ship no JS whatsoever, limiting the load time on the client.
- JIT runtime: Deno runs TypeScript out of the box, which means there is no build step like we see with Next and Vercel.
- Island hydration: When Fresh does ship JS, it hydrates it only on the client with the necessary props.
It’s these main advantages that give it an edge over Next.
Thoughts
Will Fresh & Deno take over the web ecosystem anytime soon? I don’t think so. It will be a long time still before we see a shift from Next to Fresh. The developer experience using Fresh isn’t always great either. Their documentation is limited, and the community is still very small. However, there is great potential. I can see Fresh being production ready in less than a year from now.
Enough rambling on about Fresh, why don’t you give it a go: https://fresh.deno.dev/
Projects are on Github.
Thanks for reading 😃
Top comments (0)