DEV Community: Jannik Baranczyk

How to use Preact with Astro

Jannik Baranczyk — Sun, 21 Nov 2021 14:13:13 +0000

I recently tried to use Preact with Astro. Since I found no decent tutorial on how to use those two together, I decided to write one.

If you don't know Astro, you should definitely check it out. Astro is a new modern static site builder that allows us to use React/Preact, Svelte and Vue components all together, while shipping only the absolute necessary client-side JavaScript, using a technique called "Partial Hydration". That results in really fast sites with less JavaScript. They just released v0.21.0, which introduced a new, faster compiler written in Go a new build engine powered by Vite.

Preact is a "Fast 3kB alternative to React with the same modern API". It's smaller than React but shares most of it's features (Hooks, Context), so you can write normal React code but benefit from better performance.

So how can I use Preact components with Astro?

The fastest way to do this, is to select Preact as your framework in the Astro CLI when you setup a new project. This tutorial presupposes that you want to add Preact to an existing Astro project.

First you need to install a renderer for Preact, and the Preact library itself.

npm install --save-dev @astrojs/renderer-preact preact

Then you need to add the just installed renderer to the Astro config file, astro.config.mjs. When you open it, the renderers property should be an empty Array. Add the @astrojs/renderer-preact package to the Array.

renderers: ['@astrojs/renderer-preact']

That's all you need to setup Preact with Astro! 🎉

Now you can write your Preact components as .jsx or .tsx files and import them to your Astro pages.

For example, this is how you would write a simple Counter component in TypeScript (.tsx):

// /src/components/Counter.tsx

import { useState } from 'preact/hooks'

export default function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div className='counter'>
      <button onClick={() => setCount(count - 1)} disabled={count === 0}>
        -
      </button>
      <h2>{count}</h2>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  )
}

You can import the component like this:

---
// /src/pages/index.astro

import Counter from '../components/Counter.tsx'
---

<Counter client:load />

Tip: The client:load snippet you see above comes from Astro's Partial Hydration. If we leave this away, Astro would only render the components markup, without any interactivity, to ship less client-side JavaScript. You can learn more about Partial Hydration in the official Astro Docs

Happy hacking!

SWR + Dynamic Routes in Next.js

Jannik Baranczyk — Tue, 20 Jul 2021 13:16:33 +0000

Hey folks!

If you recently worked with client side data fetching in Next.js, you probably heard of SWR. It comes with useSWR, a React hook that makes all the complicated stuff in client side data fetching (caching, revalidation, focus tracking etc.) easy as pie.

You can implement it with just a few lines of code:

// Import the hook
import useSWR from 'swr'

// Define a custom fetcher function
const fetcher = (url) => fetch(url).then((res) => res.json())

function Profile() {
  // Use the hook to fetch your data
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>

  return <div>hello {data.name}!</div>
}

Easy, right? Well, it definitely is when you try to fetch an endpoint with no query parameters, like /api/user. But when you try to pass a dynamic route parameter to your useSWR hook, things can get a little bit tricky. I recently spent some time figuring out a solution for this, so I thought I should share my solution.

Let's say we have a dynamic user route under /pages/user/[id].js, which should show a user profile based on the ID we pass as a route parameter.

The code to access that ID parameter would look like this:

// Import the useRouter hook from Next.js
import { useRouter } from 'next/router'

function Profile() {
  // Use the useRouter hook
  const router = useRouter()

  // Grab our ID parameter
  const { id } = router.query

  return <div>user id: {id}</div> 
}

If you open that page with a random ID (http://localhost:3000/user/42 i.e), you should see the ID on the rendered page (user id: 42). Now, instead of just rendering that ID, let's fetch the user related to that ID from our API endpoint and render a profile page.

When I tried to do that, I thought I could just pass the ID parameter to the useSWR hook and voilá – a beautiful profile page. The code looked like that:

import useSWR from 'swr'
import { useRouter } from 'next/router'

const fetcher = (url) => fetch(url).then((res) => res.json())

function Profile() {
  const router = useRouter()
  const { id } = router.query

  const { data, error } = useSWR(`/api/user/${id}`, fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>

  return <div>hello {data.name}!</div>

But then the error messages came in – something obviously didn't work, my component just won't fetch the user. What happened here? When I had a look into the network tab, I noticed that the ID parameter wasn't passed to the fetch call – instead it said undefined. But why? The ID was clearly there, so what the heck happened here?

The answer is in the Next.js Docs:

Pages that are statically optimized by Automatic Static Optimization will be hydrated without their route parameters provided, i.e query will be an empty object ({}). After hydration, Next.js will trigger an update to your application to provide the route parameters in the query object.

Since I didn't use getServerSideProps or getStaticProps on that page, Next turned on Automatic Static Optimization for it – which means the dynamic parameters from router.query are not available until the hydration process has finished. Before, query is just an empty object – that's why the network tab said undefined.

So how can we tell useSWR to wait until our dynamic route parameter is ready?

TL;DR

import useSWR from 'swr'
import { useRouter } from 'next/router'

const fetcher = (url) => fetch(url).then((res) => res.json())

function Profile() {
  const router = useRouter()
  const { id } = router.query

  // Use a ternary operator to only fetch the data when the ID isn't undefined
  const { data, error } = useSWR(id ? `/api/user/${id}` : null, fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>

  return <div>hello {data.name}!</div>

This way our page now initially renders Loading..., and as soon as the hydration process has finished it fetches the user data and renders the profile.

I hope this little explanation could help you!

My VS Code setup ✨

Jannik Baranczyk — Tue, 20 Jul 2021 08:04:56 +0000

I'm very happy about my current VS Code setup, so I thought I'll share it with y'all:

Look and feel
Theme: Cobalt2
Font: Operator Mono
File Icon Theme: File Icons

Extensions

Auto Rename Tag
Bracket Pair Colorizer 2
ESLint
Live Share
Polacode
Prettier
Prisma
Simple React Snippets (very handy!)
vscode-styled-components

What's your setup? :)

Hello world! 👋

Jannik Baranczyk — Tue, 20 Jul 2021 07:55:40 +0000

Yoyo! My name is Jannik Baranczyk, I'm a full stack developer from Germany.

I started coding as a teenager and still love it (most times). I'm a big fan of TypeScript and the JAMstack, mostly working with Next.js. Besides coding stuff I'm into music, coffee and vegan food.

You can follow me on GitHub and Twitter if you'd like to.