Skip to content

Sync with react.dev @ c0c955ed #638

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Jul 1, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@
"@radix-ui/react-context-menu": "^2.1.5",
"body-scroll-lock": "^3.1.3",
"classnames": "^2.2.6",
"date-fns": "^2.16.1",
"debounce": "^1.2.1",
"github-slugger": "^1.3.0",
"next": "15.1.0",
Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/rsc/directives.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Directives are for use in [React Server Components](/reference/rsc/server-compon

<Intro>

Direktifler [React Sunucu Bileşenleri ile uyumlu paketleyiciler](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) için talimatlar sağlar.
Yönergeler, [React Server Components ile uyumlu paketleyicilere](/learn/start-a-new-react-project#full-stack-frameworks) talimatlar sağlar.

</Intro>

Expand Down
16 changes: 8 additions & 8 deletions src/content/reference/rsc/server-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: Sunucu Bileşenleri

<RSC>

Sunucu Bileşenleri aşağıdakilerde kullanım içindir [React Sunucu Bileşenleri](/learn/start-a-new-react-project#bleeding-edge-react-frameworks).
Sunucu Bileşenleri aşağıdakilerde kullanım içindir [React Server Components](/learn/start-a-new-react-project#full-stack-frameworks).

</RSC>

Expand All @@ -22,7 +22,7 @@ Bu ayrı ortam, React Sunucu Bileşenlerinde "sunucu" olarak adlandırılır. Su

#### Sunucu Bileşenleri için nasıl destek oluşturulur? {/*how-do-i-build-support-for-server-components*/}

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.
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.

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.

Expand All @@ -45,7 +45,7 @@ function Page({page}) {
setContent(data.content);
});
}, [page]);

return <div>{sanitizeHtml(marked(content))}</div>;
}
```
Expand All @@ -69,7 +69,7 @@ import sanitizeHtml from 'sanitize-html'; // Paket içinde dahil edilmemiş
async function Page({page}) {
// NOT: Render sırasında, uygulama build edilirken yüklenir.
const content = await file.readFile(`${page}.md`);

return <div>{sanitizeHtml(marked(content))}</div>;
}
```
Expand Down Expand Up @@ -113,7 +113,7 @@ function Note({id}) {
setNote(data.note);
});
}, [id]);

return (
<div>
<Author id={note.authorId} />
Expand Down Expand Up @@ -253,7 +253,7 @@ Bu, önce `Notes`'u bir Sunucu Bileşeni olarak render edip, ardından paketleyi
<p>bu ikinci nottur</p>
</Expandable>
<!--...-->
</div>
</div>
</body>
```

Expand All @@ -270,8 +270,8 @@ import db from './database';
async function Page({id}) {
// Sunucu Bileşenini askıya alır.
const note = await db.notes.get(id);
// NOT: beklenmemiş, burada başlayacak ve istemcide bekleyecek.

// NOT: await edilmedi, burada başlayacak ve client tarafında await edilecek.
const commentsPromise = db.comments.get(note.id);
return (
<div>
Expand Down
19 changes: 10 additions & 9 deletions src/content/reference/rsc/use-client.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ titleForTitleTag: "'use client' directive"

</RSC>


<Intro>

`'use client'` istemcide hangi kodun çalışacağını işaretlemenizi sağlar.
Expand Down Expand Up @@ -41,7 +40,7 @@ export default function RichTextEditor({ timestamp, text }) {
}
```

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.
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.

`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.

Expand Down Expand Up @@ -183,6 +182,7 @@ function MyComponent() {
```

2. Bir “bileşen”, tanımının bir **bileşen kullanımına** da atıfta bulunabilir.

```js
import MyComponent from './MyComponent';

Expand All @@ -199,10 +199,9 @@ Sunucu veya İstemci Bileşenleri hakkında konuştuğumuzda, bileşen kullanım
* 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.
* Aksi takdirde, bileşen kullanımı bir Sunucu Bileşenidir.


<Diagram name="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>

`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.
`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.

`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.

Expand All @@ -216,7 +215,7 @@ Sunucu veya İstemci Bileşenleri hakkında konuştuğumuzda, bileşen kullanım

`Copyright`, `InspirationGenerator` İstemci Bileşeninin bir çocuğu olarak işlendiğinden, bunun bir Sunucu Bileşeni olması sizi şaşırtabilir.

`'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.
`'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.

<Diagram name="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.">
`'use client'` modül bağımlılık ağacında sunucu ve istemci kodu arasındaki sınırı tanımlar.
Expand All @@ -237,10 +236,12 @@ Buradan çıkarılacak sonuç, bileşenler arasındaki üst eleman-alt eleman re
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şenlerinin Avantajları {/*advantages*/}

* 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.
* 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.

#### Sunucu Bileşenlerinin Sınırlamaları {/*limitations*/}

* Olay yöneticilerinin bir istemci tarafından kaydedilmesi ve tetiklenmesi gerektiğinden Sunucu Bileşenleri etkileşimi destekleyemez.
* Örneğin, `onClick` gibi olay yöneticileri yalnızca İstemci Bileşenlerinde tanımlanabilir.
* Sunucu Bileşenleri çoğu Hook'ları kullanamaz.
Expand All @@ -253,6 +254,7 @@ Tüm React uygulamalarında olduğu gibi, üst bileşenler alt bileşenlere veri
Bir Sunucu Bileşeninden İstemci Bileşenine aktarılan prop değerleri serileştirilebilir olmalıdır.

Serileştirilebilir prop'lar şunları içerir:

* Primitives
* [string](https://developer.mozilla.org/en-US/docs/Glossary/String)
* [number](https://developer.mozilla.org/en-US/docs/Glossary/Number)
Expand All @@ -274,12 +276,12 @@ Serileştirilebilir prop'lar şunları içerir:
* [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)

Özellikle, bunlar desteklenmemektedir:

* İstemci işaretli modüllerden dışa aktarılmayan veya [`'use server'`](/reference/rsc/use-server) ile işaretlenmeyen [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function)
* [Classes](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Classes_in_JavaScript)
* 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
* Global olarak kaydedilmemiş semboller, örn. `Symbol('my new symbol')`


## Kullanım {/*usage*/}

### Etkileşim ve state ile inşa etme {/*building-with-interactivity-and-state*/}
Expand Down Expand Up @@ -333,7 +335,7 @@ export default function FancyText({title, text}) {
}
```

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.
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.

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.

Expand Down Expand Up @@ -367,6 +369,7 @@ export default function Circle() {
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.

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:

* [createContext](/reference/react/createContext)
* [`react`](/reference/react/hooks) ve [`react-dom`](/reference/react-dom/hooks) Hooks, [`use`](/reference/react/use) ve [`useId`](/reference/react/useId) hariç
* [forwardRef](/reference/react/forwardRef)
Expand All @@ -375,5 +378,3 @@ Bu kütüphaneler bileşen Hook'larına veya istemci API'lerine dayanabilir. Aş
* İstemci API'leri kullanıyorlarsa, örneğin DOM ekleme veya yerel platform görünümleri

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.

[TODO]: <> (Troubleshooting - need use-cases)
5 changes: 0 additions & 5 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -2799,11 +2799,6 @@ data-view-byte-offset@^1.0.0:
es-errors "^1.3.0"
is-data-view "^1.0.1"

date-fns@^2.16.1:
version "2.28.0"
resolved "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz"
integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==

debounce@^1.2.1:
version "1.2.1"
resolved "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz"
Expand Down