Pengkomputeran Pinggir dengan Cloudflare Workers & Deno · Pelajaran

Penghasilan Kandungan Sisi Pelayan di Tepi

Hasilkan halaman tindanan penuh secara langsung di tepi untuk paparan pertama yang pantas, kandungan dinamik dan HTML yang mesra SEO.

Pelajaran 4 daripada 413 langkah

Penghasilan Kandungan Sisi Pelayan di Tepi ialah pelajaran Pengkomputeran Pinggir dengan Cloudflare Workers & Deno percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Pengkomputeran Pinggir dengan Cloudflare Workers & Deno, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pengkomputeran Pinggir dengan Cloudflare Workers & Deno merangkumi sejumlah 4 pelajaran.

Mengapa SSR di Pinggir?

Paparan Sebelah Pelayan (SSR) menjana HTML pada setiap permintaan dan bukannya menghantar rangka kosong kepada pelayar.

Menjalankan SSR di pinggir bermaksud:

HTML dibina berdekatan dengan pengguna, dengan kependaman rendah
Paparan pertama yang baik dan SEO yang lebih baik
Kandungan diperibadikan dan dinamik bagi setiap permintaan

SSR berbanding Laman Statik

Halaman statik dibina terlebih dahulu dan dicache; halaman ini pantas tetapi sama untuk semua orang.

SSR membina HTML bagi setiap permintaan, sesuai untuk kandungan yang bergantung pada pengguna, lokasi atau data langsung.

Banyak aplikasi pinggir menggabungkan kedua-duanya.

Memulangkan HTML daripada Worker

Pada asasnya, SSR hanyalah pemulangan rentetan HTML dengan jenis kandungan yang betul.

export default {
  async fetch(request) {
    const html = '<!DOCTYPE html><html><body><h1>Hello Edge</h1></body></html>';
    return new Response(html, {
      headers: { 'Content-Type': 'text/html;charset=UTF-8' }
    });
  }
};

Menyuntik Data Dinamik

Dapatkan data dahulu, kemudian masukkannya ke dalam templat HTML sebelum memberikan respons.

const user = await env.DB.prepare('SELECT name FROM users WHERE id = ?')
  .bind(id).first();
const html = '<h1>Welcome, ' + escapeHtml(user.name) + '</h1>';

SSR Rangka Kerja di Pinggir

Rangka kerja moden memaparkan rentetan pada pelayan. Penyesuai pinggirnya menjalankan proses ini dalam Worker.

import { renderToString } from 'react-dom/server';
import { App } from './App';

const markup = renderToString(App({ user }));

SSR Penstriman

Daripada menunggu seluruh halaman siap, strim HTML semasa halaman dipaparkan supaya pelayar mula memaparkan kandungan lebih awal.

const { readable, writable } = new TransformStream();
renderToReadableStream(App()).then((s) => s.pipeTo(writable));
return new Response(readable, {
  headers: { 'Content-Type': 'text/html' }
});

Penghidratan

SSR menghasilkan HTML statik, kemudian JS klien menghidratkannya supaya menjadi interaktif.

Hantar data yang sama kepada klien supaya penghidratan sepadan tepat dengan output pelayan; ketidakpadanan akan menyebabkan amaran.

const tag = '<script>window.__DATA__ = ' + JSON.stringify(data) + ';</script>';

Menggunakan HTMLRewriter

HTMLRewriter Cloudflare menstrim dan mengubah HTML dengan cekap, sesuai untuk menyuntik kandungan ke dalam templat asas.

return new HTMLRewriter()
  .on('title', { element(e) { e.setInnerContent('My Page'); } })
  .transform(response);

Mencache Output SSR

Bahagian output SSR yang benar-benar statik boleh dicache, tetapi halaman yang diperibadikan tidak boleh dicache secara umum.

Gunakan Cache-Control dengan bijak dan bezakan mengikut pengguna apabila perlu.

headers.set('Cache-Control', 'private, no-store');

Manfaat SEO

Oleh sebab SSR memulangkan HTML yang lengkap, perangkak melihat kandungan sebenar serta-merta tanpa memerlukan pelaksanaan JS, sekali gus meningkatkan SEO dan pratonton sosial.

Ringkasan Amalan Terbaik

Untuk SSR pinggir yang kukuh:

Dapatkan data, kemudian paparkan sebagai rentetan atau strim
Sentiasa lepaskan data yang disisipkan
Hidratkan dengan data klien yang sepadan
Strim untuk paparan pertama yang lebih pantas
Cache bahagian statik, jangan cache halaman persendirian secara umum

Semakan Pantas

Apakah kelebihan utama SSR penstriman berbanding memaparkan seluruh halaman terlebih dahulu?

Jawab dalam pelajaran interaktif

Ringkasan

Kini anda boleh memaparkan halaman penuh di pinggir:

Pulangkan HTML dinamik yang telah dilepaskan bagi setiap permintaan
Gunakan penyesuai rangka kerja dan penstriman untuk kelajuan
Hidratkan dengan data klien yang sepadan
Ubah output dengan HTMLRewriter dan cache dengan berhati-hati

SSR pinggir memberikan aplikasi tindanan penuh yang pantas, dinamik dan mesra SEO.

Percuma untuk bermula

Pelajari Pengkomputeran Pinggir dengan Cloudflare Workers & Deno dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 12
Pelajaran: 47

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Penghasilan Kandungan Sisi Pelayan di Tepi” percuma?

Ya — teks penuh “Penghasilan Kandungan Sisi Pelayan di Tepi” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Pengkomputeran Pinggir dengan Cloudflare Workers & Deno, tingkat taraf kepada CoddyKit PRO. Kursus Pengkomputeran Pinggir dengan Cloudflare Workers & Deno merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Penghasilan Kandungan Sisi Pelayan di Tepi”?

Hasilkan halaman tindanan penuh secara langsung di tepi untuk paparan pertama yang pantas, kandungan dinamik dan HTML yang mesra SEO. Anda berlatih Pengkomputeran Pinggir dengan Cloudflare Workers & Deno menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Pengkomputeran Pinggir dengan Cloudflare Workers & Deno?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Pengkomputeran Pinggir dengan Cloudflare Workers & Deno di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Penghasilan Kandungan Sisi Pelayan di Tepi” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Pengkomputeran Pinggir dengan Cloudflare Workers & Deno ini?

Ya. Setiap pelajaran Pengkomputeran Pinggir dengan Cloudflare Workers & Deno menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Workers Sites & Pages
Integrasi Rangka Kerja Bahagian Hadapan
Proksi Pangkalan Data dengan Deno
Penghasilan Kandungan Sisi Pelayan di Tepi

← Kembali ke Pengkomputeran Pinggir dengan Cloudflare Workers & Deno