docs: update SSR doc to reflect version 17 by alan-agius4 · Pull Request #52398 · angular/angular

alan-agius4 · 2023-10-26T15:04:59Z

Changes to SSR doc

josephperrott

LGTM

Reviewed-for: dev-infra

AndrewKushnir · 2023-10-26T18:34:52Z

aio/content/examples/ssr/server.ts

+  server.set('views', browserDistFolder);
+
+  // #docregion data-request
+  // TODO: implement data requests securely


@alan-agius4 just wanted to confirm whether this TODO is intentional.

This was already there

AndrewKushnir · 2023-10-26T18:36:08Z

aio/content/examples/ssr/src/app/app.config.ts

+     // TODO: Enable using Fetch API when disabling `HttpClientInMemoryWebApiModule`.
+    provideHttpClient(/* withFetch()*/ ),


Should we followup with a fix for HttpClientInMemoryWebApiModule?

cc @JeanMeche

AndrewKushnir · 2023-10-26T18:38:19Z

aio/content/guide/hydration.md

 ## Why is hydration important?

-Hydration improves application performance by avoiding extra work to re-create DOM nodes. Instead, Angular tries to match existing DOM elements to the applications structure at runtime and reuses DOM nodes when possible. This results in a performance improvement that can be measured using [Core Web Vitals (CWV)](https://web.dev/learn-core-web-vitals/) statistics, such as reducing the First Input Delay ([FID](https://web.dev/fid/)) and Largest Contentful Paint ([LCP](https://web.dev/lcp/)), as well as Cumulative Layout Shift ([CLS](https://web.dev/cls/)). Improving these numbers also affects things like SEO performance.
+Hydration improves application performance by avoiding extra work to re-create DOM nodes. Instead, Angular tries to match existing DOM elements to the applications structure at runtime and reuses DOM nodes when possible. This results in a performance improvement that can be measured using [Core Web Vitals (CWV)](https://web.dev/learn-core-web-vitals/) statistics, such as reducing the First-contentful paint [FCP](https://developer.chrome.com/en/docs/lighthouse/performance/first-contentful-paint/) and Largest Contentful Paint ([LCP](https://web.dev/lcp/)), as well as Cumulative Layout Shift ([CLS](https://web.dev/cls/)). Improving these numbers also affects things like SEO performance.


Suggested change

Hydration improves application performance by avoiding extra work to re-create DOM nodes. Instead, Angular tries to match existing DOM elements to the applications structure at runtime and reuses DOM nodes when possible. This results in a performance improvement that can be measured using [Core Web Vitals (CWV)](https://web.dev/learn-core-web-vitals/) statistics, such as reducing the First-contentful paint [FCP](https://developer.chrome.com/en/docs/lighthouse/performance/first-contentful-paint/) and Largest Contentful Paint ([LCP](https://web.dev/lcp/)), as well as Cumulative Layout Shift ([CLS](https://web.dev/cls/)). Improving these numbers also affects things like SEO performance.

Hydration improves application performance by avoiding extra work to re-create DOM nodes. Instead, Angular tries to match existing DOM elements to the applications structure at runtime and reuses DOM nodes when possible. This results in a performance improvement that can be measured using [Core Web Vitals (CWV)](https://web.dev/learn-core-web-vitals/) statistics, such as reducing the First Contentful Paint [FCP](https://developer.chrome.com/en/docs/lighthouse/performance/first-contentful-paint/) and Largest Contentful Paint ([LCP](https://web.dev/lcp/)), as well as Cumulative Layout Shift ([CLS](https://web.dev/cls/)). Improving these numbers also affects things like SEO performance.

AndrewKushnir · 2023-10-26T18:42:09Z

aio/content/guide/ssr.md

+After starting the dev-server, open your web browser and visit `http://localhost:4200`.
+You should see the familiar Tour of Heroes dashboard page.
+
+Navigation using `routerLinks` works correctly because they use the built-in anchor \(`<a>`\) elements.


Suggested change

Navigation using `routerLinks` works correctly because they use the built-in anchor \(`<a>`\) elements.

Navigation using `routerLinks` works correctly because they use standard anchor \(`<a>`\) elements.

AndrewKushnir · 2023-10-26T18:46:28Z

aio/content/guide/ssr.md

+You can seamlessly move from the Dashboard to the Heroes page and back.
+Additionally, clicking on a hero within the Dashboard page will display its Details page.
+
+If you throttle your network speed so that the client-side scripts take longer to download \(instructions following\), you'll notice:
+
+- You can't add or delete a hero
+- The search box on the Dashboard page is ignored
+- The _Back_ and _Save_ buttons on the Details page don't work
+
+The transition from the server-rendered application to the client application happens quickly on a development machine, but you should always test your applications in real-world scenarios.
+
+You can simulate a slower network to see the transition more clearly as follows:
+
+1. Open the Chrome Dev Tools and go to the Network tab.
+1. Find the [Network Throttling](https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#throttling) dropdown on the far right of the menu bar.
+1. Try one of the "3G" speeds.
+
+The server-rendered application still launches quickly but the full client application might take seconds to load.


I'd propose dropping this altogether. It's a bit confusing that it's a part of the tutorial steps.

This is a pre-existing content, but I think we can drop this part.

+1 to dropping. If the intent is to demonstrate that SSR is working, maybe point people at view source instead (or the network response for index.html).

If we really want to keep this, I suggest at least swapping the order. Simulate the slower network first and then talk about the effects on the application. Otherwise it's tricky to understand what's trying to be communicated here.

AndrewKushnir · 2023-10-26T19:08:30Z

Presubmit.

AndrewKushnir · 2023-10-26T19:10:06Z

Caretaker note: there are some minor comments, but we'll address them in a followup PR. This PR is ready for merge.

(the presubmit is not required, there are only docs-related changes)

jessicajaniuk

LGTM

I think we'll want to revisit after v17 though and see what really should just be rewritten.

alxhub · 2023-10-26T19:31:04Z

This PR was merged into the repository by commit cb8a741.

Changes to SSR doc PR Close #52398

dgp1130

Lots of minor suggestions. I don't think anything here is blocking I just wanted to write them down as I saw them. We can follow up on any of these after v17 is necessary to hit the freeze.

dgp1130 · 2023-10-26T19:20:01Z

aio/content/guide/glossary.md

 When integrated with an app, Universal generates and serves static pages on the server in response to requests from browsers.
 The initial static page serves as a fast-loading placeholder while the full application is being prepared for normal execution in the browser.
-To learn more, see [Angular Universal: server-side rendering][AioGuideUniversal].
+To learn more, see [Angular server-side rendering][AioGuideSSR].


I think we need to rewrite this for a Universal-less world. Maybe something like:

Server-side rendering

A strategy for rendering application HTML on the server during the initial page load. A server-side rendered initial page serves as a fast-loading placeholder while the full application being prepared for normal execution in the browser. To learn more, see [Angular server-side rendering][AioGuideSSR].

dgp1130 · 2023-10-26T19:25:16Z

aio/content/guide/glossary.md

 To avoid this error, a [lifecycle hook][AioGuideLifecycleHooks] method that seeks to make such a change should trigger a new change detection run.
 The new run follows the same direction as before, but succeeds in picking up the new value.

-## Universal


Glad to see we're updating this to favor "SSR", however I think the glossary is the one place we'd still want to leave an artifact of "Universal" just for historical reasons (like "Ivy" and "View Engine"). Could be something like:

Universal

A community-driven project for supporting server-side rendering and static-site generation in Angular prior to version 17. Starting at v17, Universal features were folded into Angular's built-in SSR support and Universal is no longer needed.

aio/content/guide/ssr.md

dgp1130 · 2023-10-26T19:36:55Z

aio/content/guide/ssr.md

+You can seamlessly move from the Dashboard to the Heroes page and back.
+Additionally, clicking on a hero within the Dashboard page will display its Details page.
+
+If you throttle your network speed so that the client-side scripts take longer to download \(instructions following\), you'll notice:
+
+- You can't add or delete a hero
+- The search box on the Dashboard page is ignored
+- The _Back_ and _Save_ buttons on the Details page don't work
+
+The transition from the server-rendered application to the client application happens quickly on a development machine, but you should always test your applications in real-world scenarios.
+
+You can simulate a slower network to see the transition more clearly as follows:
+
+1. Open the Chrome Dev Tools and go to the Network tab.
+1. Find the [Network Throttling](https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#throttling) dropdown on the far right of the menu bar.
+1. Try one of the "3G" speeds.
+
+The server-rendered application still launches quickly but the full client application might take seconds to load.


+1 to dropping. If the intent is to demonstrate that SSR is working, maybe point people at view source instead (or the network response for index.html).

If we really want to keep this, I suggest at least swapping the order. Simulate the slower network first and then talk about the effects on the application. Otherwise it's tricky to understand what's trying to be communicated here.

aio/content/guide/ssr.md

dgp1130 · 2023-10-26T19:51:12Z

aio/content/guide/ssr.md

+
+| Properties            | Details                                                                                                                | Default Value |
+| --------------------- | ---------------------------------------------------------------------------------------------------------------------- | ------------- |
+| _`bootstrap`_         | A method that when invoked returns a promise that returns an `ApplicationRef` instance once resolved or an `NgModule`. |               |


Suggestion: "returns a promise that returns an X instance once resolved" is pretty wordy. Maybe we can do something like:

A method which resolves an X

A method which returns a promise which resolves to an X

A method which returns a Promise<X>.

As written, it's also unclear if this means Promise<ApplicationRef> | NgModule or Promise<ApplicationRef | NgModule>. It sounds like the former in the doc, but I think it's actually the latter?

dgp1130 · 2023-10-26T19:51:53Z

aio/content/guide/ssr.md

+
+| Properties                   | Details                                                                                                                | Default Value |
+| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------- | ------------- |
+| _`bootstrap`_                | A method that when invoked returns a promise that returns an `ApplicationRef` instance once resolved or an `NgModule`. |               |


Question: Do we accept bootstrap in both the constructor and the render function?

aio/content/guide/ssr.md

AndrewKushnir · 2023-10-26T23:51:45Z

@alan-agius4 FYI, we've updated the ssr.md to address all the feedback in #52408.

zip-fa · 2023-10-28T06:16:27Z

@alan-agius4 will you cover how to correctly run ssr server for multiple i18n? We need working examples :)

angular-automatic-lock-bot · 2023-11-28T00:08:40Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Changes to SSR doc PR Close angular#52398

alan-agius4 requested review from AndrewKushnir, dgp1130 and jessicajaniuk October 26, 2023 15:05

angular-robot bot added the area: docs label Oct 26, 2023

ngbot bot added this to the Backlog milestone Oct 26, 2023

alan-agius4 added state: blocked target: rc This PR is targeted for the next release-candidate labels Oct 26, 2023

alan-agius4 marked this pull request as ready for review October 26, 2023 15:06

pullapprove bot requested review from josephperrott and mgechev October 26, 2023 15:06

alan-agius4 mentioned this pull request Oct 26, 2023

docs: update SSR doc to reflect version 17 #52395

Closed

alan-agius4 force-pushed the ssr-docs-update branch 2 times, most recently from 0ba0214 to ddccbfd Compare October 26, 2023 15:23

alan-agius4 removed the state: blocked label Oct 26, 2023

alan-agius4 force-pushed the ssr-docs-update branch 2 times, most recently from 264785b to 9be2db3 Compare October 26, 2023 16:03

docs: update SSR doc to reflect version 17

debba30

Changes to SSR doc

alan-agius4 force-pushed the ssr-docs-update branch from 9be2db3 to debba30 Compare October 26, 2023 16:18

alan-agius4 added the action: review The PR is still awaiting reviews from at least one requested reviewer label Oct 26, 2023

josephperrott approved these changes Oct 26, 2023

View reviewed changes

alan-agius4 modified the milestones: Backlog, v17-final Oct 26, 2023

AndrewKushnir approved these changes Oct 26, 2023

View reviewed changes

AndrewKushnir removed the action: presubmit The PR is in need of a google3 presubmit label Oct 26, 2023

jessicajaniuk approved these changes Oct 26, 2023

View reviewed changes

alxhub removed request for dgp1130 and mgechev October 26, 2023 19:28

pullapprove bot requested a review from mgechev October 26, 2023 19:28

alxhub pushed a commit that referenced this pull request Oct 26, 2023

docs: update SSR doc to reflect version 17 (#52398)

da1b71e

Changes to SSR doc PR Close #52398

alxhub closed this in cb8a741 Oct 26, 2023

alan-agius4 deleted the ssr-docs-update branch October 26, 2023 19:35

dgp1130 approved these changes Oct 26, 2023

View reviewed changes

JeanMeche mentioned this pull request Oct 27, 2023

fix(http): allow to combine FetchBackend and InMemory services in the providers #52425

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Nov 28, 2023

ChellappanRajan pushed a commit to ChellappanRajan/angular that referenced this pull request Jan 23, 2024

docs: update SSR doc to reflect version 17 (angular#52398)

4fad6b8

Changes to SSR doc PR Close angular#52398

		// TODO: Enable using Fetch API when disabling `HttpClientInMemoryWebApiModule`.
		provideHttpClient(/* withFetch()*/ ),

	Navigation using `routerLinks` works correctly because they use the built-in anchor \(`<a>`\) elements.
	Navigation using `routerLinks` works correctly because they use standard anchor \(`<a>`\) elements.

Conversation

alan-agius4 commented Oct 26, 2023

Uh oh!

josephperrott left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AndrewKushnir commented Oct 26, 2023

Uh oh!

AndrewKushnir commented Oct 26, 2023

Uh oh!

jessicajaniuk left a comment

Choose a reason for hiding this comment

Uh oh!

alxhub commented Oct 26, 2023

Uh oh!

dgp1130 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Server-side rendering

Uh oh!

Choose a reason for hiding this comment

Universal

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

AndrewKushnir commented Oct 26, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

zip-fa commented Oct 28, 2023

Uh oh!

angular-automatic-lock-bot bot commented Nov 28, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

AndrewKushnir commented Oct 26, 2023 •

edited

Loading