DEV Community

Pease Ernest
Pease Ernest

Posted on

I migrated from vite to bertui after they lauched server islands today

I Migrated from Vite to BertUI After They Launched Server Islands Today

I've been building React apps with Vite for the past year. It's been solid—fast dev server, decent build times, and a massive ecosystem. But today, BertUI dropped Server Islands in v1.1.0, and I spent the afternoon migrating my docs site. Here's what happened.

Why I Even Considered Switching

BertUI has been on my radar since their 1.0 release. The performance claims seemed wild:

  • 494ms dev server startup vs Vite's 713ms
  • 265ms production builds vs Vite's 4.7s
  • Zero configuration

But honestly? I dismissed it as "just fast Vite." Cool speeds, but missing the killer feature I needed: SEO.

Then Server Islands dropped.

What Are Server Islands?

Server Islands are BertUI's answer to the "client-only React" problem. You add one line to any page:

export const render = "server";
Enter fullscreen mode Exit fullscreen mode

And BertUI generates static HTML at build time. No SSR server. No complex setup. Just pure HTML that search engines can index immediately.

Here's the magic:

Before (Vite):

<!-- What search engines see -->
<div id="root"></div>
<script src="app.js"></script>
Enter fullscreen mode Exit fullscreen mode

After (BertUI with Server Islands):

<!-- Full content immediately -->
<div id="root">
  <header>
    <h1>My Awesome Docs</h1>
    <nav>...</nav>
  </header>
  <main>
    <article>Full content here!</article>
  </main>
</div>
<script src="app.js"></script>
Enter fullscreen mode Exit fullscreen mode

The kicker? You choose which pages get this treatment. Landing page needs SEO? Add the line. Dashboard needs full React state? Skip it.

The Migration Process

Step 1: Backup Everything 

cd my-vite-project
bunx migrate-bertui
Enter fullscreen mode Exit fullscreen mode

BertUI's migration tool automatically backs up everything to .bertmigrate/ before touching anything. Smart move.

Step 2: Convert Routes

Vite routing (React Router):

// App.jsx
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/blog/:slug" element={<BlogPost />} />
</Routes>
Enter fullscreen mode Exit fullscreen mode

BertUI file-based routing:

src/pages/index.jsx        → /
src/pages/about.jsx        → /about
src/pages/blog/[slug].jsx  → /blog/:slug
Enter fullscreen mode Exit fullscreen mode

No router config. Just files. Took me 10 minutes to restructure.

Step 3: Update Imports 

// Before (Vite)
import { Link } from 'react-router-dom';

// After (BertUI)
import { Link } from 'bertui/router';
Enter fullscreen mode Exit fullscreen mode

Find and replace. Done.

Step 4: Add Server Islands

This is where it got interesting. I added export const render = "server"; to my landing page, about page, and changelog.

// src/pages/changelog.jsx
export const render = "server";

export const meta = {
  title: "Changelog - BertUI",
  description: "Complete history of BertUI releases"
};

export default function Changelog() {
  return (
    <section>
      <h1>BertUI Changelog</h1>
      {/* ... content ... */}
    </section>
  );
}
Enter fullscreen mode Exit fullscreen mode

Step 5: Build and Deploy 

bun run build
Enter fullscreen mode Exit fullscreen mode

265ms build time. I thought it was broken. Ran it again. Still 265ms.

My Vite builds were taking 4.7s. This felt like a bug, but the output was perfect.

What Actually Changed

The Good

1. Build Speed is Ridiculous

  • Vite: 4.7s production builds
  • BertUI: 265ms production builds
  • 18x faster

For CI/CD pipelines, this is massive. My GitHub Actions went from 45s to 12s.

2. Dev Server Actually Feels Instant

  • Vite: 713ms startup (already fast)
  • BertUI: 494ms startup
  • Not a huge difference, but noticeable

The real win? HMR feels snappier. Changes reflect in ~30ms.

3. SEO Problem: Solved

I ran a quick test with curl:

curl https://my-site.vercel.app/changelog
Enter fullscreen mode Exit fullscreen mode

Vite output:

<div id="root"></div>
Enter fullscreen mode Exit fullscreen mode

BertUI output:

<div id="root">
  <section class="changelog-page">
    <header>
      <h1>BertUI Changelog</h1>
      <!-- FULL CONTENT HERE -->
    </header>
  </section>
</div>
Enter fullscreen mode Exit fullscreen mode

Search engines see everything. No JavaScript required. This is what I needed.

4. Zero Config is Real

My vite.config.js was 50 lines of plugins and aliases. BertUI? No config file at all. Just works.

The Trade-offs

1. No TypeScript Support

BertUI is JavaScript-first by design. They explicitly don't plan to add .tsx support.

For my docs site? Not a problem. For a complex app with a team? This could be a dealbreaker.

2. Smaller Ecosystem

Vite has plugins for everything. BertUI is new. If you need niche tooling, you might be stuck.

3. Bun-Only

BertUI requires Bun. If your company is locked into Node.js, this won't work.

4. No Multi-Framework Support

Vite supports Vue, Svelte, etc. BertUI is React-only.

Performance Comparison (My Machine)

Metric BertUI Vite Winner
Dev Server 494ms 713ms BertUI
Production Build 265ms 4.7s BertUI (18x)
Bundle Size 100KB 220KB BertUI
SSG Support ✅ YES ❌ NO BertUI

When Should You Actually Use BertUI?

✅ Use BertUI if:

  • You're building content sites (docs, blogs, landing pages)
  • You need fast builds for CI/CD
  • You want per-page control over SSG
  • You're okay with JavaScript (no TypeScript)
  • You can use Bun

❌ Stick with Vite if:

  • You need TypeScript
  • You're using Vue/Svelte
  • You need a mature plugin ecosystem
  • You can't use Bun

❌ Use Next.js if:

  • You need full SSR (real-time server rendering)
  • You need advanced features like ISR
  • You have complex data requirements

My Honest Take

BertUI isn't "just fast Vite" anymore. Server Islands genuinely solve a problem Vite can't—instant SEO without complexity.

The speed is nice, but the killer feature is per-page SSG with one line of code. That's unique. Next.js has SSG, but it's more complex. Vite has no SSG at all.

Would I recommend it for every project? No. If you need TypeScript or multi-framework support, look elsewhere.

But for React-first projects that need blazing speed and perfect SEO? BertUI is now a serious option.

Migration Checklist

If you're considering the switch:

  • [ ] Check if your project needs TypeScript (dealbreaker if yes)
  • [ ] Verify you can use Bun in your environment
  • [ ] Identify which pages need SEO (use Server Islands)
  • [ ] Back up your project (or use bunx migrate-bertui)
  • [ ] Convert routes to file-based structure
  • [ ] Update router imports
  • [ ] Add export const render = "server"; to SEO pages
  • [ ] Test build and deploy
  • [ ] Verify SEO with curl or view-source

Resources

TL;DR: Migrated from Vite to BertUI after they launched Server Islands. Got 18x faster builds and perfect SEO with zero config. Trade-off: no TypeScript support. Worth it for content sites.

questions about it are allowed

Top comments (0)