angular / angular/angular-cli

Route-specific app-shell: prerendering dynamic parameterized pages

Đang mở
#29,425 4 bình luận 42 reaction 0 người được giao Xem trên GitHub
area: @angular/ssr feature feature: under consideration
Ngôn ngữ chính
TypeScript
Star
27k
Fork
11.8k
Merge trung bình
14 giờ 23 phút
Pull request đã merge (30 ngày)
162

Mô tả

### 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.

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu với tài liệu về hybrid-rendering của Angular cho các route được tham số hóa, sau đó kiểm tra cấu hình route prerender được trình bày trong app.routes.server.ts và ví dụ middleware phía server trong server.ts. So sánh hành vi posts/** được yêu cầu với cách tiếp cận getPrerenderParams hiện có; được xem là hoàn thành khi một skeleton prerender dành riêng cho route có thể phục vụ các tham số động tùy ý mà không cần middleware tùy chỉnh.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
build-system
Loại issue
Tính năng
Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
35/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.