Skip to main content
Advertisement

Qwik Basics

Qwik is an innovative framework that introduces a new concept called "Resumability," aiming to make initial JavaScript execution nearly zero during page load.

1. Solving the Hydration Problem​

Traditional frameworks need to re-execute entire JavaScript logic (hydration) in the browser after it has been rendered on the server. This often leads to slow initial page load times.

  • Resumability: Continues the state from the server in the browser exactly where it left off.
  • Lazy Execution: No JavaScript is executed in the browser until the user interacts with the page.

2. Component Example​

import { component$, useSignal } from '@builder.io/qwik';

export default component$(() => {
  const count = useSignal(0);

  return (
    <button onClick$={() => count.value++}>
      Count: {count.value}
    </button>
  );
});

The $ suffix is a core Qwik notation that tells the compiler to split the source code and load it only when needed.

3. Qwik City​

The official meta-framework for Qwik, providing file-based routing and API communication features.

4. Optimized for Speed​

Qwik is particularly well-suited for large-scale services where instant page display is critical, especially in mobile environments or areas with slow network connections.

Advertisement
Advertisement