Menguasai SSR dalam Next.js: Cara Meningkatkan SEO dan Pengalaman Pengguna

SSR (Perenderan Sebelah Pelayan) ialah kaedah lain untuk menjana halaman dalam Next.js. Dalam artikel ini, saya ingin menerangkan apa itu SSR, cara ia berfungsi dan cara melaksanakannya dalam kedua-dua Penghala Halaman dan Penghala Apl bagi projek Next.js.

Apakah SSR?

SSR ialah kaedah menjana halaman statik (atau halaman pra-dipaparkan) selepas pengguna membuat permintaan. Ini bermakna halaman statik dijana pada setiap permintaan. Kaedah ini berguna untuk halaman yang perlu dikemas kini dengan kerap, kerana ia memastikan data sentiasa segar

Bagaimana SSR Berfungsi?

Apabila anda menggunakan SSR dalam Next.js, setiap kali pengguna meminta halaman yang SSR dilaksanakan, halaman tersebut dijana selepas permintaan dibuat. Ini bermakna pengguna perlu menunggu sementara Next.js menjana dan menggabungkan kandungan statik sekali lagi untuk setiap permintaan. Setelah halaman statik sedia, pengguna boleh melihat halaman yang diminta.

Adalah penting untuk ambil perhatian bahawa SSR hanya berjalan pada pelayan dan ia menjana halaman statik untuk setiap permintaan, jadi ia tidak berjalan semasa proses binaan projek.

Cara Melaksanakan SSR dalam Penghala Apl

Untuk melaksanakan SSR dalam Penghala Apl, anda tidak perlu menulis fungsi khas atau menetapkan konfigurasi tertentu kerana ia didayakan secara lalai dalam komponen pelayan anda.

Sebagai contoh, jika anda mempunyai halaman statik dan anda mengambil data daripada API, halaman ini akan menggunakan SSR secara lalai. Adalah penting untuk ambil perhatian bahawa apabila SSR digunakan, halaman itu tidak dihimpunkan atau diprapaparkan pada masa binaan Dan jika anda menggunakan halaman dinamik dalam projek anda, ia akan menggunakan SSG secara lalai jika anda tidak mengambil sebarang data. Tetapi apabila anda mengambil daripada API, ia akan bertukar kepada SSR dan sekali lagi, tiada halaman statik akan digabungkan semasa masa binaan.

ini ialah contoh pelaksanaan SSR dalam laluan statik :

import React from 'react';

const AboutPage = async () => {
  // Fetch data from an API or any server-side source
  const data = getDataFromApi();

  return (
    <div>
      <h1>About Us</h1>
      <p>{data}</p>
    </div>
  );
};

export default AboutPage;

Cara Melaksanakan SSR dalam Penghala Halaman

Untuk melaksanakan SSR dalam penghala halaman, anda perlu mencipta fungsi getServerSideProps dalam fail anda. Fungsi ini akan dipanggil selepas setiap permintaan pengguna. Jika anda menggunakan laluan dinamik, seperti fail [id], anda juga perlu menggunakan getServerSideProps dalam fail anda. Fungsi ini mengambil hujah, sering dinamakan konteks, dari mana anda boleh mendapatkan id, nilai halaman dinamik. Fungsi ini dipanggil oleh pelayan pada setiap permintaan pengguna.

ini ialah contoh pelaksanaan dalam fail tsx :

import { GetServerSideProps } from 'next';

interface AboutProps {
  data: string;
}

const AboutPage: React.FC<AboutProps> = ({ data }) => {
  return (
    <div>
      <h1>About Us</h1>
      <p>{data}</p>
    </div>
  );
};

// This function runs on the server on every request
export const getServerSideProps: GetServerSideProps = async () => {
  const data = getDataFromApi();
  return {
    props: {
      data,
    },
  };
};

export default AboutPage;

ini ialah contoh pelaksanaan dalam fail jsx :

const AboutPage = ({ data }) => {
  return (
    <div>
      <h1>About Us</h1>
      <p>{data}</p>
    </div>
  );
};

// This function runs on the server on every request
export async function getServerSideProps() {
  const data = getDataFromApi();

  return {
    props: {
      data,
    },
  };
}

export default AboutPage;

Kesimpulan

SSR ialah kaedah yang berguna untuk menghimpun atau mencipta halaman statik, tetapi ia tidak berlaku semasa masa binaan. Apabila anda memerlukan halaman anda dikemas kini pada setiap permintaan pengguna supaya pengguna dapat melihat data terkini, anda boleh menggunakan SSR. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa ia mungkin mengambil lebih banyak masa dan tidak sepantas kaedah lain seperti SSG (Penjanaan Tapak Statik) atau ISR (Penjanaan Semula Statik Bertambah) kerana ia menjana halaman statik untuk setiap permintaan pengguna.

Saya harap anda menikmati artikel ini! Jika anda mempunyai sebarang soalan, sila tanya saya. Jika anda ingin membaca tentang ISR dan SSG, anda boleh menyemak artikel saya mengenainya di sini untuk ISR dan di sini untuk SSG. Jika anda ingin mengetahui lebih lanjut tentang segala-galanya, anda boleh mengikuti laman web saya.

Terima kasih kerana membaca! Selamat tinggal sekarang!

Atas ialah kandungan terperinci Menguasai SSR dalam Next.js: Cara Meningkatkan SEO dan Pengalaman Pengguna. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!