Skip to content

Commit 8e04a47

Browse files
lacolacolacolaco
authored
feat(docs): translate rendering strategies documentation to Japanese (#1061)
1 parent 310c807 commit 8e04a47

File tree

2 files changed

+227
-88
lines changed

2 files changed

+227
-88
lines changed

‎adev-ja/src/content/guide/routing/rendering-strategies.en.md

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
# Rendering strategies in Angular
2+
3+
This guide helps you choose the right rendering strategy for different parts of your Angular application.
4+
5+
## What are rendering strategies?
6+
7+
Rendering strategies determine when and where your Angular application's HTML content is generated. Each strategy offers different trade-offs between initial page load performance, interactivity, SEO capabilities, and server resource usage.
8+
9+
Angular supports three primary rendering strategies:
10+
11+
- **Client-Side Rendering (CSR)** - Content is rendered entirely in the browser
12+
- **Static Site Generation (SSG/Prerendering)** - Content is pre-rendered at build time
13+
- **Server-Side Rendering (SSR)** - Content is rendered on the server for the initial request for a route
14+
15+
## Client-Side Rendering (CSR)
16+
17+
**CSR is Angular's default.** Content renders entirely in the browser after JavaScript loads.
18+
19+
### When to use CSR
20+
21+
✅ It can be a good fit for:
22+
23+
- Interactive applications (dashboards, admin panels)
24+
- Real-time applications
25+
- Internal tools where SEO doesn't matter
26+
- Single-page applications with complex client-side state
27+
28+
❌ When possible, consider avoiding it for:
29+
30+
- Public-facing content that needs SEO
31+
- Pages where initial load performance is critical
32+
33+
### CSR trade-offs
34+
35+
| Aspect | Impact |
36+
| :---------------- | :------------------------------------------------------- |
37+
| **SEO** | Poor - content not visible to crawlers until JS executes |
38+
| **Initial load** | Slower - must download and execute JavaScript first |
39+
| **Interactivity** | Immediate once loaded |
40+
| **Server needs** | Minimal outside of some configuration |
41+
| **Complexity** | Simplest because it works with minimum configuration |
42+
43+
## Static Site Generation (SSG/Prerendering)
44+
45+
**SSG pre-renders pages at build time** into static HTML files. The server sends pre-built HTML for the initial page load. After hydration, your app runs entirely in the browser like a traditional SPA - subsequent navigation, route changes, and API calls all happen client-side without server rendering.
46+
47+
### When to use SSG
48+
49+
✅ It can be a good fit for:
50+
51+
- Marketing pages and landing pages
52+
- Blog posts and documentation
53+
- Product catalogs with stable content
54+
- Content that doesn't change per-user
55+
56+
❌ When possible, consider avoiding it for:
57+
58+
- User-specific content
59+
- Frequently changing data
60+
- Real-time information
61+
62+
### SSG trade-offs
63+
64+
| Aspect | Impact |
65+
| :------------------ | :------------------------------------------ |
66+
| **SEO** | Excellent - full HTML available immediately |
67+
| **Initial load** | Fastest - pre-generated HTML |
68+
| **Interactivity** | After hydration completes |
69+
| **Server needs** | None for serving (CDN-friendly) |
70+
| **Build time** | Longer - generates all pages upfront |
71+
| **Content updates** | Requires rebuild and redeploy |
72+
73+
📖 **Implementation:** See [Customizing build-time prerendering](guide/ssr#customizing-build-time-prerendering-ssg) in the SSR guide.
74+
75+
## Server-Side Rendering (SSR)
76+
77+
**SSR generates HTML on the server for the initial request for a route**, providing dynamic content with good SEO. The server renders HTML and sends it to the client.
78+
79+
Once the client renders the page, Angular [hydrates](/guide/hydration#what-is-hydration) the app and it then runs entirely in the browser like a traditional SPA - subsequent navigation, route changes, and API calls all happen client-side without additional server rendering.
80+
81+
### When to use SSR
82+
83+
✅ It can be a good fit for:
84+
85+
- E-commerce product pages (dynamic pricing/inventory)
86+
- News sites and social media feeds
87+
- Personalized content that changes frequently
88+
89+
❌ When possible, consider avoiding it for:
90+
91+
- Static content (use SSG instead)
92+
- When server costs are a concern
93+
94+
### SSR trade-offs
95+
96+
| Aspect | Impact |
97+
| :------------------ | :-------------------------------------------------- |
98+
| **SEO** | Excellent - full HTML for crawlers |
99+
| **Initial load** | Fast - immediate content visibility |
100+
| **Interactivity** | Delayed until hydration |
101+
| **Server needs** | Requires server |
102+
| **Personalization** | Full access to user context |
103+
| **Server costs** | Higher - renders on the initial request for a route |
104+
105+
📖 **Implementation:** See [Server routing](guide/ssr#server-routing) and [Authoring server-compatible components](guide/ssr#authoring-server-compatible-components) in the SSR guide.
106+
107+
## Choosing the Right Strategy
108+
109+
### Decision matrix
110+
111+
| If you need... | Use this strategy | Why |
112+
| :------------------------- | :---------------- | :----------------------------------------------- |
113+
| **SEO + Static content** | SSG | Pre-rendered HTML, fastest load |
114+
| **SEO + Dynamic content** | SSR | Fresh content on the initial request for a route |
115+
| **No SEO + Interactivity** | CSR | Simplest, no server needed |
116+
| **Mixed requirements** | Hybrid | Different strategies per route |
117+
118+
## Making SSR/SSG Interactive with Hydration
119+
120+
When using SSR or SSG, Angular "hydrates" the server-rendered HTML to make it interactive.
121+
122+
**Available strategies:**
123+
124+
- **Full hydration** - Entire app becomes interactive at once (default)
125+
- **Incremental hydration** - Parts become interactive as needed (better performance)
126+
- **Event replay** - Captures clicks before hydration completes
127+
128+
📖 **Learn more:**
129+
130+
- [Hydration guide](guide/hydration) - Complete hydration setup
131+
- [Incremental hydration](guide/incremental-hydration) - Advanced hydration with `@defer` blocks
132+
133+
## Next steps
134+
135+
<docs-pill-row>
136+
<docs-pill href="/guide/ssr" title="Server-Side Rendering"/>
137+
<docs-pill href="/guide/hydration" title="Hydration"/>
138+
<docs-pill href="/guide/incremental-hydration" title="Incremental Hydration"/>
139+
</docs-pill-row>

0 commit comments

Comments
 (0)