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/react-dom/preload.md
+40-40Lines changed: 40 additions & 40 deletions
Original file line number
Diff line number
Diff line change
@@ -5,19 +5,19 @@ canary: true
5
5
6
6
<Canary>
7
7
8
-
The`preload`function is currently only available in React's Canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
8
+
Fungsi`preload`saat ini hanya tersedia di kanal Canary dan eksperimental React. Pelajari lebih lanjut tentang [kanal rilis React di sini](/community/versioning-policy#all-release-channels).
9
9
10
10
</Canary>
11
11
12
12
<Note>
13
13
14
-
[React-based frameworks](/learn/start-a-new-react-project)frequently handle resource loading for you, so you might not have to call this API yourself. Consult your framework's documentation for details.
14
+
[Framework berbasis React](/learn/start-a-new-react-project)sering kali menangani pemuatan sumber daya untuk Anda, jadi Anda mungkin tidak perlu memanggil API ini sendiri. Lihat dokumentasi framework Anda untuk detailnya.
15
15
16
16
</Note>
17
17
18
18
<Intro>
19
19
20
-
`preload`lets you eagerly fetch a resource such as a stylesheet, font, or external script that you expect to use.
20
+
`preload`memungkinkan Anda mengambil sumber daya seperti *stylesheet*, *font*, atau skrip eksternal yang ingin Anda gunakan.
To preload a resource, call the`preload`function from`react-dom`.
36
+
Untuk memuat sumber daya, panggil fungsi`preload`dari`react-dom`.
37
37
38
38
```js
39
39
import { preload } from'react-dom';
@@ -45,47 +45,47 @@ function AppRoot() {
45
45
46
46
```
47
47
48
-
[See more examples below.](#usage)
48
+
[Lihat contoh lainnya di bawah ini.](#usage)
49
49
50
-
The`preload`function provides the browser with a hint that it should start downloading the given resource, which can save time.
50
+
Fungsi`preload`memberikan petunjuk kepada browser untuk mulai mengunduh sumber daya yang diberikan, yang dapat menghemat waktu.
51
51
52
-
#### Parameters {/*parameters*/}
52
+
#### Parameter {/*parameters*/}
53
53
54
-
*`href`: a string. The URL of the resource you want to download.
55
-
*`options`: an object. It contains the following properties:
56
-
*`as`: a required string. The type of resource. Its [possible values](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#as)are`audio`, `document`, `embed`, `fetch`, `font`, `image`, `object`, `script`, `style`, `track`, `video`, `worker`.
57
-
*`crossOrigin`: a string. The [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin)to use. Its possible values are`anonymous`and`use-credentials`. It is required when `as`is set to`"fetch"`.
58
-
*`referrerPolicy`: a string. The [Referrer header](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#referrerpolicy)to send when fetching. Its possible values are`no-referrer-when-downgrade` (the default), `no-referrer`, `origin`, `origin-when-cross-origin`, and`unsafe-url`.
59
-
*`integrity`: a string. A cryptographic hash of the resource, to [verify its authenticity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity).
60
-
*`type`: a string. The MIME type of the resource.
61
-
*`nonce`: a string. A cryptographic [nonce to allow the resource](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce)when using a strict Content Security Policy.
62
-
*`fetchPriority`: a string. Suggests a relative priority for fetching the resource. The possible values are`auto` (the default), `high`, and`low`.
63
-
*`imageSrcSet`: a string. For use only with`as: "image"`. Specifies the [source set of the image](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).
64
-
*`imageSizes`: a string. For use only with`as: "image"`. Specifies the [sizes of the image](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).
54
+
*`href`: sebuah string. URL sumber daya yang ingin Anda unduh.
55
+
*`options`: sebuah objek. Ini berisi properti-properti berikut:
56
+
*`as`: string yang diperlukan. Jenis sumber daya. Nilai [yang memungkinkan](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#as)adalah`audio`, `document`, `embed`, `fetch`, `font`, `image`, `object`, `script`, `style`, `track`, `video`, `worker`.
57
+
*`crossOrigin`: sebuah string. [Kebijakan CORS](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin)yang akan digunakan. Nilai yang mungkin adalah`anonymous`dan`use-credentials`. Ini diperlukan ketika `as`disetel ke`"fetch"`.
58
+
*`referrerPolicy`: sebuah string. [Referrer header](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#referrerpolicy)yang akan dikirim saat *fetching*. Nilai yang memungkinkan adalah`no-referrer-when-downgrade` (default), `no-referrer`, `origin`, `origin-when-cross-origin`, dan`unsafe-url`.
59
+
*`integrity`: sebuah string. Hash kriptografi sumber daya, untuk [memverifikasi keasliannya](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity).
60
+
*`type`: sebuah string. Jenis MIME sumber daya.
61
+
*`nonce`: sebuah string. Sebuah kriptografi [*nonce* untuk mengizinkan sumber daya](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce)ketika menggunakan *Content Security Policy* yang ketat.
62
+
*`fetchPriority`: sebuah string. Menyarankan prioritas relatif untuk mengambil sumber daya. Nilai yang memungkinkan adalah`auto` (default), `high`, dan`low`.
63
+
*`imageSrcSet`: sebuah string. Hanya untuk digunakan dengan`as: “image"`. Menentukan [kumpulan sumber gambar](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).
64
+
*`imageSizes`: sebuah string. Hanya untuk digunakan dengan`as: “image"`. Menentukan [ukuran gambar](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).
65
65
66
-
#### Returns {/*returns*/}
66
+
#### Kembalian {/*returns*/}
67
67
68
-
`preload`returns nothing.
68
+
`preload`tidak mengembalikan apa pun.
69
69
70
-
#### Caveats {/*caveats*/}
70
+
#### Peringatan {/*caveats*/}
71
71
72
-
*Multiple equivalent calls to`preload`have the same effect as a single call. Calls to`preload`are considered equivalent according to the following rules:
73
-
*Two calls are equivalent if they have the same `href`, except:
74
-
*If`as`is set to `image`, two calls are equivalent if they have the same `href`, `imageSrcSet`, and`imageSizes`.
75
-
*In the browser, you can call`preload`in any situation: while rendering a component, in an Effect, in an event handler, and so on.
76
-
*In server-side rendering or when rendering Server Components, `preload`only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored.
72
+
*Beberapa panggilan setara ke`preload`memiliki efek yang sama dengan panggilan tunggal. Panggilan ke`preload`dianggap setara menurut aturan berikut:
73
+
*Dua pemanggilan setara jika memiliki `href` yang sama, kecuali:
74
+
*Jika`as`diset ke `image`, dua panggilan setara jika memiliki `href`, `imageSrcSet`, dan`imageSizes` yang sama.
75
+
*Di browser, Anda dapat memanggil`preload`dalam situasi apa pun: saat me-*render* komponen, di *Effect*, di *event handler*, dan sebagainya.
76
+
*Dalam rendering sisi server atau saat merender Komponen Server, `preload`hanya memiliki efek jika Anda memanggilnya saat me-*render* komponen atau dalam konteks asinkronisasi yang berasal dari rendering komponen. Pemanggilan lainnya akan diabaikan.
77
77
78
78
---
79
79
80
-
## Usage {/*usage*/}
80
+
## Penggunaan {/*usage*/}
81
81
82
-
### Preloading when rendering {/*preloading-when-rendering*/}
82
+
### Preloading awal saat me-render {/*preloading-when-rendering*/}
83
83
84
-
Call`preload`when rendering a component if you know that it or its children will use a specific resource.
84
+
Panggil`preload`saat me-*render* komponen jika Anda mengetahui bahwa komponen tersebut atau anak komponen akan menggunakan sumber daya tertentu.
85
85
86
86
<RecipestitleText="Examples of preloading">
87
87
88
-
#### Preloading an external script {/*preloading-an-external-script*/}
If you want the browser to start executing the script immediately (rather than just downloading it), use[`preinit`](/reference/react-dom/preinit) instead. If you want to load an ESM module, use[`preloadModule`](/reference/react-dom/preloadModule).
99
+
Jika Anda ingin agar browser segera mengeksekusi skrip (bukan hanya mengunduhnya), gunakan[`preinit`](/reference/react-dom/preinit). Jika Anda ingin memuat modul ESM, gunakan[`preloadModule`](/reference/react-dom/preloadModule).
100
100
101
101
<Solution />
102
102
103
-
#### Preloading a stylesheet {/*preloading-a-stylesheet*/}
If you want the stylesheet to be inserted into the document immediately (which means the browser will start parsing it immediately rather than just downloading it), use[`preinit`](/reference/react-dom/preinit)instead.
114
+
Jika Anda ingin stylesheet disisipkan ke dalam dokumen dengan segera (yang berarti browser akan langsung mem-*parsing*-nya, bukan hanya mengunduhnya), gunakan[`preinit`](/reference/react-dom/preinit)sebagai gantinya.
115
115
116
116
<Solution />
117
117
118
-
#### Preloading a font {/*preloading-a-font*/}
118
+
#### Preloading font {/*preloading-a-font*/}
119
119
120
120
```js
121
121
import { preload } from'react-dom';
@@ -127,11 +127,11 @@ function AppRoot() {
127
127
}
128
128
```
129
129
130
-
If you preload a stylesheet, it's smart to also preload any fonts that the stylesheet refers to. That way, the browser can start downloading the font before it's downloaded and parsed the stylesheet.
130
+
Jika Anda melakukan *preload*stylesheet, sebaiknya Anda juga melakukan *preload* font apa pun yang dirujuk oleh stylesheet tersebut. Dengan begitu, browser dapat mulai mengunduh font sebelum mengunduh dan menguraikan stylesheet.
131
131
132
132
<Solution />
133
133
134
-
#### Preloading an image {/*preloading-an-image*/}
134
+
#### Preloading gambar {/*preloading-an-image*/}
135
135
136
136
```js
137
137
import { preload } from'react-dom';
@@ -146,15 +146,15 @@ function AppRoot() {
146
146
}
147
147
```
148
148
149
-
When preloading an image, the`imageSrcSet`and`imageSizes`options help the browser [fetch the correctly sized image for the size of the screen](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).
149
+
Saat memuat gambar secara *preload*, opsi`imageSrcSet`dan`imageSizes`membantu browser [mengambil gambar dengan ukuran yang tepat untuk ukuran layar](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).
150
150
151
151
<Solution />
152
152
153
153
</Recipes>
154
154
155
-
### Preloading in an event handler {/*preloading-in-an-event-handler*/}
155
+
### Preloading pada event handler {/*preloading-in-an-event-handler*/}
156
156
157
-
Call`preload`in an event handler before transitioning to a page or state where external resources will be needed. This gets the process started earlier than if you call it during the rendering of the new page or state.
157
+
Panggil`preload`dalam *event handler* sebelum bertransisi ke halaman atau state yang membutuhkan sumber daya eksternal. Hal ini akan memulai proses lebih awal dibandingkan jika Anda memanggilnya saat merender halaman atau state baru.
0 commit comments