SSR dalam Next.js Perkara Baharu dalam Penghalaan Apl Berbanding dengan Penghalaan Halaman

Pengenalan

Next.js telah lama menjadi pilihan popular untuk membina aplikasi React yang diberikan pelayan. Dengan sokongan terbina dalam untuk Perenderan Sisi Pelayan (SSR), pembangun boleh mencipta aplikasi yang dinamik dan mesra SEO. Walau bagaimanapun, pengenalan Penghala Apl dalam Next.js 13 dan penambahbaikan dalam Next.js 14 telah memudahkan dan meningkatkan SSR dengan ketara.

Dalam catatan blog ini, kami akan meneroka perbezaan dalam SSR antara sistem Penghalaan Halaman tradisional dan sistem Penghalaan Apl yang lebih baharu, menyerlahkan cara SSR berfungsi dan cara ia diubah dengan paradigma penghalaan baharu.

SSR dalam Penghalaan Halaman (Pre-Next.js 13)

Sebelum Penghala Apl diperkenalkan, SSR telah dikendalikan dalam sistem Penghalaan Halaman menggunakan fungsi tertentu seperti getServerSideProps. Fungsi ini dipanggil pada setiap permintaan, membenarkan pembangun mengambil bahagian pelayan data sebelum memaparkan halaman.

Contoh SSR dalam Penghalaan Halaman menggunakan getServerSideProps:

export default function Blogs({ data }) {
  // Render the fetched data
  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>
          <h3>{item.title}</h3>
          <p>{item.content}</p>
        </div>
      ))}
    </div>
  );
}

// This function runs on every request
export async function getServerSideProps() {
  // Fetch data from an external API
  const res = await fetch('https://api.example.com/blogs');
  const data = await res.json();

  // Pass the data as props to the page component
  return { props: { data } };
}

Di sini, getServerSideProps ialah kunci kepada SSR dalam sistem Penghalaan Halaman. Ia membolehkan anda mengambil data daripada API (atau mana-mana sumber data lain) pada setiap permintaan dan menyerahkannya kepada komponen halaman sebagai prop. Corak ini, walaupun berkuasa, boleh menghasilkan pangkalan kod yang kompleks apabila mengendalikan banyak logik sisi pelayan dan laluan yang berbeza.

Penghalaan Apl dan SSR dalam Next.js 14

Dengan Next.js 14, SSR telah menjadi lebih diperkemas dan disepadukan ke dalam sistem Penghalaan Apl. Sistem baharu ini memperkenalkan Komponen Pelayan dan Komponen Pelanggan, di mana SSR adalah lebih intuitif.

Dalam Penghalaan Apl, anda kini boleh terus mengambil data di dalam komponen tanpa memerlukan fungsi khas seperti getServerSideProps. Anda boleh mencapai ini dengan menggunakan tindakan pelayan, yang menjadikan kod lebih mudah dan lebih mudah untuk diselenggara.

Contoh SSR dalam Penghalaan Apl dengan Komponen Pelayan:

"use server";

export async function getBlogs() {
  try {
    const response = await fetch('https://api.example.com/posts');
    return response.json();
  } catch (error) {
    return { error: error.message };
  }
}

// This component runs on the server and fetches data
export default async function Blog() {
  const blogs = await getBlogs();

  return (
    <div>
      {(blogs || []).map((blog) => (
        <div key={blog._id}>
          <h3>{blog.name}</h3>
          <p>{blog.content}</p>
        </div>
      ))}
    </div>
  );
}

Dalam contoh Penghalaan Apl ini, kami menggunakan Komponen Pelayan untuk mengambil data terus di dalam fail komponen menggunakan pelayan guna. Ini mengalih keluar keperluan untuk laluan API berasingan atau fungsi seperti getServerSideProps.

Kuasa Tindakan Pelayan
Next.js 14 memudahkan proses dengan memperkenalkan tindakan pelayan. Tindakan ini membolehkan anda mengambil dan memproses data secara langsung dalam fail komponen, mengurangkan kerumitan dan menjadikan pangkalan kod anda lebih boleh diselenggara.

Faedah Utama tindakan pelayan:

Kod Pembersih: Daripada menyerakkan logik sisi pelayan dalam fail atau fungsi yang berasingan, anda boleh menyimpan semuanya di satu tempat.
Kebolehselenggaraan yang Dipertingkatkan: Lebih sedikit bahagian bergerak bermakna kurang kod untuk diurus, menjadikan aplikasi anda lebih mudah diselenggara.
Prestasi Lebih Baik: Dengan mekanisme caching pintar, anda boleh memperhalusi logik bahagian pelayan anda untuk prestasi optimum.

Penghidratan dalam Next.js

Dalam konteks Next.js dan pemaparan sisi pelayan (SSR), penghidratan merujuk kepada proses di mana halaman HTML yang dipaparkan secara statik (dihantar daripada pelayan) ditukar menjadi aplikasi React interaktif sepenuhnya dalam penyemak imbas. Ia "menghidrat" HTML statik dengan JavaScript sisi klien React untuk menjadikan halaman interaktif.

Penghidratan dalam Penghalaan Apl lwn Penghalaan Halaman

Dalam Penghalaan Halaman, penghidratan diperlukan untuk setiap komponen pada halaman, menjadikannya interaktif di sisi pelanggan. Ini bermakna semua JavaScript yang diperlukan untuk interaksi dihantar kepada pelanggan, yang boleh menyebabkan kesesakan prestasi apabila aplikasi meningkat.

Dalam Penghalaan Apl, dengan Komponen Pelayan, hanya Komponen Pelanggan (yang mengendalikan interaktiviti) terhidrat. Penghidratan terpilih ini mengurangkan jumlah JavaScript yang dihantar kepada pelanggan, menghasilkan prestasi yang lebih baik.

Contoh Komponen Pelanggan dalam Penghalaan Apl:

'use client';  // Mark this as a client component

export default function Button() {
  return (
    <button onClick={() => alert('Button clicked!')}>Click Me</button>
  );
}

Di sini, komponen Butang ditandakan sebagai Komponen Pelanggan dengan 'use client'. Ia membolehkan interaktiviti dan berjalan pada bahagian pelanggan, manakala komponen bukan interaktif lain kekal sebagai Komponen Pelayan, meningkatkan prestasi.

Lagi Mengenai penghidratan dalam Penghalaan Apl

Begini cara ia berfungsi:

Parent Components as Server Components:

The parent components (usually the higher-level components or entire page components) are typically Server Components. They run on the server and handle things like data fetching, rendering static HTML, and passing that data down to child components.
Since these are server-rendered, they do not include any JavaScript on the client-side, and they are not interactive.

Client Components for Interactivity:

Child components, which handle interactivity (like buttons, forms, etc.), are Client Components. These components can use React hooks (useState, useEffect, etc.) and are hydrated on the client-side.
Server Components pass data to these Client Components via props.
Once the HTML is loaded in the browser, Next.js hydrates the Client Components, attaching the necessary event listeners and making the page interactive.

// Server Component (Parent Component)
export default async function ParentComponent() {
  // Fetch data on the server
  const data = await fetch('https://api.example.com/data').then(res => res.json());

  return (
    <div>
      <h1>This is Server-Side Rendered</h1>
      <ClientComponent data={data} />
    </div>
  );
}

// Client Component (Child Component)
'use client';

import { useState } from 'react';

function ClientComponent({ data }) {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Data from server: {JSON.stringify(data)}</p>
      <p>Client-side counter: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Conclusion

Next.js 14 makes Server-Side Rendering (SSR) easier and more powerful with the introduction of server actions in the App Router. By allowing developers to fetch data directly inside component files, this new system streamlines server-side logic, simplifies codebases, and reduces the need for separate API routes. Coupled with selective hydration, SSR in Next.js 14 is now faster and more efficient, helping you build highly dynamic and SEO-friendly applications with ease.

By leveraging these server actions, you can improve your app’s performance while keeping your code clean and maintainable. The shift from Page Routing to App Routing with Server and Client Components represents a major leap forward in building scalable web applications.

Atas ialah kandungan terperinci SSR dalam Next.js Perkara Baharu dalam Penghalaan Apl Berbanding dengan Penghalaan Halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!