angular / angular/angular-cli

Route-specific app-shell: prerendering dynamic parameterized pages

Abierto
#29,425 4 comentarios 42 reacciones 0 asignados Ver en GitHub
area: @angular/ssr feature feature: under consideration
Lenguaje dominante
TypeScript
Estrellas
27k
Forks
11.8k
Merge medio
14 h 23 min
PR fusionados (30 d)
162

Descripción

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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Empieza por la documentación de Angular sobre renderizado híbrido para rutas parametrizadas y, después, inspecciona la configuración de rutas de prerenderizado mostrada en app.routes.server.ts y el ejemplo de middleware del servidor en server.ts. Compara el comportamiento solicitado para posts/** con el enfoque existente de getPrerenderParams; se considera terminado cuando un esqueleto prerenderizado específico de la ruta puede servir parámetros dinámicos arbitrarios sin middleware personalizado.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
build-system
Tipo de issue
Nueva funcionalidad
Dificultad
5/5
Tiempo estimado
Más de una semana
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.