Dalam dunia pembangunan web, menyediakan pengalaman pengguna yang pantas dan lancar adalah penting. Satu cara untuk mencapainya ialah melalui pemaparan sisi pelayan (SSR), teknologi yang membolehkan halaman web dipaparkan pada pelayan sebelum dihantar kepada klien. SSR memberikan banyak faedah, termasuk prestasi yang lebih baik, pengoptimuman SEO dan interaksi pengguna yang lebih baik. Dalam artikel ini, kami akan meneroka asas SSR menggunakan Next.js, rangka kerja JavaScript yang popular untuk membina aplikasi React yang diberikan pelayan.

Apakah itu Perenderan Sisi Pelayan (SSR)?

Secara tradisinya, aplikasi web bergantung pada pemaparan sisi pelanggan, di mana keseluruhan proses pemaparan berlaku pada penyemak imbas menggunakan JavaScript. Pendekatan ini berfungsi dengan baik untuk aplikasi kecil, tetapi boleh mengakibatkan pemuatan halaman awal yang lebih perlahan, prestasi SEO yang lemah dan kebolehaksesan yang terhad.

Perenderan sisi pelayan, sebaliknya, melibatkan penjanaan kandungan HTML lengkap pada pelayan dan menghantarnya kepada pelanggan. Pelanggan kemudiannya menerima halaman yang diberikan sepenuhnya, sedia untuk dipaparkan kepada pengguna. Pendekatan ini membolehkan enjin carian merangkak halaman dengan lebih cekap dan meningkatkan prestasi yang dirasakan pengguna.

Memperkenalkan Next.js

Next.js ialah rangka kerja React yang menyediakan keupayaan pemaparan bahagian pelayan terbina dalam. Ia memudahkan proses membina aplikasi SSR dengan mengabstraksikan kerumitan persediaan dan konfigurasi bahagian pelayan. Next.js juga menawarkan ciri seperti pemisahan kod automatik, pemaparan sisi klien dan penjanaan tapak statik, menjadikannya pilihan serba boleh untuk pembangunan web moden.

Sediakan projek Next.js

Untuk mula menggunakan Next.js, pastikan Node.js dipasang pada komputer anda. Cipta direktori baharu untuk projek anda dan mulakannya menggunakan arahan berikut -

npx create-next-app my-next-app

Arahan ini menyediakan projek Next.js baharu dengan fail dan kebergantungan yang diperlukan. Navigasi ke direktori projek dengan menjalankan -

cd my-next-app

Selepas memasuki direktori projek, gunakan arahan berikut untuk memulakan pelayan pembangunan -

npm run dev

Next.js akan memulakan pelayan pembangunan tempatan di http://localhost:3000 dan anda boleh melihat aplikasi anda berjalan dalam penyemak imbas anda.

Buat halaman yang diberikan bahagian pelayan

Next.js menjadikan penciptaan halaman yang dipaparkan di sebelah pelayan sangat mudah. Dalam struktur projek, navigasi ke direktori Halaman dan buat fail baharu yang dipanggil about.js. Fail ini akan mewakili laluan /about dalam aplikasi kami.

Dalam about.js, tambahkan kod berikut -

function About() {
   return (
      <div>
         <h1>About Page</h1>
         <p>This is the server-side rendered About page.</p>
      </div>
   );
}

export default About;

Simpan fail dan jika pelayan pembangunan Next.js sedang berjalan, anda boleh menavigasi ke http://localhost:3000/about untuk melihat halaman yang diberikan.

Mari kita lihat kod dengan lebih dekat. Komponen Perihal ialah komponen berfungsi React yang mengembalikan JSX yang mewakili kandungan halaman Perihal. Dalam kes ini, ia menghasilkan elemen yang mengandungi

tajuk dan

perenggan.

Pernyataan Perihal lalai eksport pada penghujung mengeksport komponen Perihal sebagai eksport lalai, yang membolehkan Next.js mengenalinya sebagai halaman yang dipaparkan di sebelah pelayan.

Selepas mengakses laluan /about, pelayan akan memaparkan komponen Perihal dan pelanggan akan menerima perwakilan HTML penuh halaman tersebut. Pendekatan ini memastikan halaman dipaparkan sepenuhnya sebelum dihantar kepada pengguna, meningkatkan prestasi dan SEO.

Perenderan Sebelah Pelayan Dinamik

Next.js juga menyokong pemaparan bahagian pelayan dinamik, membolehkan kami mendapatkan data daripada API luaran atau melakukan pengiraan bahagian pelayan sebelum memaparkan halaman. Ini membolehkan kami menyediakan kandungan dinamik kepada pengguna tanpa bergantung pada JavaScript sisi pelanggan.

Untuk menunjukkan pemaparan bahagian pelayan yang dinamik, mari buat halaman yang mendapat data daripada API palsu. Dalam direktori halaman, buat fail baharu bernama users.js -

function Users({ users }) {
   return (
      <div>
         <h1>User List</h1>
         <ul>
            {users.map((user) => (
               <li key={user.id}>{user.name}</li>
            ))}
         </ul>
      </div>
   );
}

export async function getServerSideProps() {
   const response = await  fetch('https://api.example.com/users');
   const users = await response.json();

   return {
      props: {
         users,
      },
   };
}

export default Users;

Arahan

Dalam kod di atas, kami mentakrifkan komponen berfungsi Pengguna yang menerima data pengguna sebagai prop. Ia menggunakan data yang diterima untuk memberikan senarai pengguna. Fungsi getServerSideProps ialah fungsi tak segerak yang mendapat data daripada API luaran (https://api.example.com/users dalam kes ini).

Dalam getServerSideProps, kami menggunakan fungsi ambil untuk membuat permintaan HTTP kepada API dan mendapatkan semula data pengguna. Kami kemudian menghuraikan respons ke dalam JSON dan menetapkannya kepada pembolehubah pengguna. Akhir sekali, kami mengembalikan objek dengan prop yang mengandungi data pengguna yang diambil.

Apabila pengguna mengakses laluan /users, Next.js akan memanggil fungsi getServerSideProps pada pelayan untuk mendapatkan data. Data pengguna yang diperoleh akan dihantar sebagai prop kepada komponen Pengguna untuk rendering. Ini memastikan halaman sentiasa dipaparkan dengan data terkini pada setiap permintaan.

Perenderan bahagian pelayan dinamik ialah ciri berkuasa yang membolehkan kami membina halaman dipacu data dan menyampaikan kandungan yang diperibadikan kepada pengguna. Dengan mendapatkan data pada pelayan, kami boleh mengoptimumkan prestasi dan memastikan pengalaman pengguna yang konsisten merentas peranti dan keadaan rangkaian yang berbeza.

Kesimpulan

Perenderan sisi pelayan (SSR) menggunakan Next.js dan JavaScript menyediakan cara yang cekap untuk membina aplikasi web berprestasi tinggi. Dengan memanfaatkan keupayaan pemaparan sebelah pelayan Next.js, kami boleh menyediakan halaman yang dipaparkan sepenuhnya kepada pengguna kami, meningkatkan prestasi, keterlihatan enjin carian dan keseluruhan pengalaman pengguna.

Artikel ini memperkenalkan SSR, menelusuri persediaan projek Next.js dan menunjukkan cara membuat halaman yang dipaparkan di sebelah pelayan. Kami meneroka faedah pemaparan sebelah pelayan dan cara Next.js memudahkan proses melaksanakan SSR dalam aplikasi React.

Atas ialah kandungan terperinci Perenderan sisi pelayan (SSR) menggunakan Next.js dan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!