Skip to content

Commit 4b44696

Browse files
committed
translate renderToReadableStream page
1 parent 683799f commit 4b44696

1 file changed

Lines changed: 11 additions & 11 deletions

File tree

src/content/reference/react-dom/server/renderToReadableStream.md

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ export default function App() {
115115
}
116116
```
117117
118-
React will inject the [doctype](https://developer.mozilla.org/en-US/docs/Glossary/Doctype) and your <CodeStep step={2}>bootstrap `<script>` tags</CodeStep> into the resulting HTML stream:
118+
React, [doctype](https://developer.mozilla.org/en-US/docs/Glossary/Doctype) ve <CodeStep step={2}>bootstrap `<script>` etiketlerini</CodeStep> oluşan HTML stream’ine enjekte edecektir:
119119
120120
```html [[2, 5, "/main.js"]]
121121
<!DOCTYPE html>
@@ -125,7 +125,7 @@ React will inject the [doctype](https://developer.mozilla.org/en-US/docs/Glossar
125125
<script src="/main.js" async=""></script>
126126
```
127127
128-
On the client, your bootstrap script should [hydrate the entire `document` with a call to `hydrateRoot`:](/reference/react-dom/client/hydrateRoot#hydrating-an-entire-document)
128+
Client tarafında, bootstrap script’iniz [tüm `document`’i `hydrateRoot` çağrısı ile hydrate etmelidir:](/reference/react-dom/client/hydrateRoot#hydrating-an-entire-document)
129129
130130
```js [[1, 4, "<App />"]]
131131
import { hydrateRoot } from 'react-dom/client';
@@ -134,15 +134,15 @@ import App from './App.js';
134134
hydrateRoot(document, <App />);
135135
```
136136
137-
This will attach event listeners to the server-generated HTML and make it interactive.
137+
Bu server tarafından oluşturulan HTML’e event listener’lar ekleyecek ve HTML’i interaktif hale getirecektir.
138138
139139
<DeepDive>
140140
141-
#### Reading CSS and JS asset paths from the build output {/*reading-css-and-js-asset-paths-from-the-build-output*/}
141+
#### Build çıktısından CSS ve JS asset yollarını okumak {/*reading-css-and-js-asset-paths-from-the-build-output*/}
142142
143-
The final asset URLs (like JavaScript and CSS files) are often hashed after the build. For example, instead of `styles.css` you might end up with `styles.123456.css`. Hashing static asset filenames guarantees that every distinct build of the same asset will have a different filename. This is useful because it lets you safely enable long-term caching for static assets: a file with a certain name would never change content.
143+
Final asset URL’leri (JavaScript ve CSS dosyaları gibi) genellikle build sonrası hash’lenir. Örneğin, `styles.css` yerine `styles.123456.css` gibi bir dosya ile karşılaşabilirsiniz. Statik asset dosya adlarını hash’lemek, aynı asset’in her farklı build’inin farklı bir dosya adına sahip olmasını garanti eder. Bu faydalıdır çünkü statik assetler için uzun süreli caching’i güvenle etkinleştirmenizi sağlar: belli bir isimdeki dosyanın içeriği hiçbir zaman değişmez.
144144
145-
However, if you don't know the asset URLs until after the build, there's no way for you to put them in the source code. For example, hardcoding `"/styles.css"` into JSX like earlier wouldn't work. To keep them out of your source code, your root component can read the real filenames from a map passed as a prop:
145+
Ancak, asset URL’lerini build sonrası öğreniyorsanız, bunları kaynak kodunuza koymanın bir yolu yoktur. Örneğin, daha önce JSX içine hardcode edilmiş `"/styles.css"` çalışmaz. Bunları kaynak kodunuzdan çıkarmak için, root component’iniz gerçek dosya adlarını bir prop olarak geçirilen bir map’ten okuyabilir:
146146
147147
```js {1,6}
148148
export default function App({ assetMap }) {
@@ -158,10 +158,10 @@ export default function App({ assetMap }) {
158158
}
159159
```
160160
161-
On the server, render `<App assetMap={assetMap} />` and pass your `assetMap` with the asset URLs:
161+
Server tarafında, `<App assetMap={assetMap} />` render edin ve asset URL’lerini içeren `assetMap`’inizi geçin:
162162
163163
```js {1-5,8,9}
164-
// You'd need to get this JSON from your build tooling, e.g. read it from the build output.
164+
// Bu JSON’u build aracınızdan almanız gerekir, örneğin build çıktısından okuyabilirsiniz.
165165
const assetMap = {
166166
'styles.css': '/styles.123456.css',
167167
'main.js': '/main.123456.js'
@@ -177,18 +177,18 @@ async function handler(request) {
177177
}
178178
```
179179
180-
Since your server is now rendering `<App assetMap={assetMap} />`, you need to render it with `assetMap` on the client too to avoid hydration errors. You can serialize and pass `assetMap` to the client like this:
180+
Server artık `<App assetMap={assetMap} />` render ettiği için, client tarafında da `assetMap` ile render etmeniz gerekir; aksi takdirde hydration hataları oluşur. `assetMap`’i serialize edip client’a şöyle geçirebilirsiniz:
181181
182182
```js {9-10}
183-
// You'd need to get this JSON from your build tooling.
183+
// Bu JSON’u build aracınızdan almanız gerekir.
184184
const assetMap = {
185185
'styles.css': '/styles.123456.css',
186186
'main.js': '/main.123456.js'
187187
};
188188

189189
async function handler(request) {
190190
const stream = await renderToReadableStream(<App assetMap={assetMap} />, {
191-
// Careful: It's safe to stringify() this because this data isn't user-generated.
191+
// Dikkat: Bunu stringify() ile güvenle dönüştürebilirsiniz çünkü bu veri kullanıcı tarafından üretilmiş değil.
192192
bootstrapScriptContent: `window.assetMap = ${JSON.stringify(assetMap)};`,
193193
bootstrapScripts: [assetMap['/main.js']],
194194
});

0 commit comments

Comments
 (0)