📑 Static Site Generation

SSG describes the process of generating all your website routes at build time. Different to SSR, this doesn't require a running server that generates your website on each request. Instead, you can run the jaspr generate command that generates and builds all the routes for your website and outputs only static files that can be deployed to any static hosting provider.

To use SSG with Jaspr, you need to setup your app the same way as for server-side rendering. Then instead of building the server as an executable, jaspr build will run your app locally and request each route to be rendered into a separate .html file.

Say you have a server-rendered app with the routes /, /about and /contact. Then running jaspr generate will output a index.html, about/index.html and contact/index.html file.

To make sure all pages are generated for your site, you need to tell Jaspr about the routes of your website.

Using jaspr_router#

It is recommended you use jaspr_router together with SSG, since it automatically renders all routes that you define.

The following shows a router that would render the above three routes:

Router(
  routes: [
    Route(path: '/', builder: (_, __) => HomePage()),
    Route(path: '/about', builder: (_, __) => AboutPage()),
    Route(path: '/contact', builder: (_, __) => ContactPage()),
  ]
);

Generating dynamic routes#

You may want to generate dynamic routes based on some data for your application.

Take for example a typical blog site, where each blog post has its own route, e.g. /posts/{postId}, and you want to render these as separate pages when running jaspr generate. Normally you could use routes with path parameters for this, however for static-site generation, path parameters are not supported, since all routes need to be resolvable when initializing the router.

Instead, you need to add a route for each page you want generated:

Router(
  routes: [
    for (var post in posts)
      Route(path: '/posts/${post.id}', ...),
  ],
);

Here, the posts list may be loaded from a database before the component builds. Check the Loading Data on the Server docs on how to do this.

Manual usage#

If you want to set this up manually, you need to call ServerApp.requestRouteGeneration('/my_route'); for any of your routes you want to generate.

Since ServerApp is only available through the package:jaspr/server.dart import, you need to make sure this is only part of your server code and not the client.

The method should be called during the initial build of your app, so putting it into initState() of your root component is a good choice.