slow server response time in dynamic routes when using Angular SSR about angular HOT 8 CLOSED

Ok we are trying to create a minimal reproduction to report an issue.

from angular.

Without a reproduction, it will be impossible to diagnose and verify this report. For example, we don't know what the difference in the two routes is - perhaps the route with a slug is waiting on a database call to load.

from angular.

Without a reproduction, it will be impossible to diagnose and verify this report. For example, we don't know what the difference in the two routes is - perhaps the route with a slug is waiting on a database call to load.

You can find an example in blog section of this website:

parsouatravel.com/blog

Here are the codes of the blog.routes.ts file:

export default [
    { path: '', component: BlogMainComponent },
    { path: 'aurora-borealis', component: BlogArticleComponent, data: { slug: 'aurora-borealis' } },
    { path: 'scandinavia-nordics-of-europe', component: BlogArticleComponent, data: { slug: 'scandinavia-nordics-of-europe' } },
    { path: 'travel-without-a-visa', component: BlogArticleComponent, data: { slug: 'travel-without-a-visa' } },
    { path: 'finnish-foods', component: BlogArticleComponent, data: { slug: 'finnish-foods' } },
    { path: 'sultan-begum-mansion', component: BlogArticleComponent, data: { slug: 'sultan-begum-mansion' } },
    { path: 'french-croissants-and-austrian-roots', component: BlogArticleComponent, data: { slug: 'french-croissants-and-austrian-roots' } },
    { path: 'disneyland', component: BlogArticleComponent, data: { slug: 'disneyland' } },
    { path: 'blast-off-barcelona-beaches', component: BlogArticleComponent, data: { slug: 'blast-off-barcelona-beaches' } },
    { path: 'charles-bridge', component: BlogArticleComponent, data: { slug: 'charles-bridge' } },
    **{ path: ':slug', component: BlogArticleComponent },**
    { path: 'category/:category', component: BlogCategoryComponent },
] satisfies Route[];

In order to prevent high-traffic pages from loading slowly, I had to manually enter some slugs, but I left the rest dynamic.

I passed the parameter for the API call in manual routes through data. This is a part of the code from the blog-article.component.ts file:

    const data = this.activatedRoute.snapshot.data['slug'];
    if (data) {
      this.slug = data;
      this.init();
    } else {
      this.activatedRoute.params.subscribe(params => {
        if (params['slug']) {
          this.slug = params['slug'];
          this.init();
        }
      });
    }

The initial document load time for this link parsouatravel.com/blog/aurora-borealis (the route I entered manually) is only 50 ms.

However, the initial document load time for this link that I did not enter manually parsouatravel.com/blog/the-lion-s-rock is 1.03 s

The speed of retrieving data from the database and API call does not make much difference.

from angular.

@majidkhaleghian, kindly provide a runnable minimal reproduction.

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

from angular.

Closing due to lack of a runnable reproduction.

If the problem still exists in your application, please open a new issue and follow the instructions in the issue template.

from angular.

@majidkhaleghian Did you find a solution for your issue? We're experiencing the exact same delay using the "**" wildcard route for the same usecase as yours (loading dynamic slugs for a cms).

from angular.

@majidkhaleghian Did you find a solution for your issue? We're experiencing the exact same delay using the "**" wildcard route for the same usecase as yours (loading dynamic slugs for a cms).

Unfortunately, I couldn't find a solution.

The only way to eliminate the delay is to define all routes statically. This can be done either in the blog.routes.ts file or through routes.txt.

from angular.

Likely your are using prerendering for non-parameterized routes.
You can find more information about this issue at: #55529 (comment)

from angular.