Skip to content

Commit

Permalink
Merge pull request #555 from ctnkaan/hydrate
Browse files Browse the repository at this point in the history 
translate hydrate
  • Loading branch information
@alioguzhan
alioguzhan authored Jul 8, 2024
2 parents 6967f81 + 61dff9d commit 02dd8e8
Showing 1 changed file with 42 additions and 40 deletions.
82 changes: 42 additions & 40 deletions src/content/reference/react-dom/hydrate.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@ title: hydrate

<Deprecated>

This API will be removed in a future major version of React.
Bu API, React'in gelecekteki bir ana sürümünde kaldırılacaktır.

In React 18, `hydrate` was replaced by [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot) Using `hydrate` in React 18 will warn that your app will behave as if it’s running React 17. Learn more [here.](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis)
React 18'de, `hydrate` yerine [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) kullanılmıştır. React 18'de `hydrate` kullanmak, uygulamanızın React 17 çalışıyormuş gibi davranacağı konusunda uyarı verir. Daha fazla bilgi için [buraya](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis) göz atın.

</Deprecated>

<Intro>

`hydrate` lets you display React components inside a browser DOM node whose HTML content was previously generated by [`react-dom/server`](/reference/react-dom/server) in React 17 and below.
`hydrate`, React 17 ve altındaki sürümlerde, HTML içeriği daha önce [`react-dom/server`](/reference/react-dom/server) tarafından oluşturulmuş olan bir tarayıcı DOM düğümü içinde React bileşenlerini görüntülemenizi sağlar.

```js
hydrate(reactNode, domNode, callback?)
Expand All @@ -24,66 +24,66 @@ hydrate(reactNode, domNode, callback?)
---
## Reference {/*reference*/}
## Başvuru {/*reference*/}
### `hydrate(reactNode, domNode, callback?)` {/*hydrate*/}
Call `hydrate` in React 17 and below to “attach” React to existing HTML that was already rendered by React in a server environment.
React 17 ve altındaki sürümlerde, `hydrate` çağrısı yaparak React'i sunucu ortamında zaten render edilmiş olan mevcut HTML'ye "bağlayabilirsiniz".
```js
import { hydrate } from 'react-dom';

hydrate(reactNode, domNode);
```
React will attach to the HTML that exists inside the `domNode`, and take over managing the DOM inside it. An app fully built with React will usually only have one `hydrate` call with its root component.
React, `domNode` içinde var olan HTML'ye bağlanacak ve içindeki DOM'u yönetmeye başlayacaktır. Tamamen React ile oluşturulmuş bir uygulama genellikle kök bileşeniyle yalnızca bir `hydrate` çağrısına sahip olacaktır.
[See more examples below.](#usage)
[Aşağıda daha fazla örnek görün.](#usage)
#### Parameters {/*parameters*/}
#### Parametreler {/*parameters*/}
* `reactNode`: The "React node" used to render the existing HTML. This will usually be a piece of JSX like `<App />` which was rendered with a `ReactDOM Server` method such as `renderToString(<App />)` in React 17.
* `reactNode`: Mevcut HTML'yi render etmek için kullanılan "React düğümü". Bu genellikle React 17'de `renderToString(<App />)` gibi bir `ReactDOM Server` yöntemi ile render edilmiş `<App />` gibi bir JSX parçası olacaktır.
* `domNode`: A [DOM element](https://developer.mozilla.org/en-US/docs/Web/API/Element) that was rendered as the root element on the server.
* `domNode`: Sunucuda kök eleman olarak render edilmiş bir [DOM elemanı](https://developer.mozilla.org/en-US/docs/Web/API/Element).
* **optional**: `callback`: A function. If passed, React will call it after your component is hydrated.
* **isteğe bağlı**: `callback`: Eğer geçilirse, bileşeniniz hydrate edildikten sonra React bu fonksiyonu çağıracaktır.
#### Returns {/*returns*/}
#### Dönen Değerler {/*returns*/}
`hydrate` returns null.
`hydrate` null döner.
#### Caveats {/*caveats*/}
* `hydrate` expects the rendered content to be identical with the server-rendered content. React can patch up differences in text content, but you should treat mismatches as bugs and fix them.
* In development mode, React warns about mismatches during hydration. There are no guarantees that attribute differences will be patched up in case of mismatches. This is important for performance reasons because in most apps, mismatches are rare, and so validating all markup would be prohibitively expensive.
* You'll likely have only one `hydrate` call in your app. If you use a framework, it might do this call for you.
* If your app is client-rendered with no HTML rendered already, using `hydrate()` is not supported. Use [render()](/reference/react-dom/render) (for React 17 and below) or [createRoot()](/reference/react-dom/client/createRoot) (for React 18+) instead.
#### Uyarılar {/*caveats*/}
* `hydrate`, render edilmiş içeriğin sunucu tarafından render edilen içerikle aynı olmasını bekler. React, metin içeriğindeki farklılıkları düzeltebilir, ancak uyumsuzlukları hatalar olarak görmeli ve düzeltmelisiniz.
* Geliştirme modunda, React, hydrate işlemi sırasında uyumsuzluklar hakkında uyarır. Uyumsuzluk durumunda özellik farklılıklarının düzeltileceği garantisi yoktur. Bu, performans nedenleriyle önemlidir çünkü çoğu uygulamada, uyumsuzluklar nadirdir ve bu nedenle tüm işaretlemeyi doğrulamak aşırı derecede pahalı olurdu.
* Uygulamanızda muhtemelen yalnızca bir `hydrate` çağrısı olacaktır. Bir çatı kullanıyorsanız, bu çağrıyı sizin için yapabilir.
* Uygulamanızda önceden render edilmiş HTML olmadan yalnızca istemci tarafından render edilmişse, `hydrate()` kullanımı desteklenmez. Bunun yerine [render()](/reference/react-dom/render) (React 17 ve altı için) veya [createRoot()](/reference/react-dom/client/createRoot) (React 18+ için) kullanın.
---
## Usage {/*usage*/}
## Kullanım {/*usage*/}
Call `hydrate` to attach a <CodeStep step={1}>React component</CodeStep> into a server-rendered <CodeStep step={2}>browser DOM node</CodeStep>.
Bir <CodeStep step={1}>React bileşenini</CodeStep> bir sunucu-render <CodeStep step={2}>tarayıcı DOM düğümüne</CodeStep> bağlamak için `hydrate` çağrısı yapın.
```js [[1, 3, "<App />"], [2, 3, "document.getElementById('root')"]]
import { hydrate } from 'react-dom';

hydrate(<App />, document.getElementById('root'));
```
Using `hydrate()` to render a client-only app (an app without server-rendered HTML) is not supported. Use [`render()`](/reference/react-dom/render) (in React 17 and below) or [`createRoot()`](/reference/react-dom/client/createRoot) (in React 18+) instead.
Yalnızca istemci için bir uygulamayı (önceden sunucuda render edilmemiş bir uygulamayı) render etmek için `hydrate()` kullanımı desteklenmez. Bunun yerine [`render()`](/reference/react-dom/render) (React 17 ve altı için) veya [`createRoot()`](/reference/react-dom/client/createRoot) (React 18+ için) kullanın.
### Hydrating server-rendered HTML {/*hydrating-server-rendered-html*/}
### Sunucuda render edilmiş HTML'yi hydrate etme {/*hydrating-server-rendered-html*/}
In React, "hydration" is how React "attaches" to existing HTML that was already rendered by React in a server environment. During hydration, React will attempt to attach event listeners to the existing markup and take over rendering the app on the client.
React'te, "hydration", React'in bir sunucu ortamında zaten render edilmiş olan mevcut HTML'ye "bağlanması" anlamına gelir. Hydration sırasında, React mevcut işaretlemeye olay dinleyicilerini bağlamaya çalışır ve uygulamayı istemcide render etmeyi devralır.
In apps fully built with React, **you will usually only hydrate one "root", once at startup for your entire app**.
Tamamen React ile oluşturulmuş uygulamalarda, **genellikle tüm uygulamanız için başlangıçta yalnızca bir "kök" hydrate edersiniz.**
<Sandpack>
```html public/index.html
<!--
HTML content inside <div id="root">...</div>
was generated from App by react-dom/server.
<div id="root">...</div> içindeki HTML içeriği
react-dom/server tarafından App'den oluşturulmuştur.
-->
<div id="root"><h1>Hello, world!</h1></div>
```
Expand All @@ -104,24 +104,24 @@ export default function App() {
</Sandpack>
Usually you shouldn't need to call `hydrate` again or to call it in more places. From this point on, React will be managing the DOM of your application. To update the UI, your components will [use state.](/reference/react/useState)
Genellikle `hydrate` çağrısını başka bir yerde tekrar yapmanız veya çağırmanız gerekmez. Bu noktadan itibaren, React uygulamanızın DOM'unu yönetiyor olacaktır. UI'yi güncellemek için bileşenleriniz [state kullanacaktır.](/reference/react/useState)
For more information on hydration, see the docs for [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot)
Hydration hakkında daha fazla bilgi için, [`hydrateRoot` belgelerine](/reference/react-dom/client/hydrateRoot) bakın.
---
### Suppressing unavoidable hydration mismatch errors {/*suppressing-unavoidable-hydration-mismatch-errors*/}
### Kaçınılmaz hydration uyumsuzluk hatalarını bastırma {/*suppressing-unavoidable-hydration-mismatch-errors*/}
If a single element’s attribute or text content is unavoidably different between the server and the client (for example, a timestamp), you may silence the hydration mismatch warning.
Sunucu ve istemci arasındaki bir elemanın özelliği veya metin içeriği kaçınılmaz olarak farklıysa (örneğin, bir zaman damgası), hydrate uyumsuzluk uyarısını bastırabilirsiniz.
To silence hydration warnings on an element, add `suppressHydrationWarning={true}`:
Bir elemandaki hydrate uyarılarını bastırmak için `suppressHydrationWarning={true}` ekleyin:
<Sandpack>
```html public/index.html
<!--
HTML content inside <div id="root">...</div>
was generated from App by react-dom/server.
<div id="root">...</div> içindeki HTML içeriği
react-dom/server tarafından App'den oluşturulmuştur.
-->
<div id="root"><h1>Current Date: 01/01/2020</h1></div>
```
Expand All @@ -146,20 +146,20 @@ export default function App() {
</Sandpack>
This only works one level deep, and is intended to be an escape hatch. Don’t overuse it. Unless it’s text content, React still won’t attempt to patch it up, so it may remain inconsistent until future updates.
Bu yalnızca bir seviye derinlikte çalışır ve bir kaçış yolu olarak tasarlanmıştır. Fazla kullanmayın. Metin içeriği olmadıkça, React yine de bunu düzeltmeye çalışmaz, bu nedenle gelecekteki güncellemelere kadar tutarsız kalabilir.
---
### Handling different client and server content {/*handling-different-client-and-server-content*/}
### Farklı istemci ve sunucu içeriğini yönetme {/*handling-different-client-and-server-content*/}
If you intentionally need to render something different on the server and the client, you can do a two-pass rendering. Components that render something different on the client can read a [state variable](/reference/react/useState) like `isClient`, which you can set to `true` in an [Effect](/reference/react/useEffect):
İstemcide ve sunucuda kasıtlı olarak farklı bir şey render etmeniz gerekiyorsa, iki geçişli render yapabilirsiniz. İstemcide farklı bir şey render eden bileşenler, `isClient` gibi bir [state değişkeni](/reference/react/useState) okuyabilir ve bu değişkeni bir [Effect](/reference/react/useEffect) içinde `true` olarak ayarlayabilirsiniz:
<Sandpack>
```html public/index.html
<!--
HTML content inside <div id="root">...</div>
was generated from App by react-dom/server.
<div id="root">...</div> içindeki HTML içeriği
react-dom/server tarafından App'den oluşturulmuştur.
-->
<div id="root"><h1>Is Server</h1></div>
```
Expand Down Expand Up @@ -192,10 +192,12 @@ export default function App() {
</Sandpack>
This way the initial render pass will render the same content as the server, avoiding mismatches, but an additional pass will happen synchronously right after hydration.
Bu şekilde, ilk render geçişi sunucudaki içeriği aynı şekilde render eder, uyumsuzluklardan kaçınır, ancak hydrate işleminden hemen sonra ek bir geçiş daha gerçekleşir.
<Pitfall>
This approach makes hydration slower because your components have to render twice. Be mindful of the user experience on slow connections. The JavaScript code may load significantly later than the initial HTML render, so rendering a different UI immediately after hydration may feel jarring to the user.
Bu yaklaşım, bileşenlerinizin iki kez render edilmesi gerektiğinden hydrate işlemini yavaşlatır. Yavaş bağlantılarda kullanıcı deneyimini göz önünde
bulundurun. JavaScript kodu, başlangıç HTML render'ından önemli ölçüde sonra yüklenebilir, bu nedenle hydrate işleminden hemen sonra farklı bir UI render etmek kullanıcıya rahatsız edici gelebilir.

</Pitfall>

0 comments on commit 02dd8e8

Please sign in to comment.