Why Fresh is the Best Choice for Server-Side Rendering

I was developing a simple application that involved server-side rendering. I know and have used Next JS to achieve this quite a few times. I was trying to find something new that I could learn from and also share with the audience. I came across Fresh, a cutting-edge web framework that provides a seamless and flexible solution for server-side rendering, and it’s powered by Deno 👀 (but let’s not talk about Deno, that will be for some other day 😁).

Fresh is definitely worth checking out.

Here’s why Fresh is the best choice for server-side rendering:

  1. Fresh is built with performance in mind. It uses a lightweight and minimalistic approach, resulting in faster page load times and better overall performance.
  2. The fresh framework is beginner-friendly its intuitive API and clear documentation make it easy to get started and create complex server-side rendering applications.
  3. Fresh provides 0 runtime overhead.
  4. Fresh provides Island based client hydration.
  5. Fresh comes with typescript and can be easily integrated with React JS etc.
  6. Let’s look at the below comparison between Fresh and Next.js 13 to showcase the differences in their approach to server-side rendering

Fresh:

// server.js file
const { createServer } = require('fresh')
const { html } = require('fresh/render')

const app = createServer()

app.get('/', async (req, res) => {
  const postData = await fetch('/api/getData')
  const { mainTitle, paragraph } = await postData.json()
  const pageHtml = html`
    <html>
      <head>
        <title>${mainTitle}</title>
      </head>
      <body>
        <h1>${mainTitle}</h1>
        <p>${paragraph}</p>
      </body>
    </html>
  `
  res.send(pageHtml)
})
app.listen(3000, () => {
  console.log('Server is up and running')
})

Next.js:

// pages/index.js

import { useState, useEffect } from 'react'
function Index() {
  const [post, setPost] = useState({ mainTitle: '', body: '' })
  useEffect(() => {
    async function fetchData() {
      const res = await fetch('/api/getData')
      const json = await res.json()
      setPost(json)
    }
    fetchData()
  }, [])
  return (
    <div>
      <h1>{post.mainTitle}</h1>
      <p>{post.body}</p>
    </div>
  )
}
export default Index

Fresh takes a simpler and more direct approach to server-side rendering, with HTML created directly on the server using a template literal. The Next.js example, on the other hand, renders the HTML on the server and client using React components.

While Next.js allows for greater flexibility and control over the rendering process, it may also be more difficult and time-consuming to set up. Fresh, on the other hand, is designed to be lighter and easier to use, making it an excellent choice for basic applications or those requiring speedier performance.

Thus, Fresh’s approach to server-side rendering is simpler and more direct for creating HTML on the server, whereas Next.js allows greater flexibility and control via React components. Depending on the nature of your project, either strategy may be preferable, but Fresh’s simplicity and quickness make it an appealing alternative to investigate.