Rendering Modes
Jaspr comes with three different rendering modes - static, server and client.
Jaspr is a full-stack web framework, meaning it can run both on the server and the client. Depending on what you want to build, you can choose how your app should be built and executed using Jaspr.
Therefore, Jaspr supports the following three rendering modes:
- static (also known as static-site-generation)
- server (also known as server-side-rendering)
- client
Each mode is explained in detail below. The following table gives a quick overview:
| static | server | client | |
|---|---|---|---|
| No HTML/CSS | ✅ | ✅ | ❌ |
| Pre-Rendering | ✅ (at build time) | ✅ (at request time) | ❌ |
| Client-Side Interactivity | ✅ | ✅ | ✅ |
| Needs Server | ❌ | ✅ | ❌ |
| Static Deployment | ✅ | ❌ | ✅ |
| Custom Backend | ❌ | ✅ | ❌ |
Static Mode
With this mode, Jaspr will generate a fully static site when building your project that you can host at any common website hosting service. You can write server-side code to pre-render components and pages at built time, outputting clean HTML and CSS to deploy anywhere. Additionally, you can set up hydration on the client in order to make your site interactive.
Even if you want to build a Single Page Application this can be a good choice
over 'client' mode since you don't need a index.html or styles.css and
instead can write everything in Dart and let Jaspr do the rendering to actual
HTML/CSS files during build.
To lean more about generating static sites with Jaspr, check out the Static Sites guide.
If you want to build a content-driven site (like a blog or documentation site) check out Jaspr Content.
Server Mode
In this mode Jaspr runs and builds a server application that pre-renders your components for each incoming request. You can use either Jaspr's inbuilt webserver or choose to integrate it into your favorite Dart backend framework. Additionally, you can set up hydration on the client in order to make your site interactive.
To deploy your site, you either need a service that supports Dart deployments or otherwise bundle your application with e.g. Docker. See the Deploying guide for more information.
During server-side rendering, you can access the request url, headers and cookies through context extensions (e.g. context.url). You can also modify the response headers, cookies and status code.