# Building websites with Dart and Jaspr

Source: https://www.youtube.com/watch?v=w05Mwgk_R4g
Recap page: https://rapidrecap.app/video/w05Mwgk_R4g
Generated: 2025-12-17T21:35:07.279+00:00

---
## Quick Overview

The tutorial demonstrates how to build websites using Dart and the Jaspr framework, achieving server-side rendering (SSR) and automatic hydration by creating a project structure that includes a Dart Frog server for the shared API, a server-rendered Jaspr project for the SEO-friendly website, and a shared Dart package for common business logic and data models.

**Key Points:**
- The video outlines building a pet adoption website called "Buddyfinder" using Dart and Jaspr.
- The project structure comprises four main components: a Dart Frog server (for the shared API), a server-rendered Jaspr website, a Flutter project for mobile, and a shared Dart package.
- The `jaspr create site` command is used with flags like `--mode server:auto` to enable SSR and automatic hydration.
- Jaspr components inherit from `StatelessComponent` or `AsyncStatelessComponent` and render HTML/CSS directly, unlike traditional Flutter widgets that render pixels to a canvas.
- Client-side code is marked with the `@client` decorator, allowing developers to share business logic between server-rendered HTML and client-side interactions.
- The demonstration uses `dart create -t package shared` to create the package for shared logic, which is then referenced in the pubspec.yaml dependencies.
- The resulting application achieves both SSR for SEO benefits and dynamic client-side interactivity without compromising performance.

![Screenshot at 00:53: The video displays the pub.dev page for Jaspr version 0.21.7, identifying it as a modern web framework for building websites in Dart with support for both client-side and server-side rendering, which is central to the tutorial's topic.](https://ss.rapidrecap.app/screens/w05Mwgk_R4g/00-00-53.png)

**Context:** This video, titled "Flutter Flight Plans: Building websites with Dart and Jaspr," serves as a tutorial demonstrating how to leverage the Jaspr framework, a modern web framework written in Dart, to create server-rendered web applications that share code with Flutter mobile applications. The presenter, Craig Labenz, walks through setting up a multi-component project structure involving Dart Frog for the backend API and Jaspr for the front end, highlighting features like server-side rendering (SSR) and automatic hydration.

## Detailed Analysis

The tutorial focuses on creating full-stack web applications using Dart and the Jaspr framework, emphasizing code sharing between web and mobile (Flutter). The presenter outlines a project structure for a pet adoption site called "Buddyfinder," which requires four components: a Dart Frog server for the shared API, a server-rendered Jaspr project (SEO-friendly website), a Flutter project for mobile, and a shared Dart package for common logic/models. The initial setup uses `jaspr create site --mode server:auto --routing multi-page --flutter plugins-only --backend none` to configure the site for SSR and automatic hydration. Jaspr components, like `StatelessComponent`, render HTML/CSS directly, contrasting with Flutter's pixel-based rendering. Client-side logic is isolated using the `@client` decorator, allowing code to run only in the browser, while business logic in the shared package is available to both server and client. The presenter shows how to fetch data via the Dart Frog API endpoint `/api/pets` within an `AsyncStatelessComponent` and iterates over results to render `PetCard` components. Dependencies shown in `pubspec.yaml` include `http`, `jaspr`, and `jaspr_router`, along with a path reference to the shared package. The video concludes by noting that this approach avoids the performance pitfalls (slow loading, poor SEO) associated with purely client-side rendering by providing SSR, while still offering an instant, familiar build experience reminiscent of Flutter widgets.

### Project Setup and Initialization

- `jaspr create site --mode server:auto \ --routing multi-page \ --flutter plugins-only \ --backend none`
- This command establishes the project structure optimized for SSR and auto-hydration, omitting a custom backend to use Dart Frog later.

### Data Modeling

- Defining the `Pet` data class using the `@freezed` package in the shared Dart package
- The shared package uses Dart features like sealed classes and factory constructors for immutable data structures, accessible by both server and client.

### API Implementation (Dart Frog)

- Creating an API endpoint at `/api/pets` using `dart_frog create api`
- This endpoint handles HTTP GET requests, reads from a repository, and filters pets based on query parameters (type, breed).

### Client Component Structure

- Defining components like `Hero` as `StatelessComponent` and sections like `PetsSection` as `AsyncStatelessComponent`
- Components utilize `div` and other HTML-like elements provided by Jaspr, marked with `@client` if they need client-side interactivity.

### Dependency Management

- Including `http`, `jaspr`, `jaspr_router`, and referencing the local shared package in `pubspec.yaml`
- The shared package path is set to `../shared` to allow logic and models to be used across the server and client projects.

### Hydration Verification

- Checking the browser console reveals the message "Hello from Jaspr on the client!"
- This confirms that the client-side Dart code successfully executed after SSR, validating the automatic hydration process.

![Screenshot at 00:01: Visual representation of abstract geometric shapes floating in a dark, futuristic environment, setting a high-tech tone.](https://ss.rapidrecap.app/screens/w05Mwgk_R4g/00-00-01.png)
![Screenshot at 00:13: Developer Craig Labenz introducing the topic of why developers ask about using Dart/Jaspr for web development.](https://ss.rapidrecap.app/screens/w05Mwgk_R4g/00-00-13.png)
![Screenshot at 00:53: Screenshot of the pub.dev page for the Jaspr package \(version 0.21.7\), showing its popularity and description as a Dart Web Framework.](https://ss.rapidrecap.app/screens/w05Mwgk_R4g/00-00-53.png)
![Screenshot at 02:28: Code snippet showing the Flutter command flutter create app --empty used to generate the required mobile application structure.](https://ss.rapidrecap.app/screens/w05Mwgk_R4g/00-02-28.png)
![Screenshot at 06:40: The completed "Buddyfinder" website homepage, featuring a large image of a Golden Retriever and a search bar, showcasing the final product built using Jaspr.](https://ss.rapidrecap.app/screens/w05Mwgk_R4g/00-06-40.png)