๐ 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 generate
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.html
and contact.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.