angular / angular/angular-cli

Route-specific app-shell: prerendering dynamic parameterized pages

Aperta
#29,425 4 commenti 42 reazioni 0 assegnatari Vedi su GitHub
area: @angular/ssr feature feature: under consideration
Lingua principale
TypeScript
Stelle
27k
Fork
11.8k
Merge medio
14h 23m
PR unite (30g)
162

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia dalla documentazione di Angular sul rendering ibrido per le route parametrizzate, quindi esamina la configurazione delle route di prerendering mostrata in app.routes.server.ts e l'esempio di middleware del server in server.ts. Confronta il comportamento richiesto per posts/** con l'approccio esistente getPrerenderParams; il lavoro è completato quando uno scheletro prerenderizzato specifico della route può servire parametri dinamici arbitrari senza middleware personalizzato.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
build-system
Tipo di issue
Funzionalità
Difficoltà
5/5
Tempo stimato
Più di una settimana
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.