@@ -162,42 +162,42 @@ async function Note({id}) {
}
async function Author({id}) {
- // NOTE: loads *after* Note,
- // but is fast if data is co-located.
+ // NOT: Note'dan *sonra* yüklenir,
+ // ancak veri aynı konumda ise hızlıdır.
const author = await db.authors.get(id);
return
By: {author.name};
}
```
-The bundler then combines the data, rendered Server Components and dynamic Client Components into a bundle. Optionally, that bundle can then be server-side rendered (SSR) to create the initial HTML for the page. When the page loads, the browser does not see the original `Note` and `Author` components; only the rendered output is sent to the client:
+Paketleyici, ardından veriyi, render edilen Sunucu Bileşenlerini ve dinamik İstemci Bileşenlerini bir pakette birleştirir. İsteğe bağlı olarak, bu paket daha sonra sunucu tarafında render edilip (SSR) sayfanın ilk HTML'ini oluşturabilir. Sayfa yüklendiğinde, tarayıcı orijinal `Note` ve `Author` bileşenlerini görmez; yalnızca render edilmiş çıktı istemciye gönderilir:
```js
-
By: The React Team
-
React 19 is...
+
Yazan: React Ekibi
+
React 19...
```
-Server Components can be made dynamic by re-fetching them from a server, where they can access the data and render again. This new application architecture combines the simple “request/response” mental model of server-centric Multi-Page Apps with the seamless interactivity of client-centric Single-Page Apps, giving you the best of both worlds.
+Sunucu Bileşenleri, sunucudan tekrar alınıp veriye erişip yeniden render edilerek dinamik hale getirilebilir. Bu yeni uygulama mimarisi, sunucu odaklı Çok Sayfalı Uygulamalar'ın basit “istek/cevap” zihniyet modelini, istemci odaklı Tek Sayfa Uygulamalarının sorunsuz etkileşimiyle birleştirir ve size her iki dünyanın da en iyisini sunar.
-### Adding interactivity to Server Components {/*adding-interactivity-to-server-components*/}
+### Sunucu Bileşenlerine Etkileşim Ekleme {/*adding-interactivity-to-server-components*/}
-Server Components are not sent to the browser, so they cannot use interactive APIs like `useState`. To add interactivity to Server Components, you can compose them with Client Component using the `"use client"` directive.
+Sunucu Bileşenleri tarayıcıya gönderilmez, bu yüzden `useState` gibi etkileşimli API'leri kullanamazlar. Sunucu Bileşenlerine etkileşim eklemek için, bunları `"use client"` yönergesini kullanarak İstemci Bileşeni ile birleştirebilirsiniz.
-#### There is no directive for Server Components. {/*there-is-no-directive-for-server-components*/}
+#### Sunucu Bileşenleri için bir yönerge yoktur. {/*there-is-no-directive-for-server-components*/}
-A common misunderstanding is that Server Components are denoted by `"use server"`, but there is no directive for Server Components. The `"use server"` directive is used for Server Actions.
+Yaygın bir yanlış anlama, Sunucu Bileşenlerinin `"use server"` ile belirtildiğidir, ancak Sunucu Bileşenleri için bir yönerge yoktur. `"use server"` yönergesi, Sunucu İşlemleri (Server Actions) için kullanılır.
-For more info, see the docs for [Directives](/reference/rsc/directives).
+Daha fazla bilgi için, [Yönergeler](/reference/rsc/directives) dökümantasyonuna bakın.
-In the following example, the `Notes` Server Component imports an `Expandable` Client Component that uses state to toggle its `expanded` state:
+Aşağıdaki örnekte, `Notes` Sunucu Bileşeni, `expanded` state'ini değiştirmek için state kullanan bir `Expandable` İstemci Bileşenini içe aktarır:
```js
-// Server Component
+// Sunucu Bileşeni
import Expandable from './Expandable';
async function Notes() {
@@ -214,7 +214,7 @@ async function Notes() {
}
```
```js
-// Client Component
+// İstemci Bileşeni
"use client"
export default function Expandable({children}) {
@@ -232,46 +232,46 @@ export default function Expandable({children}) {
}
```
-This works by first rendering `Notes` as a Server Component, and then instructing the bundler to create a bundle for the Client Component `Expandable`. In the browser, the Client Components will see output of the Server Components passed as props:
+Bu, önce `Notes`'u bir Sunucu Bileşeni olarak render edip, ardından paketleyiciye `Expandable` İstemci Bileşeni için bir paket oluşturması talimatı vererek çalışır. Tarayıcıda, İstemci Bileşenleri, prop olarak geçirilen Sunucu Bileşenlerinin çıktısını görecektir:
```js
-
+
- this is the first note
+ bu ilk nottur
- this is the second note
+ bu ikinci nottur
```
-### Async components with Server Components {/*async-components-with-server-components*/}
+### Sunucu Bileşenleri ile Async Bileşenleri {/*async-components-with-server-components*/}
-Server Components introduce a new way to write Components using async/await. When you `await` in an async component, React will suspend and wait for the promise to resolve before resuming rendering. This works across server/client boundaries with streaming support for Suspense.
+Sunucu Bileşenleri, async/await kullanarak Bileşen yazmanın yeni bir yolunu tanıtır. Bir async bileşen içinde `await` kullandığınızda, React render'lamaya devam etmeden önce promise'in çözülmesini bekler. Bu, sunucu/istemci sınırlarında, Suspense için stream desteğiyle çalışır.
-You can even create a promise on the server, and await it on the client:
+Hatta sunucuda bir promise oluşturabilir ve bunu istemcide bekleyebilirsiniz:
```js
-// Server Component
+// Sunucu Bileşeni
import db from './database';
async function Page({id}) {
- // Will suspend the Server Component.
+ // Sunucu Bileşenini askıya alır.
const note = await db.notes.get(id);
- // NOTE: not awaited, will start here and await on the client.
+ // NOT: beklenmemiş, burada başlayacak ve istemcide bekleyecek.
const commentsPromise = db.comments.get(note.id);
return (
{note}
- Loading Comments...}>
+ Yorumlar Yükleniyor...}>
@@ -280,18 +280,18 @@ async function Page({id}) {
```
```js
-// Client Component
+// İstemci Bileşeni
"use client";
import {use} from 'react';
function Comments({commentsPromise}) {
- // NOTE: this will resume the promise from the server.
- // It will suspend until the data is available.
+ // NOT: Bu, sunucudan gelen promise'i yeniden başlatacak.
+ // Veriler mevcut olana kadar askıya alınacak.
const comments = use(commentsPromise);
return comments.map(commment =>
{comment}
);
}
```
-The `note` content is important data for the page to render, so we `await` it on the server. The comments are below the fold and lower-priority, so we start the promise on the server, and wait for it on the client with the `use` API. This will Suspend on the client, without blocking the `note` content from rendering.
+`note` içeriği, sayfanın render edilmesi için önemli bir veri olduğu için, sunucuda `await` edilir. Yorumlar ise daha aşağıda ve önceliği düşük olduğundan, promise'i sunucuda başlatırız ve istemcide `use` API'si ile bekleriz. Bu, istemcide askıya alınacak, ancak `note` içeriğinin render edilmesini engellemeyecektir.
-Since async components are [not supported on the client](#why-cant-i-use-async-components-on-the-client), we await the promise with `use`.
+Async bileşenler [istemcide desteklenmediği için](#why-cant-i-use-async-components-on-the-client), promise'i `use` ile bekleriz.