Route-specific app-shell: prerendering dynamic parameterized pages
- 主要语言
- TypeScript
- 星标
- 27k
- 派生
- 11.8k
- 平均合并
- 14 小时 23 分钟
- 30 天内合并 PR
- 162
描述
### Which @angular/* package(s) are relevant/related to the feature request?
platform-server
### Description
We have a use case, where we would like to always show the same prerendered page skeleton/carcass on a route that has dynamic parameters.
Looking at the new Angular server documentation, I do not see such option https://angular.dev/guide/hybrid-rendering#parameterized-routes.
Basically we would like `posts/:id` to return a single prerendered page for any `:id` parameter.
This page would show a loading skeleton and would let the browser handle the exact `:id` and the logic related to it.
### Proposed solution
Add a wildcard `**` route option that would indicate to Angular that this prerendered page handles any dynamic route parameters.
These wildcards could be used as the dynamic parameter in the build time when prerendering happens. It would be the component's responsibility to correctly handle the `**` parameter and show some parameter-agnostic content (loaders/skeletons) that would then be prerendered by Angular and served by the server accordingly.
How it could look in `app.routes.server.ts`:
```
{
path: 'posts/**',
renderMode: RenderMode.Prerender
},
```
Excerpt from the imaginary `post.component.ts`:
```
private subscribeRouter() { // called in ngOnInit
this.activatedRoute.params
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe(params => {
const id: string = params.id;
if (id === '**') {
this.isCarcass = true; // post.component.html will render some skeleton/loader if isCarcass === true
} else {
this.getPost(id);
}
});
}
```
### Alternatives considered
I am currently considering:
1. Adding a "fake" route parameter that I would configure Angular to prerender.
2. This route would render the skeleton/carcass of the page as per my use case.
3. Serving the route myself in `server.ts` with a middleware that runs before any middleware generated by Angular CLI.
`app.routes.server.ts`:
```
{
path: 'posts/:id',
renderMode: RenderMode.Prerender,
getPrerenderParams(): Promise[]> {
return Promise.resolve(['carcass'].map(i => ({ id: i })));
}, // prerenders in browser/posts/carcass
},
```
`server.ts`:
```
// My new middleware
app.use(
'/posts/:id',
express.static(join(browserDistFolder, 'posts', 'carcass', 'index.html'), {
maxAge: '1y',
redirect: false,
}),
);
// Default generated by Angular
app.use(
express.static(browserDistFolder, {
maxAge: '1y',
index: false,
redirect: false,
}),
);
// Default generated by Angular
app.get('/**', (req, res, next) => {
angularApp
.handle(req)
.then(response =>
response ? writeResponseToNodeResponse(response, res) : next(),
)
.catch(next);
});
```
I have tested this approach and it works fine, however, it feels pretty hacky.
贡献指南
调研方向
先从 Angular 关于参数化路由的混合渲染文档开始,然后检查 app.routes.server.ts 中展示的预渲染路由配置,以及 server.ts 中的服务器中间件示例。将所请求的 posts/** 行为与现有的 getPrerenderParams 方法进行比较;当特定于路由的预渲染骨架能够在不使用自定义中间件的情况下服务任意动态参数时,即视为完成。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- angular, typescript
- 领域
- build-system
- Issue 类型
- 功能
- 难度
- 5/5
- 预计耗时
- 一周以上
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 35/100