Skip to main content
Jaspr supports three rendering modes that determine how and when your application is rendered. Each mode has different characteristics and is suited for different use cases.

​
Rendering Modes

Jaspr provides three distinct rendering modes:

Server-Side Rendering

Render pages dynamically on the server for each request

Client-Side Rendering

Render and hydrate components in the browser

Static Site Generation

Pre-render all pages at build time

​
Choosing a Rendering Mode

The rendering mode is configured in your jaspr_options.yaml file: 
mode: server
Client-side rendering is automatically included when you use the @client annotation on components, regardless of your primary rendering mode.

​
Mode Comparison

FeatureServer (SSR)Static (SSG)Client (CSR)
Build OutputExecutable + static assetsHTML files + static assetsStatic assets only
Server RequiredYesNoNo
Dynamic ContentFull supportBuild-time onlyFull support
SEOExcellentExcellentLimited
PerformanceFast TTFBFastest TTFBSlower TTFB
ScalabilityRequires server resourcesHighly scalableHighly scalable
Use CaseDynamic apps, APIsBlogs, docs, marketingSPAs, dashboards

​
Server-Side Rendering (SSR)

Server-side rendering generates HTML on the server for each incoming request. This mode is ideal for:
  • Dynamic applications with frequently changing data
  • User-specific content that varies per request
  • SEO-critical pages that need fresh content
  • Applications with APIs that need server-side logic
import 'package:jaspr/server.dart';

void main() {
  Jaspr.initializeApp();
  
  runApp(App());
}
Deployment: 
jaspr build
# Outputs: build/jaspr/app (executable)
#          build/jaspr/web/ (static assets)

​
Static Site Generation (SSG)

Static site generation pre-renders all pages at build time. This mode is perfect for:
  • Content-heavy sites like blogs and documentation
  • Marketing pages with infrequent updates
  • High-traffic sites that need maximum performance
  • Sites deployed to CDNs without server infrastructure
import 'package:jaspr/server.dart';
import 'package:jaspr_router/jaspr_router.dart';

void main() {
  Jaspr.initializeApp();
  
  runApp(Document(
    body: Router(routes: [
      Route(path: '/', builder: (_, __) => HomePage()),
      Route(path: '/about', builder: (_, __) => AboutPage()),
      Route(path: '/contact', builder: (_, __) => ContactPage()),
    ]),
  ));
}
Deployment: 
jaspr build
# Outputs: build/jaspr/index.html
#          build/jaspr/about/index.html
#          build/jaspr/contact/index.html
#          build/jaspr/main.dart.js (and other assets)

​
Client-Side Rendering (CSR)

Client-side rendering happens in the browser after initial page load. In Jaspr, you enable CSR for specific components using the @client annotation: 
import 'package:jaspr/jaspr.dart';

@client
class InteractiveCounter extends StatefulComponent {
  @override
  State<InteractiveCounter> createState() => _InteractiveCounterState();
}

class _InteractiveCounterState extends State<InteractiveCounter> {
  int count = 0;
  
  @override
  Component build(BuildContext context) {
    return div([
      p([.text('Count: $count')]),
      button(
        onClick: () => setState(() => count++),
        [.text('Increment')],
      ),
    ]);
  }
}
Client components are automatically hydrated when the page loads, preserving the server-rendered HTML and adding interactivity.

​
Hybrid Rendering

Jaspr’s unique strength is hybrid rendering - combining server and client rendering in the same application: 
import 'package:jaspr/server.dart';

class ProductPage extends StatelessComponent {
  @override
  Component build(BuildContext context) {
    return div([
      // Server-rendered content (SEO-friendly)
      h1([.text('Product Details')]),
      ProductInfo(),
      
      // Client-rendered interactive component
      AddToCartButton(),
      
      // Client-rendered reviews with real-time updates
      ProductReviews(),
    ]);
  }
}

@client
class AddToCartButton extends StatelessComponent {
  // Interactive button with client-side state
}

@client
class ProductReviews extends StatelessComponent {
  // Real-time reviews with WebSocket connection
}

​
Next Steps

1

Learn Server-Side Rendering

Dive deep into SSR configuration and server-specific APIsServer-Side Rendering →
2

Understand Client-Side Hydration

Learn how to create interactive client componentsClient-Side Rendering →
3

Build Static Sites

Generate fast, static sites with SSGStatic Site Generation →

Build docs developers (and LLMs) love

Get started for freeTalk to us