Welcome to Server Island

Today’s issue: Bathing in that JavaScript essence, learning how to use new CSS features from 2017, and checking our telescope for a Meteor.js sighting.

Welcome to #308.

---

Welcome to Server Island

Sadly, I’m not referring to a new reality show where a bunch of waiters from Chili’s try to find love while carrying sizzling fajitas everywhere they go. I’m talking about an experimental new feature from Astro called Server Islands that provides a more flexible approach to server rendering.

How we got here: Astro has been all in on the islands architecture since day 1. The framework statically renders each page’s content and extracts the interactive parts into small JavaScript bundles that can be hydrated when the page loads.

Server Islands do the exact same thing… but on the server. Here’s how it works:

• Bundling Magic – When building your app, Astro takes components with server:defer, replaces their content with a fallback, and creates an API route to fetch the dynamic HTML from.

• Serving static content from a CDN – The static parts of the app are pushed to a CDN and served immediately to the user.

• Fetching dynamic HTML at runtime – Astro injects a tiny script that reads attributes on the deferred components, fetches the dynamic HTML from the API, and then injects the new HTML onto the page with (almost) no JavaScript.

If this sounds familiar, it’s because that’s almost the exact approach as Partial Prerendering with Next.js. The main difference is that Next kicks off the rendering of their dynamic content from the initial request and streams in the content, while Astro fetches the dynamic content after the page loads.

The Astro team claims their simpler approach is faster despite starting later in the lifecycle, but you can compare the Next.js demo to the Astro demo if you want to do your own research.

Bottom Line: This “best-of-both-worlds” approach to server rendering seems like the new standard for ecomm sites, but it’ll be interesting to see if Server Islands and PPR catch on beyond that.

---

👋 Goodbye low test coverage and slow QA cycles

Are slow test cycles bottlenecking your team’s release velocity? With QA Wolf, your org can run entire test suites in minutes, giving you faster feedback and less bugs.

QA Wolf takes testing off your plate. They can get you:

• 80% test coverage in just four months—not years
• Unlimited parallel test runs
• 24-hour maintenance and on-demand test creation
• Zero flakes, guaranteed

No more manual e2e testing. No more slow QA cycles. No more bugs reaching production. Think about all the engineering time you’ll save 🥹.

With QA Wolf, Drata’s team of 80+ engineers achieved 4x more test cases and 86% faster QA cycles.

Schedule a demo to learn more.

---

function eventuallyFail(time) {
  setTimeout(() => {
    throw Error("Oops!")
  }, time)
}

try {
  eventuallyFail(1000)
} catch (error) {
  console.error(error.message)
}

---

1. Ahmad Shadeed wrote about CSS Grid template areas to help you get the confidence to actually start using this super new feature (that’s been around since 2017).

2. Kadi Kraman from the Expo team wrote a deep dive on everything that web developers need to know about building their first React Native app. TLDR: use Expo and hope for the best.

3. Clerk created this guide on Building a team-based task manager application with Next.js, Neon, and Clerk Organizations – which gives you a simple way to add multi-tenant functionality to any app. [sponsored]

4. Swapy is a framework-agnostic tool that converts any layout into a drag-to-swap layout. Apparently, it also works for presidential candidates.

5. Nina and Travis wrote about How to make complex Chrome extensions.

6. Node.js v22.5 comes with an experimental node:sqlite module and support for glob matching on the Node.js test runner.

7. Robat Williams wrote about Why we can be optimistic about supply chain security in npm. Because it’s nice to feel optimistic about things.

8. Dan Vanderkam wrote A TypeScripter’s take on Zig, and I’m not referring to a parody of the song by a-ha.

9. Meteor.js just released v3.0 and is calling it a “Meteor Renaissance.” Is 2014 2024 the year of Meteor?

10. Poku is a cross-platform test runner that claims to “bring the JavaScript essence back to testing.” And now I’m working with Jeremy Fragrance to try and get a JavaScript Essence cologne into every Macy’s in America before Black Friday.

---

function eventuallyFail (time) {
  setTimeout(() => {
    throw Error("Oops!")
  }, time)
}

try {
  eventuallyFail(1000)
} catch (error) {
  console.error(error.message)
}

try/catch is synchronous. By the time our error is thrown, the try/catch block will be long gone - leaving us with Uncaught Error: Oops!. To fix this, we want to rely on promises which allow us more async control.

function eventuallyFail (time) {
  return new Promise((res, rej) => {
    setTimeout(() => {
      rej(Error("Oops!"))
    }, time)
  })
}

eventuallyFail(1000)
  .catch((reason) => console.error(reason.message))