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
Copy file name to clipboardExpand all lines: src/content/reference/rsc/directives.md
+1-5Lines changed: 1 addition & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,11 +10,7 @@ Directives are for use in [React Server Components](/reference/rsc/server-compon
10
10
11
11
<Intro>
12
12
13
-
<<<<<<< HEAD
14
-
Direktifler [React Sunucu Bileşenleri ile uyumlu paketleyiciler](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) için talimatlar sağlar.
15
-
=======
16
-
Directives provide instructions to [bundlers compatible with React Server Components](/learn/start-a-new-react-project#full-stack-frameworks).
17
-
>>>>>>> c0c955ed1d1c4fe3bf3e18c06a8d121902a01619
13
+
Yönergeler, [React Server Components ile uyumlu paketleyicilere](/learn/start-a-new-react-project#full-stack-frameworks) talimatlar sağlar.
Copy file name to clipboardExpand all lines: src/content/reference/rsc/server-components.md
+3-16Lines changed: 3 additions & 16 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,11 +4,7 @@ title: Sunucu Bileşenleri
4
4
5
5
<RSC>
6
6
7
-
<<<<<<< HEAD
8
-
Sunucu Bileşenleri aşağıdakilerde kullanım içindir [React Sunucu Bileşenleri](/learn/start-a-new-react-project#bleeding-edge-react-frameworks).
9
-
=======
10
-
Server Components are for use in [React Server Components](/learn/start-a-new-react-project#full-stack-frameworks).
11
-
>>>>>>> c0c955ed1d1c4fe3bf3e18c06a8d121902a01619
7
+
Sunucu Bileşenleri aşağıdakilerde kullanım içindir [React Server Components](/learn/start-a-new-react-project#full-stack-frameworks).
12
8
13
9
</RSC>
14
10
@@ -26,11 +22,7 @@ Bu ayrı ortam, React Sunucu Bileşenlerinde "sunucu" olarak adlandırılır. Su
26
22
27
23
#### Sunucu Bileşenleri için nasıl destek oluşturulur? {/*how-do-i-build-support-for-server-components*/}
28
24
29
-
<<<<<<< HEAD
30
-
React 19'daki React Sunucu Bileşenleri kararlı ve alt sürümler arasında kırılmayacak olsa da, bir React Sunucu Bileşenleri paketleyicisini veya framework'ünü uygulamak için kullanılan temel API'ler semver'ı takip etmez ve React 19.x'teki alt sürümler arasında kırılabilir.
31
-
=======
32
-
While React Server Components in React 19 are stable and will not break between minor versions, the underlying APIs used to implement a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x.
33
-
>>>>>>> c0c955ed1d1c4fe3bf3e18c06a8d121902a01619
25
+
React 19'daki React Sunucu Bileşenleri kararlı ve küçük sürümler arasında bozulmayacak olsa da, React Sunucu Bileşenleri paketleyicisi veya çatısı (framework) oluşturmak için kullanılan temel API'ler semver (sürüm numarası yönetimi) kurallarına uymamakta ve React 19.x'in küçük sürümleri arasında bozulabilir.
34
26
35
27
React Sunucu Bileşenleri'ni bir paketleyici veya framework olarak desteklemek için, belirli bir React sürümüne sabitlemenizi veya Canary sürümünü kullanmanızı öneririz. Gelecekte, React Sunucu Bileşenleri'ni uygulamak için kullanılan API'leri stabilize etmek amacıyla paketleyiciler ve framework'lerle çalışmaya devam edeceğiz.
36
28
@@ -278,13 +270,8 @@ import db from './database';
278
270
asyncfunctionPage({id}) {
279
271
// Sunucu Bileşenini askıya alır.
280
272
constnote=awaitdb.notes.get(id);
281
-
<<<<<<<HEAD
282
-
283
-
// NOT: beklenmemiş, burada başlayacak ve istemcide bekleyecek.
284
-
=======
285
273
286
-
// NOTE: not awaited, will start here and await on the client.
287
-
>>>>>>> c0c955ed1d1c4fe3bf3e18c06a8d121902a01619
274
+
// NOT: await edilmedi, burada başlayacak ve client tarafında await edilecek.
`'use client'` istemcide hangi kodun çalışacağını işaretlemenizi sağlar.
@@ -41,11 +40,7 @@ export default function RichTextEditor({ timestamp, text }) {
41
40
}
42
41
```
43
42
44
-
<<<<<<< HEAD
45
-
Bir Sunucu Bileşeninden `'use client'` ile işaretlenmiş bir dosya içe aktarıldığında, [uyumlu paketleyiciler](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) modül içe aktarımını sunucu tarafından çalıştırılan ve istemci tarafından çalıştırılan kod arasında bir sınır olarak değerlendirecektir.
46
-
=======
47
-
When a file marked with `'use client'` is imported from a Server Component, [compatible bundlers](/learn/start-a-new-react-project#full-stack-frameworks) will treat the module import as a boundary between server-run and client-run code.
48
-
>>>>>>> c0c955ed1d1c4fe3bf3e18c06a8d121902a01619
43
+
Bir Sunucu Bileşeninden `'use client'` ile işaretlenmiş bir dosya içe aktarıldığında, [uyumlu paketleyiciler](/learn/start-a-new-react-project#full-stack-frameworks) modül içe aktarımını sunucu tarafından çalıştırılan ve istemci tarafından çalıştırılan kod arasında bir sınır olarak değerlendirecektir.
49
44
50
45
`RichTextEditor` bağımlılıkları olarak, `formatDate` ve `Button` da modüllerinin bir `'use client'` yönergesi içerip içermediğine bakılmaksızın istemcide değerlendirilecektir. Tek bir modülün sunucu kodundan içe aktarıldığında sunucuda, istemci kodundan içe aktarıldığında ise istemcide değerlendirilebileceğini unutmayın.
51
46
@@ -187,6 +182,7 @@ function MyComponent() {
187
182
```
188
183
189
184
2. Bir “bileşen”, tanımının bir **bileşen kullanımına** da atıfta bulunabilir.
185
+
190
186
```js
191
187
importMyComponentfrom'./MyComponent';
192
188
@@ -203,10 +199,9 @@ Sunucu veya İstemci Bileşenleri hakkında konuştuğumuzda, bileşen kullanım
203
199
* Bileşen `'use client'` yönergesine sahip bir modülde tanımlanmışsa veya bileşen bir İstemci Bileşeni içinde içe aktarılmış ve çağrılmışsa, bileşen kullanımı bir İstemci Bileşenidir.
204
200
* Aksi takdirde, bileşen kullanımı bir Sunucu Bileşenidir.
205
201
206
-
207
202
<Diagramname="use_client_render_tree"height={150}width={450}alt="Her bir node'un bir bileşeni ve alt elemanın da alt bileşenleri temsil ettiği bir ağaç grafiği. Üst düzey node 'App' olarak etiketlenmiştir. 'InspirationGenerator' ve 'FancyText' adlı iki alt bileşene sahiptir. 'InspirationGenerator' iki alt bileşene sahiptir, 'FancyText' ve 'Copyright'. Hem 'InspirationGenerator' hem de alt bileşeni 'FancyText' istemci tarafından oluşturulmak üzere işaretlenmiştir.">Bir render ağacı bileşen kullanımlarını gösterir.</Diagram>
208
203
209
-
`FancyText` sorusuna geri dönersek, bileşen tanımının bir `'use client'` yönergesine sahip _olmadığını_ ve iki kullanımı olduğunu görüyoruz.
204
+
`FancyText` sorusuna geri dönersek, bileşen tanımının bir `'use client'` yönergesine sahip *olmadığını* ve iki kullanımı olduğunu görüyoruz.
210
205
211
206
`FancyText`'in `App`'in bir alt öğesi olarak kullanılması, bu kullanımı bir Sunucu Bileşeni olarak işaretler. `FancyText` içe aktarıldığında ve `InspirationGenerator` altında çağrıldığında, `InspirationGenerator` bir `'use client'` yönergesi içerdiğinden, `FancyText` kullanımı bir İstemci Bileşenidir.
212
207
@@ -220,7 +215,7 @@ Sunucu veya İstemci Bileşenleri hakkında konuştuğumuzda, bileşen kullanım
220
215
221
216
`Copyright`, `InspirationGenerator` İstemci Bileşeninin bir çocuğu olarak işlendiğinden, bunun bir Sunucu Bileşeni olması sizi şaşırtabilir.
222
217
223
-
`'use client'`'ın sunucu ve istemci kodu arasındaki sınırı render ağacında değil _modül bağımlılık ağacında_ tanımladığını hatırlayın.
218
+
`'use client'`'ın sunucu ve istemci kodu arasındaki sınırı render ağacında değil *modül bağımlılık ağacında* tanımladığını hatırlayın.
224
219
225
220
<Diagramname="use_client_module_dependency"height={200}width={500}alt="En üst node 'App.js' modülünü temsil eden bir ağaç grafiği. 'App.js''nin üç çocuğu vardır: 'Copyright.js', 'FancyText.js', ve 'InspirationGenerator.js'. 'InspirationGenerator.js' dosyasının iki çocuğu vardır: 'FancyText.js' ve 'inspirations.js'. 'InspirationGenerator.js' altındaki ve dahilindeki node'lar, 'InspirationGenerator.js' içindeki 'use client' yönergesi nedeniyle bu alt grafiğin istemci tarafından işlendiğini belirtmek için sarı bir arka plan rengine sahiptir.">
226
221
`'use client'` modül bağımlılık ağacında sunucu ve istemci kodu arasındaki sınırı tanımlar.
@@ -241,10 +236,12 @@ Buradan çıkarılacak sonuç, bileşenler arasındaki üst eleman-alt eleman re
241
236
Basit olması için Sunucu Bileşenlerinden bahsediyoruz, ancak aynı ilkeler uygulamanızdaki sunucuda çalışan tüm kodlar için geçerlidir.
* Sunucu Bileşenleri, istemci tarafından gönderilen ve çalıştırılan kod miktarını azaltabilir. Yalnızca İstemci modülleri paketlenir ve istemci tarafından değerlendirilir.
245
241
* Sunucu Bileşenleri sunucu üzerinde çalışmaktan yararlanır. Yerel dosya sistemine erişebilirler ve veri getirme ve ağ istekleri için düşük gecikme yaşayabilirler.
* Herhangi bir sınıfın örneği olan nesneler (belirtilen yerleşikler dışında) veya [null prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects) nesneler
284
283
* Global olarak kaydedilmemiş semboller, örn. `Symbol('my new symbol')`
285
284
286
-
287
285
## Kullanım {/*usage*/}
288
286
289
287
### Etkileşim ve state ile inşa etme {/*building-with-interactivity-and-state*/}
@@ -337,7 +335,7 @@ export default function FancyText({title, text}) {
337
335
}
338
336
```
339
337
340
-
Bu durumda `'use client'` yönergesini eklemiyoruz, bu da `FancyText`'in _output_'unun (kaynak kodu yerine) bir Sunucu Bileşeninden başvurulduğunda tarayıcıya gönderilmesine neden oluyor. Daha önceki Inspirations uygulaması örneğinde gösterildiği gibi `FancyText` içe aktarıldığı ve kullanıldığı yere bağlı olarak hem Sunucu hem de İstemci Bileşeni olarak kullanılır.
338
+
Bu durumda `'use client'` yönergesini eklemiyoruz, bu da `FancyText`'in *output*'unun (kaynak kodu yerine) bir Sunucu Bileşeninden başvurulduğunda tarayıcıya gönderilmesine neden oluyor. Daha önceki Inspirations uygulaması örneğinde gösterildiği gibi `FancyText` içe aktarıldığı ve kullanıldığı yere bağlı olarak hem Sunucu hem de İstemci Bileşeni olarak kullanılır.
341
339
342
340
Ancak `FancyText`in HTML çıktısı kaynak koduna (bağımlılıklar dahil) göre büyükse, onu her zaman bir İstemci Bileşeni olmaya zorlamak daha verimli olabilir. Uzun bir SVG path'i döndüren bileşenler, bir bileşeni İstemci Bileşeni olmaya zorlamanın daha verimli olabileceği bir durumdur.
343
341
@@ -371,6 +369,7 @@ export default function Circle() {
371
369
Genellikle bir React uygulamasında yaygın kullanıcı arayüzü modellerini veya mantığını işlemek için üçüncü taraf kütüphanelerden yararlanırsınız.
372
370
373
371
Bu kütüphaneler bileşen Hook'larına veya istemci API'lerine dayanabilir. Aşağıdaki React API'lerinden herhangi birini kullanan üçüncü taraf bileşenleri istemci üzerinde çalışmalıdır:
372
+
374
373
*[createContext](/reference/react/createContext)
375
374
*[`react`](/reference/react/hooks) ve [`react-dom`](/reference/react-dom/hooks) Hooks, [`use`](/reference/react/use) ve [`useId`](/reference/react/useId) hariç
376
375
*[forwardRef](/reference/react/forwardRef)
@@ -379,5 +378,3 @@ Bu kütüphaneler bileşen Hook'larına veya istemci API'lerine dayanabilir. Aş
379
378
* İstemci API'leri kullanıyorlarsa, örneğin DOM ekleme veya yerel platform görünümleri
380
379
381
380
Bu kütüphaneler React Server Components ile uyumlu olacak şekilde güncelleştirildiyse, kendi '`'use client' işaretçilerini zaten içerecek ve bunları doğrudan Sunucu Bileşenlerinizden kullanmanıza olanak tanıyacaktır. Bir kütüphane güncellenmemişse veya bir bileşenin yalnızca istemcide belirtilebilen olay yöneticileri gibi desteklere ihtiyacı varsa, üçüncü taraf İstemci Bileşeni ile kullanmak istediğiniz Sunucu Bileşeniniz arasına kendi İstemci Bileşeni dosyanızı eklemeniz gerekebilir.
0 commit comments