Skip to content

Bug in @placeholder block causing delay in server-side rendering #55475

@manzonif

Description

@manzonif

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

platform-server

Is this a regression?

No

Description

When setting the minimum parameter in the @Placeholder block, the setTimeout function appears to be executed even on the server side, causing a delay in page rendering.

Screenshot 2024-04-23 071832

Explanation:

Upon investigation, I found that the server logs indicate a timeout after the exact time specified in the minimum parameter.
On the server side, it should be rendered immediately, without any timeout.

Request:

I would like to express my appreciation to the team for the excellent work done so far. Additionally, I would like to take this opportunity to raise some concerns.

Since March 12 of this year, Core Web Vitals has included the Interaction to Next Paint (INP) metric as a parameter for performance evaluation. I have found the @defer block very useful in reducing Long Tasks during page rendering, significantly reducing the INP of my Web application.

However, I encountered an issue where components included in a @defer block are ignored on the server side. This, in my opinion, limits its usefulness, especially for components that are in the viewport during page load or for components containing text that is relevant for SEO.

From what I understand, the solution to this problem could be Partial Hydration, which was somewhat hinted at in the RFC: Deferred Loading from July 2023.

Therefore, I kindly request clarification on whether my understanding is correct and if there is an alternative way to reduce a Long Task, caused by rendering multiple components, without using the @defer block.

Thank you.

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: 18.0.0-next.2
Node: 20.11.1
Package Manager: yarn 1.22.21
OS: win32 x64

Angular: 18.0.0-next.4
... animations, cdk, common, compiler, compiler-cli, core, forms
... google-maps, language-service, localize, material
... platform-browser, platform-browser-dynamic, platform-server
... router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1800.0-next.2
@angular-devkit/build-angular     18.0.0-next.2
@angular-devkit/build-optimizer   0.1302.1
@angular-devkit/core              18.0.0-next.2
@angular-devkit/schematics        17.1.2
@angular/cli                      18.0.0-next.2
@angular/ssr                      18.0.0-next.2
@schematics/angular               18.0.0-next.2
rxjs                              7.8.1
typescript                        5.4.5
zone.js                           0.14.4

Anything else?

No response

Metadata

Metadata

Assignees

Labels

P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: coreIssues related to the framework runtimecore: deferIssues related to @defer blocks.

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions