Server-Side Rendering (SSR) di Next.js menjana HTML pada pelayan untuk setiap permintaan, meningkatkan prestasi dan SEO. 1. SSR sesuai untuk kandungan dinamik yang sering berubah, seperti papan pemuka pengguna. 2. Ia menggunakan GetServersIdeProps untuk mengambil data setiap permintaan dan lulus kepada komponen. 3. Gunakan SSR apabila data perlu dikemas kini, untuk pemeriksaan pengesahan pengguna, atau untuk tujuan SEO. 4. Berbanding dengan SSG dan CSR, SSR adalah yang terbaik untuk data dinamik tetapi memerlukan lebih banyak sumber pelayan. 5. Kelemahan yang berpotensi termasuk beban pelayan dan masa beban yang lebih perlahan kerana menunggu pengambilan data, yang boleh dikurangkan melalui strategi pengoptimuman dan caching.

Rendering sisi pelayan (SSR) adalah ciri yang kuat di Next.js yang membolehkan anda menjana HTML pada pelayan untuk setiap permintaan. Ini bermakna pengguna mendapat halaman sepenuhnya, yang dapat membantu dengan prestasi dan SEO berbanding dengan penyampaian klien.

Apakah penyerahan sisi pelayan di Next.js?

Secara ringkas, SSR di Next.js bermaksud kandungan halaman anda dibina di pelayan setiap kali seseorang melawatnya. Tidak seperti generasi statik, di mana halaman dibina sekali dan dihidangkan dari cache, SSR menjalankan kod anda pada setiap permintaan. Itu menjadikannya sesuai untuk kandungan dinamik seperti papan pemuka pengguna atau halaman yang sering berubah.

Untuk menggunakan SSR di Next.js, anda mengeksport fungsi yang dipanggil getServerSideProps dari halaman anda. Fungsi ini mengambil data apabila halaman diminta dan lulus sebagai prop kepada komponen anda.

Inilah contoh asas:

 Eksport fungsi async geterversideProps () {
  const res = menunggu pengambilan ('https://api.example.com/data');
  const data = menunggu res.json ();

  kembali {props: {data}};
}

Dengan cara ini, halaman mendapat data segar setiap kali ia dimuatkan - tiada kandungan basi.

Bilakah anda harus menggunakan penyampaian sisi pelayan?

Anda akan mahu menggunakan SSR bila:

• Data sering berubah dan perlu dikemas kini pada setiap lawatan.
• Anda memerlukan pemeriksaan pengesahan pengguna masa nyata sebelum menunjukkan halaman.
• Perkara SEO dan kandungan mesti diberikan pelayan untuk enjin carian untuk mengindeks dengan betul.

Sebagai contoh, jika anda membina papan pemuka yang menunjukkan analisis yang diperibadikan, SSR memastikan angka -angka sentiasa terkini tanpa bergantung pada JavaScript untuk dimuatkan selepas halaman membuat.

Beberapa kes penggunaan biasa termasuk:

• Profil pengguna
• Halaman hasil carian
• Halaman di belakang dinding log masuk

Ia tidak semestinya pilihan terbaik walaupun - jika data anda tidak banyak berubah, generasi statik ( getStaticProps ) mungkin lebih cekap.

Bagaimanakah SSR dibandingkan dengan kaedah rendering lain?

Next.js memberi anda beberapa pilihan untuk rendering: SSR, Generasi Statik (SSG), dan Rendering Side Client (CSR). Inilah cara mereka menyusun:

• Generasi Statik (SSG):
  Halaman dibina pada masa membina dan cache. Hebat untuk blog atau halaman pemasaran yang tidak sering berubah.

• Rendering sisi pelayan (SSR):
  Halaman dihasilkan setiap permintaan. Terbaik untuk data dinamik tetapi dilengkapi dengan kos pelayan yang lebih tinggi.

• Rendering sisi pelanggan (CSR):
  Beban kandungan selepas JavaScript berjalan dalam penyemak imbas. Baik untuk aplikasi interaktif tetapi menyakitkan SEO dan pengalaman beban awal.

Jika anda cuba membuat keputusan antara SSG dan SSR, tanya diri anda: Adakah halaman ini perlu menunjukkan kandungan yang berbeza pada setiap lawatan? Jika ya, pergi dengan SSR.

Perkara yang perlu diperhatikan dengan SSR

Satu perkara yang banyak orang terlepas pandang ialah SSR boleh menambah beban ke pelayan anda kerana ia menjalankan kod pada setiap permintaan. Oleh itu, jika anda menjangkakan lalu lintas yang tinggi, pastikan backend anda dapat mengendalikan panggilan yang kerap - atau mempertimbangkan strategi caching.

Juga, kerana halaman menunggu getServerSideProps untuk selesai sebelum membuat, panggilan API perlahan akan memberi kesan langsung kepada masa beban. Anda boleh mempercepatkan perkara dengan:

• Mengoptimumkan titik akhir API anda
• Menggunakan caching di dalam getServerSideProps
• Mengelakkan pengambilan data yang tidak perlu

Satu lagi gotcha kecil: getServerSideProps hanya berfungsi di halaman, bukan komponen. Jadi, jika anda cuba mengambil data di dalam komponen yang boleh diguna semula, anda perlu melakukannya secara berbeza - seperti menggunakan SWR atau React Query pada sisi klien.

基本上就這些。

Atas ialah kandungan terperinci Rendering sisi pelayan dengan Next.js dijelaskan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!