Cara Menggunakan Tindakan Server Next.js

Rilis Next.js 13.4 hadir dengan router Aplikasi yang stabil dan kemampuan untuk melakukan mutasi data dengan tindakan server. Fitur ini adalah pengubah permainan mutlak karena memungkinkan Anda melakukan mutasi data sepenuhnya dari komponen server. Ini membawa sejumlah manfaat di berbagai bidang seperti kecepatan, keamanan, dan kinerja aplikasi secara keseluruhan.

Pelajari apa itu tindakan server dan cara menggunakan fitur baru ini di aplikasi Next.js Anda.

Apa Itu Tindakan Server?

Tindakan server memungkinkan Anda untuk menulis fungsi sisi server satu kali tepat di samping komponen server Anda. Ini sangat besar karena Anda tidak perlu lagi menulis rute API saat mengirimkan formulir atau melakukan mutasi data lainnya, termasuk Mutasi data GraphQL.

Anda dapat memiliki fungsi yang berjalan di server Anda, dan Anda kemudian dapat memanggilnya dari komponen klien atau server. Ini adalah fitur alfa di Next.js 13.4, dan dibangun di atas React Actions. Menggunakan tindakan server akan mengurangi JavaScript sisi klien, dan dapat membantu Anda membuat formulir yang ditingkatkan secara progresif.

Contoh Tindakan Server

Dengan tindakan server, Anda dapat melakukan mutasi di dalam Next.js, di server. Lihat fitur baru ini dengan contoh halaman Next.js yang menampilkan formulir yang memungkinkan Anda membuat postingan.

Berikut impornya:

impor Tautan dari"berikutnya/tautan"
impor FormGroup dari"@/komponen/FormGroup"
impor { tag validasi ulang } dari"berikutnya/cache"
impor { alihkan } dari"berikutnya/navigasi"

Sekarang untuk kode untuk membuat postingan. Fungsi ini adalah tindakan server; itu berjalan di server dan mengirimkan judul dan isi posting ke API (yang membuat posting di database):

asinkronfungsibuat Posting(data) {
"gunakan server"
const judul = data.get("judul")
const tubuh = data.dapatkan("tubuh")
menunggu mengambil(" http://127.0.0.1/posts", {
 tajuk: {"Jenis konten": "aplikasi/json"},
 metode: POS,
 tubuh: JSON.stringify({judul, isi})
 })
 validasi ulangTag("postingan")
 mengalihkan("/")
}

Fungsi ini mendapatkan judul dan isi posting yang kemudian dikirim ke /posts titik akhir melalui permintaan POST. Ini kemudian memaksa cache untuk me-refresh konten yang terkait dengan tag "posts", dan mengalihkan kembali ke beranda.

Berikut ini formulir untuk mengumpulkan judul dan isi posting baru:

eksporbawaan FormulirPostBaru() {
kembali (





"judul">Judul</label>
"teks" nama="judul" id="judul" />
 </FormGroup>
 </div>




"judul">Tubuh</label>
"text" name=<span>"body"</span> id=<span>"body"</span>> <span><span><<span>textarea</span>/>< /span></span><br> <<span>/FormGroup></span><br> <<span>/div></span><p><code> <div>
<br> <button> Simpan <<span>/button></span><br> <<span>/div></span><br> <<span>/form></span><br> )<br>}<br>  <p>Anda dapat melihat bahwa formulir tidak berisi logika yang berkaitan dengan pembuatan postingan, hanya tindakan formulir: fungsi <strong>createPost()</strong>. Ingatlah bahwa fungsi createPost memiliki arahan "use server" yang menyatakan bahwa semuanya ada di dalamnya fungsi harus berjalan di server.</p> <p>Semua kode berjalan di server, dan klien Anda tidak tahu apa-apa tentang itu. Ini karena form adalah komponen server dan tidak ada yang dirender secara dinamis di klien.</p> <p>Saat Anda mengeklik tombol <strong>Simpan</strong>, Next.js memanggil <strong>createPost()</strong> fungsi. Ini mengirimkan judul dan isi sebagai data formulir, yang diposting ke API lokal untuk menyimpan informasi.</p> <h2 id="revalidating-the-post"> Memvalidasi Ulang Posting </h2> <p>Di bagian bawah fungsi <strong>createPost()</strong> terdapat baris kode berikut:</p> <pre> <code>revalidateTags(<span>"posts"</span>)< /kode> </code></pre> <p>Untuk memahami fungsi tersebut, bayangkan Anda memiliki halaman postingan. Di dalam komponen posts, Anda akan memanggil fungsi bernama <strong>getPosts()</strong> untuk mendapatkan semua postingan dari database Anda dan merendernya untuk dilihat pengguna:</p> <pre> <code><span>export</span> <span>default</span> <span>async</span> <span><span>function</span> <span>Posts</span>() span>{<br> <span>const</span> posts = <span>menunggu</span> getPosts()</span></code><p><code> <span>return</span> (<br> <div>
<br> {posts.map(<span><span>post</span> = ></span> {<br> <postcard key="{post.id}"></postcard><br> })}<br> <<span>/div></span><br> )<br>}<br>  <p>Fungsi <strong>getPosts()</strong> akan terlihat seperti ini:</p> <pre> <code><span>async</span> <span><span>fungsi</span> <span>getPosts</span>() </span>{<br> <span>const</span> res = <span>menunggu</span> ambil(<span>" https://127.0.0.1/posts? sort=title"</span>, {<br> selanjutnya: {<span>tag</span>: [<span>"postingan"</span>], <span>validasi ulang</span>: <span>3600</span> }<br> })</code><p><code> <span>return</span> res.json()<br>}<br></code> </p></pre> <p>Fungsi ini meneruskan opsi <strong>berikutnya</strong> untuk mengambil, memungkinkan Anda menyetel periode validasi ulang. Secara default, setiap permintaan pengambilan yang Anda buat di dalam komponen server akan di-cache selamanya. Melacak cache dan menyegarkannya saat diperlukan adalah bagian penting dari <span>pengambilan data Next.js</span>.</p> <p>Kode di atas memberi tahu Next.js untuk meng-cache data <strong>posts</strong> hingga satu jam (3.600 detik). Setelah satu jam, data menjadi basi dan Next.js menyegarkannya untuk mendapatkan data terbaru dari database.</p> <p>Ingat itu fungsi <strong>createPost()</strong> memanggil <strong>revalidateTag("posts")</strong> setelah menyelesaikan sisa pekerjaannya. Hal ini memaksa Next.js untuk mengambil ulang data tersebut yang seharusnya menyertakan postingan baru yang baru saja dibuat oleh aplikasi.</p> <h2 id="proof-that-your-code-is-running-on-the-server"> Bukti Bahwa Kode Anda Berjalan di Server </h2> <p>Untuk memastikan bahwa semua kode berjalan di server, Anda dapat menambahkan pernyataan log konsol berikut di dalam <strong>createPost()</strong> fungsi:</p> <pre> <code><span>console</span>.log(<span>"Berjalan di server"</span>)</code> </pre> <p>Kemudian, coba buat postingan baru dengan mengklik tombol kirim. Jika kode Anda berjalan di server, pesan log itu akan muncul di terminal Anda. Namun jika dijalankan pada klien, maka log akan muncul di konsol browser.</p> <p>Ini membuatnya aman untuk menempatkan sensitif informasi seperti variabel lingkungan, koneksi basis data, dan kata sandi di server tanpa takut terekspos ke klien. Anda kemudian dapat <span>membaca string dari file .env Anda</span> di aplikasi Next.js Anda.</p> <p>Anda dapat ingin mencadangkan penggunaan tindakan server untuk versi Next.js setelah 13.4, terutama di produksi. Tapi masih sangat menarik untuk melihat ke mana fitur ini pergi karena terus mendorong apa yang dapat Anda lakukan dengan memindahkan lebih banyak barang ke server. Itu akan membuat aplikasi klien Anda lebih mudah untuk ditulis, dan proses pengembangannya jauh lebih menyenangkan.</p> <h2 id="learn-more-about-migrating-to-next-js"> Pelajari Lebih Lanjut Tentang Migrasi ke Berikutnya .js </h2> <p>Banyak developer front-end menggunakan React untuk pengembangan UI. Namun berkat fitur seperti perenderan sisi server dan pembuatan situs statis, banyak dari pengembang ini memigrasikan aplikasi mereka untuk menggunakan Next.js. Migrasi ini sangat mudah karena React sangat mirip dengan sintaksis Next.js.</p> <p>Performa tambahan dan peningkatan keamanan mengharuskan migrasi lebih banyak lagi. Kemampuan untuk memiliki komponen sisi server, digabungkan dengan tindakan server baru yang baru saja kita bahas, menjadikan Next.js pilihan yang lebih aman dan berkinerja dibandingkan dengan React biasa. Sebagai pengembang React, Anda harus mempelajari cara memigrasikan aplikasi Anda ke Next.js.</p> </div></code></p></pre></button>
</div></code></p></span>