angular / angular/angular-cli

Route-specific app-shell: prerendering dynamic parameterized pages

未關閉
#29,425 4 則留言 42 個 reaction 已指派 0 人 在 GitHub 檢視
area: @angular/ssr feature feature: under consideration
主要語言
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

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。