slow server response time in dynamic routes when using Angular SSR

[majidkhaleghian]

Which @angular/* package(s) are the source of the bug?

platform-server

Is this a regression?

Yes

Description

When I used Angular SSR, some pages were loading with a very high delay. At first, I couldn't figure out where the problem was and I did a lot of checking.

Finally, I realized that the delay occurs when a route has a param. For example, the initial fetch of other pages took 10ms, but pages with a route with a param took close to 1s.

Suppose we have a blog and the route is as follows:

blog/:slug

In this case, for example, the page blog/my-article will load with a delay of close to 1s..

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 17.2.1
Node: 20.10.0
Package Manager: npm 10.2.3
OS: win32 x64

Anything else?

No response

[alxhub]

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.

[majidkhaleghian]

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.

[alan-agius4]

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

[atscott]

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.

[michaelhunziker]

@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).

[majidkhaleghian]

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

[michaelhunziker]

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

[alan-agius4]

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