docs: add guide for route rendering strategies #62859
Conversation
|
Deployed adev-preview for b181764 to: https://ng-dev-previews-fw--pr-angular-angular-62859-adev-prev-p8j9bpq7.web.app Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt. |
| | **SEO** | Limited - slower indexing, may miss dynamic content | | ||
| | **Initial load** | Slower - requires JavaScript download and execution | | ||
| | **Interactivity** | Immediate once loaded | | ||
| | **Server requirements** | Minimal - only serves static assets | |
There was a problem hiding this comment.
I wouldn't say that. The server needs to be configures to serve the index.html page for all client-side routes.
|
|
||
| This generates static HTML files for each blog post: `blog/first-post/index.html`, `blog/second-post/index.html`, etc. | ||
|
|
||
| ### SSG characteristics |
There was a problem hiding this comment.
A section like the one in CSR starting with "All these routes automatically use CSR. Here's what happens:" would be welcome. It's critical, IMHO, to understand that once the initial page is loaded from the server, everything happens like in a CSR application (routing, http requests, etc.)
|
|
||
| ### How SSR works | ||
|
|
||
| With SSR, Angular runs on the server for each request: |
There was a problem hiding this comment.
No. Only for the first request which loads the application. After that, everything happens client-side.
| | Aspect | Details | | ||
| | :---------------------- | :-------------------------------------------------- | | ||
| | **SEO** | Excellent - full HTML content available to crawlers | | ||
| | **Initial load** | Fast - content visible immediately | |
There was a problem hiding this comment.
Slower than SSG though, since the server needs to generate the HTML on the fly, and thus get data from external resources
| template: ` | ||
| <header>Static header content</header> | ||
|
|
||
| @defer (on interaction) { |
There was a problem hiding this comment.
It could be hydrate on interaction. Otherwise the widget is loaded and displayed only when interacting with the placeholder.
|
|
||
| - **CSR**: Full application bundle loaded upfront | ||
| - **SSR**: Initial bundle can be smaller with code splitting | ||
| - **SSG**: Optimal with incremental hydration and `@defer` |
There was a problem hiding this comment.
I might be missing something, but I don't see how SSR/SSG affects the bundle size. What affects the bundle size is lazy loading, isn't it? And lazy loading isn't affected by SSR/SSG.
Deferred hydration I guess can impact bundle size, but I don't see why it would be different between SSR and SSG.
This section is too light to be really helpful, IMHO. I would skip it.
|
|
||
| // Client-side routes (CSR) | ||
| 'Cache-Control': 'public, max-age=86400' | ||
| ``` |
There was a problem hiding this comment.
Here as well, this section is too light to be helpful, IMHO. What are we caching here? Where would this be configured and how?
Besides, it's misleading. Static assets (like JS bundles) are static whether we use SSG SSR or CSR. ANd HTML pages, even when generated using SSG, change over time.
| 'Cache-Control': 'public, max-age=86400' | ||
| ``` | ||
|
|
||
| ### Resource loading optimization |
There was a problem hiding this comment.
This, IMHO, is off-topic. And I wouldn't blindly advise to preload all modules.
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
There is a new route rendering strategy guide.
Does this PR introduce a breaking change?
Other information