我尝试了在Scully下运行SSG

本文是DMM集团2020年天窗日历的第20天文章。

总结

因为我自己有一个非常静态的Angular应用程序，所以我尝试引入了用于Angular的SSG工具Scully的故事。

环境

Angular CLI: 11.0.5
Angular: 11.0.5

在文档中指定了使用Angular v9.x.x或v10.x.x，但我选择将其引入到v11的应用程序中。
由于我的应用程序非常小，所以没有特别的问题。

引入

只需在 Angular 项目中添加 Scully 的 Skimatics，基本设置就完成了。

ng add @scullyio/init

scully.log已自动添加，但似乎不需要进行Git管理，因此已将其忽略到.gitignore中（类似问题已存在）。

发展

npx ng build --prod // Angular build
yarn scully // Scully start
yarn scully:serve // Scully serve

当构建Angular项目并运行Scully时，将会在./dist/static生成预渲染文件。

此外，当启动本地环境时，会启动两个服务器，分别托管Angular和Scully的构建结果，以便同时验证预渲染应用和SPA的运行情况。

当部署到生产环境时，需要将 ./dist/static 设置为主机。
由于我的应用程序使用 @angular/fire 进行firebase主机托管，因此我进行了firebase.json的配置更改。

"hosting": [
    {
      "target": "xxx",
      "public": "dist/static",
    　....
    }
]

由于使用 Puppeteer 进行渲染，Scully 不需要担心与浏览器环境无关的事情。
而且，由于提供了示例图纸，我们能够非常轻松地对现有的 SPA 应用进行预渲染！

动态路由

由于我的应用程序非常小，所以我也试着使用常见的动态路由预渲染方法。

假设存在以下动态路由（商品详细页面的示例）

const routes: Routes = [
  { path: 'book/:id', component: BookComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

如果希望对动态路由进行预渲染，需要在Scully的配置文件中添加设置。如果没有设置，则将被排除在预渲染的范围之外。

使用Scully提供的json插件，并修改了scully..config.ts文件。

Scully 在查看 Angular 的路由配置以检测要预渲染的目标，因此静态文件的数量会随着路由的增加而增加。
JSON 插件会在检查路由时从指定的 API 获取数据，并生成包含路由参数的路由列表。
这样一来，就可以对动态路由的页面进行预渲染了。

export const config: ScullyConfig = {
  ....
  routes: {
    '/book/:id': {
      type: 'json',
      id: {
        url: "https://some-endpoint",
        property: "id",
        resultsHandler: () => [{ id: 1 }, { id: 2 }, { id: 3 }], // テスト用にダミーデータを返した
      }
    }
  }
}

进行了Angular和Scully的构建设置后，再次构建会在./dist/static/book目录下生成了1、2、3三个目录以及各自的静态文件。

此外，Scully的路由文件也已经更新。

[{"route":"/"},{"route":"/book/1"},{"route":"/book/2"},{"route":"/book/3"}]

通过对ScullyRoutesService进行依赖注入，组件可以获取路由信息。

我认为自动将通过API获取的数据作为预渲染的目标是非常方便的，因为动态参数的情况往往有很多不同的模式。

据说还有其他Scully提供的插件，还可以创建自定义插件，可以根据每个应用程序的规格进行各种尝试。

总结

总之，我成功地简单地引入了SSG。
由于Scull软件刚从beta版升级到v1，未来可能还会有更新，所以我希望能继续关注它！