Qwik Resumability Patterns

# Qwik Resumability Patterns for Google Antigravity IDE

Build instant-loading applications with Qwik's resumability architecture using Google Antigravity IDE. This guide covers lazy loading patterns, state serialization, and progressive hydration techniques that eliminate traditional hydration costs.

## Component Lazy Loading

```typescript
// src/routes/dashboard/index.tsx
import { component$, useSignal, useTask$, $ } from "@builder.io/qwik";
import { routeLoader$, routeAction$, Form } from "@builder.io/qwik-city";
import type { DocumentHead } from "@builder.io/qwik-city";

// Server-side data loading
export const useUserData = routeLoader$(async ({ cookie, redirect }) => {
  const session = cookie.get("session");
  if (!session) {
    throw redirect(302, "/login");
  }
  
  const user = await fetchUser(session.value);
  const analytics = await fetchAnalytics(user.id);
  
  return { user, analytics };
});

// Server action with validation
export const useUpdateProfile = routeAction$(async (data, { cookie, fail }) => {
  const session = cookie.get("session");
  if (!session) {
    return fail(401, { message: "Unauthorized" });
  }

  const result = await updateUserProfile(session.value, {
    name: data.name,
    email: data.email,
  });

  return { success: true, user: result };
});

export default component$(() => {
  const userData = useUserData();
  const updateAction = useUpdateProfile();
  const isEditing = useSignal(false);

  // Lazy-loaded click handler - only downloads when clicked
  const handleEdit = $(() => {
    isEditing.value = true;
  });

  // Task runs on server and resumes on client
  useTask$(({ track }) => {
    track(() => userData.value.analytics);
    // This code may run on server or client depending on when it's needed
    console.log("Analytics updated:", userData.value.analytics);
  });

  return (
    <div class="dashboard">
      <header class="dashboard-header">
        <h1>Welcome, {userData.value.user.name}</h1>
        <button onClick$={handleEdit}>Edit Profile</button>
      </header>

      {isEditing.value && (
        <Form action={updateAction} class="edit-form">
          <input
            name="name"
            value={userData.value.user.name}
          />
          <input
            name="email"
            type="email"
            value={userData.value.user.email}
          />
          <button type="submit">
            {updateAction.isRunning ? "Saving..." : "Save"}
          </button>
        </Form>
      )}

      <AnalyticsDashboard data={userData.value.analytics} />
    </div>
  );
});

export const head: DocumentHead = ({ resolveValue }) => {
  const data = resolveValue(useUserData);
  return {
    title: `Dashboard - ${data.user.name}`,
    meta: [{ name: "robots", content: "noindex" }],
  };
};
```

## Lazy Component Loading

```typescript
// src/components/HeavyChart.tsx
import { component$, useVisibleTask$, useSignal, noSerialize } from "@builder.io/qwik";
import type { NoSerialize } from "@builder.io/qwik";

interface ChartData {
  labels: string[];
  values: number[];
}

export const HeavyChart = component$<{ data: ChartData }>((props) => {
  const canvasRef = useSignal<HTMLCanvasElement>();
  const chartInstance = useSignal<NoSerialize<Chart>>();

  // Only runs on client when visible
  useVisibleTask$(async ({ track, cleanup }) => {
    track(() => props.data);
    
    // Lazy load chart library only when needed
    const Chart = (await import("chart.js/auto")).default;
    
    if (canvasRef.value) {
      // Clean up previous instance
      chartInstance.value?.destroy();
      
      chartInstance.value = noSerialize(
        new Chart(canvasRef.value, {
          type: "bar",
          data: {
            labels: props.data.labels,
            datasets: [{
              data: props.data.values,
              backgroundColor: "#3b82f6",
            }],
          },
        })
      );
    }

    cleanup(() => {
      chartInstance.value?.destroy();
    });
  });

  return (
    <div class="chart-container">
      <canvas ref={canvasRef} />
    </div>
  );
});
```

## Best Practices for Google Antigravity IDE

When building Qwik applications with Google Antigravity, use the $ suffix for lazy-loaded functions. Leverage routeLoader$ for server-side data fetching. Use useVisibleTask$ for client-only code that needs DOM access. Avoid useTask$ for side effects that must run on client. Serialize only what's needed for resumability. Let Gemini 3 help identify hydration bottlenecks and suggest lazy loading boundaries.

Google Antigravity's agent mode can analyze your application and suggest optimal code splitting points for maximum resumability benefits.