You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Commit 633a1aa
Browse filesBrowse the repository at this point in the historyBrowse files
* `reactNode`: HTML'e render etmek istediğiniz React düğümüdür. Örneğin, `<App />` gibi bir JSX bileşeni. Belgenin tamamını temsil etmesi beklediğinden dolayı `App` bileşeni `<html>` etiketini render etmelidir.
50
50
51
51
* **optional** `options`: Streaming options içeren bir object.
52
-
53
52
* **optional** `bootstrapScriptContent`: Belirtilirse, bu string inline bir `<script>` tag’i içine yerleştirilir.
54
-
55
53
* **optional** `bootstrapScripts`: Sayfada emit edilecek `<script>` tag’leri için string URL’lerden oluşan bir array. [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) çağıran `<script>`’i dahil etmek için bunu kullanın. Client tarafında React’i hiç çalıştırmak istemiyorsanız bunu atlayın.
56
-
57
54
* **optional** `bootstrapModules`: `bootstrapScripts` gibidir, ancak bunun yerine [`<script type="module">`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) emit eder.
58
-
59
55
* **optional** `identifierPrefix`: React’in [`useId`](/reference/react/useId) tarafından oluşturulan ID’ler için kullandığı string prefix. Aynı sayfada birden fazla root kullanırken conflict’leri önlemek için kullanışlıdır. [`hydrateRoot`](/reference/react-dom/client/hydrateRoot#parameters)’a geçirilen prefix ile aynı olmalıdır.
60
-
61
56
* **optional** `namespaceURI`: Stream için root [namespace URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris)’sini içeren bir string. Default olarak normal HTML’dir. SVG için `'http://www.w3.org/2000/svg'`, MathML için `'http://www.w3.org/1998/Math/MathML'` geçirin.
62
-
63
57
* **optional** `nonce`: [`script-src` Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) için script’lere izin veren bir [`nonce`](http://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#nonce) string’i.
64
-
65
58
* **optional** `onAllReady`: Hem [shell](#specifying-what-goes-into-the-shell) hem de tüm ek [content](#streaming-more-content-as-it-loads) dahil olmak üzere tüm rendering tamamlandığında tetiklenen bir callback. Bunu `onShellReady` yerine [crawler’lar ve static generation](#waiting-for-all-content-to-load-for-crawlers-and-static-generation) için kullanabilirsiniz. Burada streaming’i başlatırsanız progressive loading elde etmezsiniz. Stream final HTML’i içerir.
66
-
67
59
* **optional** `onError`: [Recoverable](#recovering-from-errors-outside-the-shell) olsun ya da [olmasın](#recovering-from-errors-inside-the-shell), server error olduğunda tetiklenen bir callback. Default olarak yalnızca `console.error` çağırır. [Crash report’ları loglamak](#logging-crashes-on-the-server) için override ederseniz, yine de `console.error` çağırdığınızdan emin olun. Shell emit edilmeden önce [status code’u ayarlamak](#setting-the-status-code) için de kullanabilirsiniz.
68
-
69
60
* **optional** `onShellReady`: [Initial shell](#specifying-what-goes-into-the-shell) render edildikten hemen sonra tetiklenen bir callback. Burada [status code’u ayarlayabilir](#setting-the-status-code) ve streaming’i başlatmak için `pipe` çağırabilirsiniz. React, shell’den sonra ek [content’i stream eder](#streaming-more-content-as-it-loads) ve HTML loading fallback’lerini content ile değiştiren inline `<script>` tag’lerini de beraberinde gönderir.
70
-
71
-
* **optional** `onShellError`: Initial shell render edilirken bir hata oluşursa tetiklenen bir callback. Error’ı argüman olarak alır. Stream’den henüz hiç byte emit edilmemiştir ve ne `onShellReady` ne de `onAllReady` çağrılır; bu yüzden [fallback HTML shell output edebilirsiniz](#recovering-from-errors-inside-the-shell).
72
-
61
+
* **optional** `onShellError`: Initial shell render edilirken bir error oluşursa tetiklenen bir callback. Error’ı argüman olarak alır. Stream’den henüz hiç byte emit edilmemiştir ve ne `onShellReady` ne de `onAllReady` çağrılır; bu yüzden [fallback HTML shell output edebilirsiniz](#recovering-from-errors-inside-the-shell).
73
62
* **optional** `progressiveChunkSize`: Bir chunk içindeki byte sayısı. [Default heuristic hakkında daha fazla okuyun.](https://github.com/react/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225)
Copy file name to clipboardExpand all lines: src/content/reference/react-dom/server/renderToReadableStream.md
-9Lines changed: 0 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -50,23 +50,14 @@ Client tarafında, server tarafından oluşturulan HTML’i interaktif hale geti
50
50
* `reactNode`: HTML’e render etmek istediğiniz bir React node. Örneğin `<App />` gibi bir JSX element’i. Bunun tüm dokümanı temsil etmesi beklenir, bu yüzden `App` component’i `<html>` etiketini render etmelidir.
51
51
52
52
* **optional** `options`: Streaming options içeren bir object.
53
-
54
53
* **optional** `bootstrapScriptContent`: Belirtilirse, bu string inline bir `<script>` tag’i içine yerleştirilir.
55
-
56
54
* **optional** `bootstrapScripts`: Sayfada emit edilecek `<script>` tag’leri için string URL’lerden oluşan bir array. [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) çağıran `<script>`’i dahil etmek için bunu kullanın. Client tarafında React’i hiç çalıştırmak istemiyorsanız bunu atlayın.
57
-
58
55
* **optional** `bootstrapModules`: `bootstrapScripts` gibidir, ancak bunun yerine [`<script type="module">`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) emit eder.
59
-
60
56
* **optional** `identifierPrefix`: React’in [`useId`](/reference/react/useId) tarafından oluşturulan ID’ler için kullandığı string prefix. Aynı sayfada birden fazla root kullanırken conflict’leri önlemek için kullanışlıdır. [`hydrateRoot`](/reference/react-dom/client/hydrateRoot#parameters)’a geçirilen prefix ile aynı olmalıdır.
61
-
62
57
* **optional** `namespaceURI`: Stream için root [namespace URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris)’sini içeren bir string. Default olarak normal HTML’dir. SVG için `'http://www.w3.org/2000/svg'`, MathML için `'http://www.w3.org/1998/Math/MathML'` geçirin.
63
-
64
58
* **optional** `nonce`: [`script-src` Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) için script’lere izin veren bir [`nonce`](http://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#nonce) string’i.
65
-
66
59
* **optional** `onError`: [Recoverable](#recovering-from-errors-outside-the-shell) olsun ya da [olmasın](#recovering-from-errors-inside-the-shell), server error olduğunda tetiklenen bir callback. Default olarak yalnızca `console.error` çağırır. [Crash report’ları loglamak](#logging-crashes-on-the-server) için override ederseniz, yine de `console.error` çağırdığınızdan emin olun. Shell emit edilmeden önce [status code’u ayarlamak](#setting-the-status-code) için de kullanabilirsiniz.
67
-
68
60
* **optional** `progressiveChunkSize`: Bir chunk içindeki byte sayısı. [Default heuristic hakkında daha fazla okuyun.](https://github.com/react/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225)
69
-
70
61
* **optional** `signal`: [Server rendering’i abort etmek](#aborting-server-rendering) ve geri kalanını client’ta render etmek için kullanabileceğiniz bir [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal).
Copy file name to clipboardExpand all lines: src/content/reference/react/Suspense.md
+6-20Lines changed: 6 additions & 20 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -25,25 +25,16 @@ title: <Suspense>
25
25
26
26
#### Props {/*props*/}
27
27
*`children`: Render etmek istediğiniz gerçek UI. Eğer `children` rendering sırasında suspend olursa, Suspense boundary `fallback` render etmeye geçer.
28
-
29
-
*`fallback`: Gerçek UI henüz yüklenmeyi bitirmediyse, onun yerine render edilecek alternatif UI. Herhangi bir geçerli React node kabul edilir; ancak pratikte fallback genellikle loading spinner veya skeleton gibi hafif bir placeholder view’dur. `children` suspend olduğunda Suspense otomatik olarak `fallback`’e geçer, data hazır olduğunda tekrar `children`’a döner. Eğer `fallback` rendering sırasında suspend olursa, en yakın parent Suspense boundary’yi aktive eder.
30
-
28
+
*`fallback`: Gerçek UI henüz yüklenmeyi bitirmediyse, onun yerine render edilecek alternatif UI. Herhangi bir geçerli React node kabul edilir; ancak pratikte fallback genellikle loading spinner veya skeleton gibi hafif bir placeholder view’dur. Suspense, `children` suspend olduğunda otomatik olarak `fallback`’e geçer ve data hazır olduğunda tekrar `children`’a döner. Eğer `fallback` rendering sırasında suspend olursa, en yakın parent Suspense boundary’yi aktive eder.
31
29
* <ExperimentalBadge /> **optional**`defer`: Bir boolean. `true` olduğunda, içlerinde hiçbir şey suspend olmasa bile React önce `fallback`’i gösterebilir ve `children`’ı daha sonra render veya stream edebilir. Render edilmesi pahalı olan content için kullanın. Default değeri `false`’tur.
32
30
33
31
#### Uyarılar {/*caveats*/}
34
-
35
32
- Suspense, data’nın bir Effect veya event handler içinde fetch edildiğini detect etmez. Yalnızca [aşağıda listelenen durumlarda](#what-activates-a-suspense-boundary) aktive olur.
36
-
37
33
- React, ilk kez mount olamadan önce suspend olan render’lar için hiçbir state’i preserve etmez. Component yüklendiğinde, React suspended tree’yi sıfırdan yeniden render etmeyi dener.
38
-
39
34
- Suspense tree için content gösteriyorken tree tekrar suspend olursa, buna neden olan update [`startTransition`](/reference/react/startTransition) veya [`useDeferredValue`](/reference/react/useDeferredValue) tarafından oluşturulmadığı sürece `fallback` tekrar gösterilir.
40
-
41
35
- React, suspended content’i son reveal’dan itibaren ölçülen en fazla 300ms’de bir reveal eder. Bu pencere içinde ready olan boundary’ler tek tek değil, [birlikte reveal edilir](/blog/2025/10/01/react-19-2#batching-suspense-boundaries-for-ssr).
42
-
43
36
- React, tekrar suspend olduğu için zaten visible olan content’i hide etmek zorunda kalırsa, content tree içindeki [layout Effects](/reference/react/useLayoutEffect)’leri cleanup eder. Content tekrar gösterilmeye hazır olduğunda, React layout Effects’i tekrar çalıştırır. Bu, DOM layout’unu ölçen Effects’in content hidden durumdayken bunu yapmaya çalışmamasını sağlar.
44
-
45
37
- React, Suspense ile entegre olan **Streaming Server Rendering** ve **Selective Hydration** gibi under-the-hood optimizasyonlar içerir. Daha fazla bilgi edinmek için [mimari overview](https://github.com/reactwg/react-18/discussions/37) okuyun ve [teknik konuşmayı](https://www.youtube.com/watch?v=pj5N-Khihgc) izleyin.
46
-
47
38
- React, Suspense ile entegre olan **Streaming Server Rendering** ve **Selective Hydration** gibi under-the-hood optimizasyonlar içerir. Daha fazla bilgi edinmek için [mimari overview](https://github.com/reactwg/react-18/discussions/37) okuyun ve [teknik konuşmayı](https://www.youtube.com/watch?v=pj5N-Khihgc) izleyin.
48
39
49
40
---
@@ -53,26 +44,21 @@ title: <Suspense>
53
44
Bir Suspense boundary, content’ini reveal etmeden önce onun hazır olmasını bekler. Aşağıdakilerden herhangi biri, bir boundary’nin content’ini reveal etmesini engeller:
54
45
55
46
-[`lazy`](/reference/react/lazy) ile component code’unu lazy-load etmek.
56
-
57
47
-[Server Components](/reference/rsc/server-components)’tan stream edilen veya [Suspense-enabled framework](#suspense-enabled-frameworks) üzerinden yüklenen data dahil olmak üzere, [`use`](/reference/react/use) ile bir Promise okumak.
58
-
59
48
-[`<link rel="stylesheet">` ve bir `precedence` prop’u](/reference/react-dom/components/link#special-rendering-behavior) ile render edilen bir stylesheet’i yüklemek. React, stylesheet yüklenene kadar, bir timeout’a kadar boundary’yi block eder. [Aşağıdaki örneğe bakın.](#waiting-for-a-stylesheet-to-load)
60
-
61
49
- Streaming server rendering sırasında büyük bir boundary’nin HTML’inin gelmesini beklemek. HTML göndermek zaman alır; bu yüzden yeterince content içeren bir boundary, içinde hiçbir şey suspend olmasa bile aktive olur. React, HTML geldikçe content’i reveal eder.
62
-
63
50
- <CanaryBadge /> Font yüklemek. Suspense default olarak font’ları beklemez, ancak bir [`<ViewTransition>`](/reference/react/ViewTransition) update’i, text’in fallback font ile flash etmemesi için yeni font’ların yüklenmesini bir timeout’a kadar bekler. [Aşağıdaki örneğe bakın.](#waiting-for-a-font-to-load)
64
-
65
51
- <CanaryBadge /> Image yüklemek. Suspense default olarak image’ları beklemez, ancak bir [`<ViewTransition>`](/reference/react/ViewTransition) update’i sırasında React, image yüklenene kadar, bir timeout’a kadar boundary’yi block eder. `onLoad` handler eklemek belirli bir image’ı bu davranışın dışına çıkarır. [Aşağıdaki örneğe bakın.](#waiting-for-an-image-to-load)
66
52
67
53
- <ExperimentalBadge /> Bir [`<Suspense defer>`](#props) boundary’si içinde CPU-bound render work gerçekleştirmek.
Bir **Suspense-enabled framework**, component’inizde data’yı en yakın Suspense boundary’yi aktive edecek şekilde okumanız için bir yol sağlar. Data’nızı tam olarak nasıl load edeceğiniz framework’ünüze bağlıdır ve detayları onun documentation’ında bulursunuz. Under the hood, Suspense-enabled bir framework Promise’lerden oluşan bir cache tutar ve bir Promise üzerinde suspend olmak için [`use`](/reference/react/use)çağırır.
59
+
A *Suspense-enabled framework* gives you a way to read data in your component in a way that activates the closest Suspense boundary. The exact way you load your data depends on your framework, and you'll find the details in its documentation. Under the hood, a Suspense-enabled framework maintains a cache of Promises and calls [`use`](/reference/react/use)to suspend on a Promise.
74
60
75
-
Framework olmadan, Promise [render’lar arasında aynı instance yeniden kullanılacak şekilde cache’lendiği](/reference/react/use#caching-promises-for-client-components) sürece doğrudan `use` ile bir Promise okuyabilirsiniz.
61
+
Without a framework, you can read a Promise with `use` directly, as long as the Promise is [cached so the same instance is reused across renders.](/reference/react/use#caching-promises-for-client-components)
76
62
77
63
</Note>
78
64
@@ -245,7 +231,7 @@ async function getAlbums() {
245
231
246
232
</Sandpack>
247
233
248
-
Buna karşılık, bir Effect içinde olduğu gibi `use` dışında data fetch eden code, boundary’yi aktive etmez:
234
+
By contrast, code that fetches data outside of `use`, such as inside an Effect, does not activate the boundary:
[`<link rel="stylesheet">` ve bir `precedence` prop’u](/reference/react-dom/components/link#special-rendering-behavior) ile render edilen bir stylesheet, content’in unstyled görünmemesi için stylesheet yüklenene kadar, bir timeout’a kadar Suspense boundary’yi block eder.
0 commit comments