From 4f60445cfd112180541a66ec1ecf4035373167b1 Mon Sep 17 00:00:00 2001 From: anilcanboga Date: Sat, 14 Mar 2026 01:49:03 +0300 Subject: [PATCH 01/11] translate renderToReadableStream page --- .../react-dom/server/renderToReadableStream.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/content/reference/react-dom/server/renderToReadableStream.md b/src/content/reference/react-dom/server/renderToReadableStream.md index f407f2245..fd93f6e9e 100644 --- a/src/content/reference/react-dom/server/renderToReadableStream.md +++ b/src/content/reference/react-dom/server/renderToReadableStream.md @@ -4,7 +4,7 @@ title: renderToReadableStream -`renderToReadableStream` renders a React tree to a [Readable Web Stream.](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream) +`renderToReadableStream`, bir React tree’yi bir [Readable Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream) olarak render eder. ```js const stream = await renderToReadableStream(reactNode, options?) @@ -16,17 +16,17 @@ const stream = await renderToReadableStream(reactNode, options?) -This API depends on [Web Streams.](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) For Node.js, use [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) instead. +Bu API, [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) üzerine bağımlıdır. Node.js için bunun yerine [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) kullanın. --- -## Reference {/*reference*/} +## Referans {/*reference*/} ### `renderToReadableStream(reactNode, options?)` {/*rendertoreadablestream*/} -Call `renderToReadableStream` to render your React tree as HTML into a [Readable Web Stream.](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream) +`renderToReadableStream` fonksiyonunu çağırarak React tree’nizi HTML olarak bir [Readable Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream) içine render edebilirsiniz. ```js import { renderToReadableStream } from 'react-dom/server'; @@ -41,11 +41,11 @@ async function handler(request) { } ``` -On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to make the server-generated HTML interactive. +Client tarafında, server tarafından oluşturulan HTML’i interaktif hale getirmek için [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) fonksiyonunu çağırın. -[See more examples below.](#usage) +[Daha fazla örneği aşağıda inceleyin.](#usage) -#### Parameters {/*parameters*/} +#### Parametreler {/*parameters*/} * `reactNode`: A React node you want to render to HTML. For example, a JSX element like ``. It is expected to represent the entire document, so the `App` component should render the `` tag. From 683799f99b5017dae13b53437dfee71b4219550e Mon Sep 17 00:00:00 2001 From: anilcanboga Date: Sat, 14 Mar 2026 01:57:10 +0300 Subject: [PATCH 02/11] translate renderToReadableStream page --- .../server/renderToReadableStream.md | 40 +++++++++---------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/src/content/reference/react-dom/server/renderToReadableStream.md b/src/content/reference/react-dom/server/renderToReadableStream.md index fd93f6e9e..b7c855580 100644 --- a/src/content/reference/react-dom/server/renderToReadableStream.md +++ b/src/content/reference/react-dom/server/renderToReadableStream.md @@ -47,38 +47,38 @@ Client tarafında, server tarafından oluşturulan HTML’i interaktif hale geti #### Parametreler {/*parameters*/} -* `reactNode`: A React node you want to render to HTML. For example, a JSX element like ``. It is expected to represent the entire document, so the `App` component should render the `` tag. +* `reactNode`: HTML’e render etmek istediğiniz bir React node. Örneğin `` gibi bir JSX element’i. Bunun tüm dokümanı temsil etmesi beklenir, bu yüzden `App` component’i `` etiketini render etmelidir. -* **optional** `options`: An object with streaming options. - * **optional** `bootstrapScriptContent`: If specified, this string will be placed in an inline ` ``` -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) +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) ```js [[1, 4, ""]] import { hydrateRoot } from 'react-dom/client'; @@ -134,15 +134,15 @@ import App from './App.js'; hydrateRoot(document, ); ``` -This will attach event listeners to the server-generated HTML and make it interactive. +Bu server tarafından oluşturulan HTML’e event listener’lar ekleyecek ve HTML’i interaktif hale getirecektir. -#### Reading CSS and JS asset paths from the build output {/*reading-css-and-js-asset-paths-from-the-build-output*/} +#### Build çıktısından CSS ve JS asset yollarını okumak {/*reading-css-and-js-asset-paths-from-the-build-output*/} -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. +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. -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: +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: ```js {1,6} export default function App({ assetMap }) { @@ -158,10 +158,10 @@ export default function App({ assetMap }) { } ``` -On the server, render `` and pass your `assetMap` with the asset URLs: +Server tarafında, `` render edin ve asset URL’lerini içeren `assetMap`’inizi geçin: ```js {1-5,8,9} -// You'd need to get this JSON from your build tooling, e.g. read it from the build output. +// Bu JSON’u build aracınızdan almanız gerekir, örneğin build çıktısından okuyabilirsiniz. const assetMap = { 'styles.css': '/styles.123456.css', 'main.js': '/main.123456.js' @@ -177,10 +177,10 @@ async function handler(request) { } ``` -Since your server is now rendering ``, 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: +Server artık `` 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: ```js {9-10} -// You'd need to get this JSON from your build tooling. +// Bu JSON’u build aracınızdan almanız gerekir. const assetMap = { 'styles.css': '/styles.123456.css', 'main.js': '/main.123456.js' @@ -188,7 +188,7 @@ const assetMap = { async function handler(request) { const stream = await renderToReadableStream(, { - // Careful: It's safe to stringify() this because this data isn't user-generated. + // Dikkat: Bunu stringify() ile güvenle dönüştürebilirsiniz çünkü bu veri kullanıcı tarafından üretilmiş değil. bootstrapScriptContent: `window.assetMap = ${JSON.stringify(assetMap)};`, bootstrapScripts: [assetMap['/main.js']], }); From 2c49c2dd0e61de4d1ac5d932644963c0f2f66516 Mon Sep 17 00:00:00 2001 From: anilcanboga Date: Sat, 14 Mar 2026 01:58:08 +0300 Subject: [PATCH 04/11] translate renderToReadableStream page --- .../react-dom/server/renderToReadableStream.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/reference/react-dom/server/renderToReadableStream.md b/src/content/reference/react-dom/server/renderToReadableStream.md index d557d9039..a6af11d15 100644 --- a/src/content/reference/react-dom/server/renderToReadableStream.md +++ b/src/content/reference/react-dom/server/renderToReadableStream.md @@ -198,7 +198,7 @@ async function handler(request) { } ``` -In the example above, the `bootstrapScriptContent` option adds an extra inline `