Bagaimana menerapkan SSR dan Hidrasi sisi klien di Next.js – Beragampengetahuan
Contents
Mekanisme perakitan dan pembaruan data di SSR dan Hidrasi
Artikel ini menjelaskan alur kerja untuk rendering sisi server (SSR) dan hidrasi sisi klien di Next.js. Ini mencakup proses injeksi data sisi server, hidrasi sisi klien, dan mekanisme untuk memastikan bahwa data diperbarui secara tepat waktu (misalnya, self.__next_f). Selain itu, kami mendiskusikan skenario pemrosesan page.js Muat sebelum data.
1. Alur kerja rendering sisi server (SSR).
a) Server memperoleh data
Dalam kerangka SSR seperti Next.js, data yang diperlukan untuk halaman diperoleh di sisi server, biasanya menggunakan getServerSideProps atau getStaticProps.
contoh:
1 export async function getServerSideProps()
2 const res = await fetch('https://api.example.com/data');
3 const data = await res.json();
4 return props: data ;
5
b) Memasukkan data ke dalam HTML
Setelah data diperoleh, data tersebut dimasukkan ke dalam HTML, biasanya menggunakan:
- tag skrip: Membuat serial data ke JSON dan menyematkannya.
- variabel global: Menetapkan data ke variabel global, misalnya
self.__next_f.
c) Kirim HTML ke klien
HTML yang berisi data dikirim ke klien.
d) Hidrasi klien
Di sisi klien, React dan halaman JavaScript mengekstrak data yang dimasukkan server dan “mengaktifkan” HTML statis menggunakan ReactDOM.hydrate.
2. Detail implementasi
a) Injeksi data sisi server
Data diserialkan ke JSON dan tertanam dalam HTML <script> Label.
contoh:
1 import ReactDOMServer from 'react-dom/server';
2
3 function App( data )
4 return <div>data.message</div>;
5
6
7 export async function getServerSideProps()
8 const data = message: 'Hello, world!' ;
9 return props: data ;
10
11
12 export function renderToStringWithData(App, props)
13 const html = ReactDOMServer.renderToString(<App ...props />);
14 const dataScript = `<script>self.__next_f = $JSON.stringify(props);</script>`;
15 return `
16 <!DOCTYPE html>
17 <html>
18 <head><title>SSR Example</title></head>
19 <body>
20 <div id="root">$html</div>
21 $dataScript
22 <script src="/client.js"></script>
23 </body>
24 </html>
25 `;
26
b) Rehidrasi pelanggan
Klien mengekstrak data darinya self.__next_f dan aktifkan halaman tersebut.
contoh:
1 import React from 'react';
2 import ReactDOM from 'react-dom';
3 import App from './App';
4
5 const data = self.__next_f;
6 ReactDOM.hydrate(<App ...data />, document.getElementById('root'));
3. Pastikan untuk memperbarui self.__next_f tepat waktu
a) Gunakan agen untuk memantau perubahan
satu Proxy Objek dapat melacak perubahan self.__next_f Dan memicu hidrasi ketika data diperbarui.
contoh:
1 self.__next_f = self.__next_f || [];
2
3 self.__next_f = new Proxy(self.__next_f,
4 set(target, prop, value)
5 const result = Reflect.set(target, prop, value);
6 if (prop === 'length' && value > 0)
7 console.log('Data updated:', target);
8 hydrateApp(target);
9
10 return result;
11
12 );
13
14 function hydrateApp(data)
15 const parsedData = JSON.parse(data[0][1]);
16 ReactDOM.hydrate(<App data=parsedData />, document.getElementById('root'));
17
b) Pemantauan data page.js
Skrip menunggu data tersedia sebelum melanjutkan.
contoh:
1 function waitForData() {
2 return new Promise((resolve) =>
3 if (self.__next_f && self.__next_f.length > 0)
4 resolve();
5 else
6 const observer = new MutationObserver(() =>
7 if (self.__next_f && self.__next_f.length > 0)
8 observer.disconnect();
9 resolve();
10
11 );
12 observer.observe(document.body, childList: true, subtree: true );
13
14 );
15 }
16
17 waitForData().then(() =>
18 const data = JSON.parse(self.__next_f[0][1]);
19 ReactDOM.hydrate(<App data=data />, document.getElementById('root'));
20 );
4. Pemrosesan page.js Sebelum memuat data
a) Inisialisasi self.__next_f
Tambahkan skrip inisialisasi di header HTML:
1 <script>
2 self.__next_f = self.__next_f || [];
3 </script>
b) Sematkan data setelah HTML
Sematkan data setelah HTML:
1 <script>
2 self.__next_f.push([1, "\"name\":\"The Octocat\""]);
3 </script>
sebagai kesimpulan
Dengan menerapkan strategi ini, Anda dapat:
- Pastikan data sisi server dimasukkan dengan benar ke dalam HTML.
- Promosikan klien untuk mengisi kembali air tepat waktu.
- Tangani situasi berikut
page.jsMuat sebelum data.
Praktik ini meningkatkan keandalan dan efisiensi SSR dan hidrasi di Next.js.
rencana pengembangan website
metode pengembangan website
jelaskan beberapa rencana untuk pengembangan website, proses pengembangan website, kekuatan dan kelemahan bisnis pengembangan website
, jasa pengembangan website, tahap pengembangan website, biaya pengembangan website
#Bagaimana #menerapkan #SSR #dan #Hidrasi #sisi #klien #Next.js
