Panduan untuk Rendering Sebelah Pelayan

Perenderan sisi pelayan (SSR) telah wujud sejak sekian lama, tetapi ia patut diterokai dengan lebih lanjut. Teknik ini boleh menjadikan apl web anda lebih pantas dan mesra SEO.

Dalam panduan ini, kami akan menerangkan SSR, sebab anda mungkin mahu menggunakannya dan cara melaksanakannya tanpa menarik rambut anda. Kami akan membincangkan perkara asas, membandingkannya dengan pemaparan sebelah pelanggan dan membincangkan beberapa contoh praktikal.

Apakah pemaparan sebelah pelayan?

Pada asasnya, SSR adalah mengenai memaparkan halaman web anda pada pelayan dan bukannya dalam penyemak imbas. Apabila pengguna meminta halaman, pelayan melakukan semua beban berat dan menghantar halaman yang diberikan sepenuhnya kepada pelanggan. Kemudian, JavaScript pihak pelanggan mengambil alih untuk menjadikannya interaktif.

Pelayan sedang membuat kerja persediaan di dapur, dan penyemak imbas hanya perlu menyarung dan menghidangkan.

Berikut ialah contoh Express.js yang minimum:

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App');

const app = express();

app.get('/', (req, res) => {
  const html = ReactDOMServer.renderToString(<app></app>);
  res.send(`
    
    
      
        <div>



<h2>
  
  
  From server to browser with fully rendered pages
</h2>

<p>When we talk about SSR delivering "fully rendered pages," it's important to understand what that actually means. Let's break it down:</p>

<h3>
  
  
  What is a fully rendered page?
</h3>

<p>A fully rendered page is an HTML document containing all the content users would get when they first load the page. This includes:</p>

<ol>
<li>The complete DOM structure</li>
<li>All text content</li>
<li>Image placeholders and other media elements</li>
<li>Initial styles</li>
</ol>

<p>Here's a basic example:<br>
</p>

<pre class="brush:php;toolbar:false">

  
    <title>My SSR Page</title>
    <style>
      /* Initial styles */
    </style>
  
  
    <header>
      <h1 id="Welcome-to-My-Site">Welcome to My Site</h1>
      <nav><!-- Fully populated navigation --></nav>
    </header>
    <main>
      <article>
        <h2 id="Article-Title">Article Title</h2>
        <p>This is the full content of the article...</p>
      </article>
    </main>
    <footer><!-- Fully populated footer --></footer>
    <script src="hydration.js"></script>
  

Perbezaan antara CSR

Sebaliknya, HTML permulaan yang diberikan sebelah klien (CSR) mungkin seperti ini:

  
    <title>My CSR Page</title>
  
  
    <div>



<p>The CSR page relies entirely on JavaScript to populate the content.</p>

<h3>
  
  
  Benefits of fully rendered HTML
</h3>

<ol>
<li>
<strong>Faster Initial Paint</strong>: The browser can start rendering content immediately.</li>
<li>
<strong>Better SEO</strong>: Search engines read all your content without executing JavaScript.</li>
<li>
<strong>Improved Accessibility</strong>: Screen readers and other assistive technologies can access content immediately.</li>
<li>
<strong>Resilience</strong>: Basic content is available even if JavaScript fails to load.</li>
</ol>

<h3>
  
  
  The hydration process
</h3>

<p>After sending the fully rendered HTML, SSR applications typically go through a process called hydration:</p>

<ol>
<li>The server sends the fully rendered HTML.</li>
<li>The browser displays this HTML immediately.</li>
<li>JavaScript loads and <em>hydrates</em> the page, adding interactivity.</li>
</ol>



<pre class="brush:php;toolbar:false">// Simplified React hydration example
import { hydrateRoot } from 'react-dom/client';
import App from './App';

const domNode = document.getElementById('root');
hydrateRoot(domNode, <app></app>);

Proses ini membolehkan pemuatan awal yang pantas sambil masih menyediakan interaktiviti yang kaya dengan apl web moden.

Ingat, walaupun SSR menyediakan halaman yang dipaparkan sepenuhnya ini, ia bukan tanpa pertukaran. Pelayan melakukan lebih banyak kerja, dan anda perlu mengendalikan keadaan dengan berhati-hati antara pelayan dan klien. Walau bagaimanapun, untuk kebanyakan aplikasi, faedah halaman yang dipaparkan sepenuhnya menjadikan SSR pilihan yang menarik.

Apakah perbezaan antara CSR dan SSR?

Rendering Sisi Pelanggan (CSR) dan Rendering Sisi Pelayan (SSR) ialah dua pendekatan berbeza untuk memaparkan halaman web. Berikut ialah pecahan perbezaan utama mereka:

Paparan sisi pelanggan (CSR)

1. Pelayan menghantar fail HTML minimum dengan berkas JavaScript.
2. Pelayar memuat turun dan menjalankan JavaScript.
3. JavaScript mencipta kandungan halaman dan menjadikannya interaktif.

Kebaikan:

• Interaksi lancar selepas beban awal
• Kurang sumber pelayan diperlukan

Keburukan:

• Pemuatan halaman awal yang lebih perlahan
• Cabaran SEO yang berpotensi

Paparan sisi pelayan (SSR)

1. Pelayan mencipta kandungan HTML penuh.
2. Pelayar menerima dan memaparkan HTML pra-diberikan dengan cepat.
3. JavaScript kemudian dimuatkan untuk menjadikan halaman interaktif sepenuhnya.

Kebaikan:

• Pemuatan halaman awal yang lebih pantas
• Lebih baik untuk SEO
• Berfungsi dengan baik pada peranti yang lebih perlahan

Keburukan:

• Ia boleh menjadi lebih kompleks untuk disediakan
• Boleh menggunakan lebih banyak sumber pelayan

Berikut ialah perbandingan visual yang mudah:

Pada dasarnya, CSR berfungsi lebih dalam pelayar, manakala SSR melakukan lebih banyak pada pelayan. Pilihan antara mereka bergantung pada keperluan khusus projek anda, mengimbangi faktor seperti masa muat awal, keperluan SEO dan sumber pelayan.

SSR dan enjin carian: padanan yang dibuat dalam HTTP

Perenderan sisi pelayan boleh memberi impak yang besar pada cara enjin carian melihat tapak anda. Jom pecahkan:

1. Pengindeksan Lebih Pantas

Bot enjin carian tidak sabar. Mereka mahu melihat kandungan anda SEKARANG. Dengan SSR, halaman anda sedia untuk digunakan apabila bot datang mengetuk — tidak perlu menunggu JavaScript untuk dimuatkan dan dipaparkan.

1. Konsistensi kandungan

SSR memastikan enjin carian melihat kandungan yang sama seperti yang dilakukan pengguna. Dengan pemaparan sebelah pelanggan, sentiasa ada risiko bahawa bot mungkin terlepas beberapa kandungan yang dimuatkan secara dinamik.

1. Masa Muatan Yang Diperbaiki

Enjin carian menyukai tapak pantas. SSR boleh mengurangkan masa pemuatan awal dengan ketara, yang boleh memberi anda sedikit kelebihan dalam kedudukan.

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App');

const app = express();

app.get('/', (req, res) => {
  const html = ReactDOMServer.renderToString(<app></app>);
  res.send(`
    
    
      
        <div>



<h2>
  
  
  From server to browser with fully rendered pages
</h2>

<p>When we talk about SSR delivering "fully rendered pages," it's important to understand what that actually means. Let's break it down:</p>

<h3>
  
  
  What is a fully rendered page?
</h3>

<p>A fully rendered page is an HTML document containing all the content users would get when they first load the page. This includes:</p>

<ol>
<li>The complete DOM structure</li>
<li>All text content</li>
<li>Image placeholders and other media elements</li>
<li>Initial styles</li>
</ol>

<p>Here's a basic example:<br>
</p>

<pre class="brush:php;toolbar:false">

  
    <title>My SSR Page</title>
    <style>
      /* Initial styles */
    </style>
  
  
    <header>
      <h1 id="Welcome-to-My-Site">Welcome to My Site</h1>
      <nav><!-- Fully populated navigation --></nav>
    </header>
    <main>
      <article>
        <h2 id="Article-Title">Article Title</h2>
        <p>This is the full content of the article...</p>
      </article>
    </main>
    <footer><!-- Fully populated footer --></footer>
    <script src="hydration.js"></script>
  

1. Pengindeksan Diutamakan Mudah Alih

Dengan pengindeksan Google yang mengutamakan mudah alih, manfaat prestasi SSR pada sambungan mudah alih yang lebih perlahan menjadi lebih penting.

1. Pratonton Media Sosial

Walaupun bukan ciri enjin carian semata-mata, SSR menjadikannya lebih mudah untuk menjana pratonton yang tepat apabila kandungan anda dikongsi di platform sosial. Ini secara tidak langsung boleh meningkatkan SEO anda dengan meningkatkan penglibatan dan pautan balik.

  
    <title>My CSR Page</title>
  
  
    <div>



<p>The CSR page relies entirely on JavaScript to populate the content.</p>

<h3>
  
  
  Benefits of fully rendered HTML
</h3>

<ol>
<li>
<strong>Faster Initial Paint</strong>: The browser can start rendering content immediately.</li>
<li>
<strong>Better SEO</strong>: Search engines read all your content without executing JavaScript.</li>
<li>
<strong>Improved Accessibility</strong>: Screen readers and other assistive technologies can access content immediately.</li>
<li>
<strong>Resilience</strong>: Basic content is available even if JavaScript fails to load.</li>
</ol>

<h3>
  
  
  The hydration process
</h3>

<p>After sending the fully rendered HTML, SSR applications typically go through a process called hydration:</p>

<ol>
<li>The server sends the fully rendered HTML.</li>
<li>The browser displays this HTML immediately.</li>
<li>JavaScript loads and <em>hydrates</em> the page, adding interactivity.</li>
</ol>



<pre class="brush:php;toolbar:false">// Simplified React hydration example
import { hydrateRoot } from 'react-dom/client';
import App from './App';

const domNode = document.getElementById('root');
hydrateRoot(domNode, <app></app>);

SSR ialah alat yang berkuasa untuk SEO, tetapi ia bukan satu-satunya faktor. Kualiti kandungan, perkaitan dan keseluruhan pengalaman pengguna adalah penting dalam kedudukan enjin carian. SSR hanya memastikan bahawa enjin carian boleh merangkak dan mengindeks kandungan anda dengan cekap, yang berpotensi memberi anda kelebihan dalam metrik keterlihatan dan prestasi.

Bagaimana sebenarnya untuk melakukan SSR

Melaksanakan SSR tidak perlu rumit. Mari kita lihat cara melakukannya menggunakan Next.js, rangka kerja React popular yang menjadikan SSR mudah:

1. Sediakan projek Next.js.
2. Buat halaman yang diberikan sebelah pelayan.
3. Biar Next.js mengendalikan menyajikan HTML yang diberikan sepenuhnya dan penghidratan sisi klien.

Berikut ialah contoh Next.js yang mudah menggunakan Penghala Apl:

// Pseudo-code for search engine ranking
function calculateRanking(site) {
  let score = site.relevance;
  if (site.loadTime 



<p>Dalam contoh ini:</p>

• Komponen Laman Utama ialah fungsi tak segerak, membenarkan pengambilan data sebelah pelayan.
• getData() mengambil data yang kami perlukan.
• Komponen memaparkan data secara langsung.

Next.js mengendalikan proses SSR secara automatik:

1. Apabila permintaan masuk, Next.js menjalankan komponen ini pada pelayan.
2. Ia menunggu untuk data diambil.
3. Ia memaparkan komponen dengan data yang diambil.
4. HTML yang dipaparkan sepenuhnya dihantar kepada pelanggan.
5. Setelah JavaScript dimuatkan dalam penyemak imbas, halaman tersebut menjadi interaktif.

Pendekatan ini memberi anda manfaat SSR tanpa perlu menyediakan pelayan secara manual atau mengurus sendiri proses pemaparan.

Penyelesaian SSR peringkat tinggi

Jika anda tidak mahu mencipta semula roda, terdapat beberapa rangka kerja yang mengendalikan kerumitan SSR untuk anda. Berikut ialah senarai pilihan popular merentas ekosistem yang berbeza:

Bertindak balas

• Next.js: Rangka kerja React paling popular dengan sokongan SSR terbina dalam.
• Remix: Rangka kerja web tindanan penuh yang memanfaatkan Penghala Reaksi.
• Gatsby: Terutamanya penjana tapak statik, tetapi turut menyokong SSR.

Vue

• Nuxt.js: Rangka kerja untuk aplikasi Vue dengan keupayaan SSR.

bersudut

• Angular Universal: Penyelesaian SSR rasmi untuk aplikasi Sudut.

Lembut

• SvelteKit: Rangka kerja aplikasi rasmi untuk Svelte dengan sokongan SSR.

JavaScript (Kerangka-agnostik)

• Astro: Membolehkan anda menggunakan berbilang rangka kerja dan menyokong SSR.
• Qwik: Rangka kerja baharu yang direka untuk prestasi optimum dengan sokongan SSR terbina dalam.

PHP

• Laravel: Menawarkan keupayaan SSR melalui Inertia.js atau komponen Livewirenya sendiri.

Ruby

• Ruby on Rails: Menyokong SSR melalui alatan seperti Stimulus Reflex atau Hotwire.

Ular sawa

• Django: Boleh melaksanakan SSR menggunakan perpustakaan seperti Django-Unicorn atau HTMX.
• Flask: Boleh dikonfigurasikan untuk SSR, selalunya digunakan dengan sambungan seperti Flask-SSE.

Setiap rangka kerja ini menawarkan pendekatan tersendiri terhadap SSR, selalunya dengan ciri tambahan seperti penjanaan tapak statik, laluan API dan banyak lagi. Pilihan bergantung pada bahasa pilihan anda, ekosistem dan keperluan projek khusus.

Penerapan dan caching

Apabila menggunakan apl SSR:

1. Bina kedua-dua berkas sisi klien dan sisi pelayan.
2. Jalankan pelayan SSR sebagai proses latar belakang.
3. Gunakan monitor proses seperti PM2 atau Supervisor untuk memastikan pelayan anda berjalan.

Berikut ialah aliran penggunaan asas:

Jangan lupa tentang caching! Caching halaman yang diberikan pelayan boleh mengurangkan beban pelayan dengan ketara.

SSR dengan Builder.io

Builder.io menyediakan sokongan untuk pemaparan sisi pelayan (SSR) dan penjanaan tapak statik (SSG) merentas semua komponen dan rangka kerja. Fungsi luar biasa ini membolehkan anda memanfaatkan faedah SSR dan SSG tanpa persediaan tambahan.

Ciri-ciri utama

1. Framework Agnostic: Builder.io berfungsi dengan pelbagai rangka kerja yang menyokong SSR dan SSG.
2. Pengoptimuman Automatik: Pembina mengoptimumkan kandungan anda untuk prestasi, termasuk pemisahan kod dan pemuatan malas komponen luar skrin.
3. Rendering Dinamik: Anda boleh memaparkan kandungan yang berbeza berdasarkan atribut pengguna atau ujian A/B sambil mengekalkan faedah SEO.
4. Penyatuan Mudah: Builder menyediakan SDK dan dokumentasi untuk menyepadukan projek sedia ada anda dengan lancar.

Contoh pelaksanaan

Berikut ialah contoh asas tentang cara anda boleh mengambil dan memaparkan bahagian pelayan kandungan dengan Builder dan Next.js:

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App');

const app = express();

app.get('/', (req, res) => {
  const html = ReactDOMServer.renderToString(<app></app>);
  res.send(`
    
    
      
        <div>



<h2>
  
  
  From server to browser with fully rendered pages
</h2>

<p>When we talk about SSR delivering "fully rendered pages," it's important to understand what that actually means. Let's break it down:</p>

<h3>
  
  
  What is a fully rendered page?
</h3>

<p>A fully rendered page is an HTML document containing all the content users would get when they first load the page. This includes:</p>

<ol>
<li>The complete DOM structure</li>
<li>All text content</li>
<li>Image placeholders and other media elements</li>
<li>Initial styles</li>
</ol>

<p>Here's a basic example:<br>
</p>

<pre class="brush:php;toolbar:false">

  
    <title>My SSR Page</title>
    <style>
      /* Initial styles */
    </style>
  
  
    <header>
      <h1 id="Welcome-to-My-Site">Welcome to My Site</h1>
      <nav><!-- Fully populated navigation --></nav>
    </header>
    <main>
      <article>
        <h2 id="Article-Title">Article Title</h2>
        <p>This is the full content of the article...</p>
      </article>
    </main>
    <footer><!-- Fully populated footer --></footer>
    <script src="hydration.js"></script>
  

Amalan terbaik

1. Pastikan anda menggunakan rangka kerja yang menyokong SSR atau SSG.
2. Ikuti garis panduan rangka kerja anda untuk mengambil bahagian pelayan data apabila menyepadukan Halaman atau Bahagian Pembina.
3. Rujuk getAsyncProps README untuk mendapatkan maklumat lanjut tentang mengendalikan data sebelah pelayan.

Dengan memanfaatkan Builder untuk SSR, anda boleh menggabungkan fleksibiliti CMS tanpa kepala dengan faedah prestasi pemaparan sebelah pelayan, sambil mengekalkan pengalaman pengeditan visual yang mudah digunakan.

Membungkus

Perenderan sisi pelayan (SSR) ialah pendekatan yang berkuasa dalam pembangunan web yang boleh meningkatkan prestasi aplikasi, SEO dan pengalaman pengguna anda dengan ketara. Sepanjang artikel ini, kami telah meneroka apa itu SSR, bagaimana ia berbeza daripada pemaparan sisi pelanggan, kesannya pada enjin carian dan strategi pelaksanaan praktikal menggunakan rangka kerja popular seperti Next.js.

Kami juga telah membincangkan konsep halaman yang dipaparkan sepenuhnya dan meneliti pelbagai penyelesaian SSR merentas ekosistem yang berbeza. Walaupun SSR menawarkan banyak faedah, adalah penting untuk mempertimbangkan keperluan khusus projek anda apabila memutuskan sama ada untuk melaksanakannya.

Soalan Lazim

S: Bagaimanakah SSR mempengaruhi aliran kerja pembangunan saya?

J: SSR boleh menjadikan pembangunan lebih kompleks, kerana anda perlu mempertimbangkan kedua-dua persekitaran pelayan dan pelanggan. Anda mungkin perlu melaraskan proses binaan anda dan berhati-hati dengan API khusus penyemak imbas.

S: Bagaimanakah SSR memberi kesan kepada Masa untuk Interaktif (TTI) tapak saya

J: Walaupun SSR boleh meningkatkan keterlihatan kandungan awal, ia mungkin melambatkan sedikit TTI kerana penyemak imbas perlu memuatkan dan menghidrat JavaScript selepas menerima HTML awal.

S: Adakah terdapat sebarang pertimbangan keselamatan khusus untuk SSR?

J: Ya, dengan SSR, anda perlu lebih berhati-hati tentang mendedahkan data sensitif atau API pada bahagian pelayan. Sentiasa bersihkan input pengguna dan berhati-hati tentang data yang anda sertakan dalam pemaparan awal.

S: Bagaimanakah SSR berfungsi dengan pengesahan dan kandungan diperibadikan?

J: SSR boleh berfungsi dengan pengesahan, tetapi ia memerlukan pengendalian yang teliti. Anda mungkin perlu melaksanakan teknik seperti token JWT atau sesi sebelah pelayan untuk mengurus permintaan SSR yang disahkan.