Kaip veikia serverio pusės atvaizdavimas
Kas yra Serverio pusės atvaizdavimas
Serverio pusės atvaizdavimas (SSR) yra žiniatinklio kūrimo technika, kai serveris sugeneruoja pradinį tinklalapio HTML kodą ir siunčia jį į kliento naršyklę, kuri tada pateikia puslapį. Tai skiriasi nuo kliento pusės atvaizdavimo (CSR), kai pradinis HTML yra minimalus, o didžioji puslapio atvaizdavimo dalis atliekama naudojant „JavaScript“ kliento naršyklėje.
Žiniatinklio komponentai
Žiniatinklio komponentai yra žiniatinklio platformos API rinkinys, leidžiantis kurti daugkartinio naudojimo pasirinktinius elementus su įterptomis funkcijomis. Tai yra technologijų rinkinys, kurį galima naudoti kartu kuriant pakartotinai naudojamus, įterptus ir sąveikaujančius HTML elementus. Šiuos komponentus galima naudoti žiniatinklio programose be jokių papildomų struktūrų ar bibliotekų.
Šiame straipsnyje bus nagrinėjamas serverio pusės atvaizdavimo su žiniatinklio komponentu ir „Luppeteer“ diegimas.
Kas yra Lėlininkas?
„Puppeteer“ yra galinga „Google“ sukurta Node.js biblioteka, teikianti aukšto lygio API, leidžiančią programiškai valdyti „Chrome“ arba „Chromium“ naršykles. Jis pirmiausia naudojamas žiniatinklio rinkimui, automatiniam testavimui ir tinklalapių ekrano kopijų ir PDF failų generavimui.
Serverio pusės žiniatinklio komponentų atvaizdavimo diegimas
1 veiksmas: sukurkite html puslapį, kad apibrėžtumėte žiniatinklio komponentą
- Sukurkite html puslapį, kuriame yra pasirinktinis elementas
- Apibrėžkite pasirinktinį elementą scenarijaus žymoje
- Apibrėždami pasirinktinį elementą naudokite vidinį HTML, nei pateikimo metodą. Tai deklaratyvus žiniatinklio komponento diegimo būdas
Čia yra pavyzdinis kodas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Components | SSR (Server side rendering, doesn't need Javascript)</title>
</head>
<body>
<custom-paragraph text="Custom Paragraph"></custom-paragraph>
</body>
<script>
class CustomParagraph extends HTMLElement {
constructor() {
super();
const text = this.getAttribute('text');
this.innerHTML = `
<template shadowrootmode="open">
<style>
p{
font-size: 65px;
font-weight: 400;
font-style: italic;
background-image: linear-gradient(to left, #007f4c, #53e3a7);
color: black ;
}
</style>
<p><slot></slot></p>
</template>
${text}
`;
}
}
customElements.define("custom-paragraph", CustomParagraph);
</script>
</html>
2 žingsnis: Žiniatinklio komponento atvaizdavimas serveryje prieš pateikiant užklausą naudojant „Pupetter“:
- Importuokite lėlininko biblioteką į scenarijų.
- Apibrėžkite maršrutą, kuriuo bus teikiamas html, kuriame yra žiniatinklio komponentas.
- Naudokite „Puppeteer“, kad pateiktumėte žiniatinklio komponentą teikiant html.
- Naršyklė dabar gaus statinį html ir pateikia tik html.
Čia yra pavyzdinis kodas
const express = require("express");
const fs = require('fs');
const puppeteer = require("puppeteer");
const app = express();
const port = 4000;
const content = fs.readFileSync("./ssr.html","utf-8").toString();
app.get("/ssr", async(req,res) => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setContent(content, {
waitUntil: ["domcontentloaded"],
});
const fullHTML = await page.content();
res.send(fullHTML);
});
Privalumai:
- Patobulintas pradinis įkrovimo laikas:
- Naršyklė gauna paruoštą pateikti HTML, todėl sutrumpėja laikas iki pirmojo turinio.
- Ypač naudinga vartotojams, turintiems lėtesnį interneto ryšį.
- Geresnis SEO:
- Paieškos sistemos tikrintuvai gali lengvai indeksuoti visiškai pateiktą turinį.
- Pagerina matomumą paieškos rezultatuose, ypač daug turinio svetainėse.
- Didesnis našumas naudojant mažos galios įrenginius:
- Sumažina kliento įrenginio apdorojimo naštą.
- Naudinga senesnius ar mažiau galingus įrenginius turintiems naudotojams.
- Patobulintas prieinamumas:
- Turinys pasiekiamas iš karto, o tai naudinga naudotojams, kurie pasitiki ekrano skaitytuvais.
- Nuoseklus našumas visuose įrenginiuose:
- Serverio galimybės lemia atvaizdavimo greitį, o ne kliento aparatinę įrangą.
- Geresnis talpyklos saugojimas:
- Visiškai pateikti puslapiai gali būti lengvai talpinami serveryje arba CDN.
- Bendrinimas socialiniuose tinkluose:
- Lengviau generuoti tikslias socialinės žiniasklaidos platformų peržiūras.
Trūkumai:
- Padidėjusi serverio apkrova:
- Puslapiams pateikti serveryje reikia daugiau serverio išteklių.
- Gali padidėti didelio srauto svetainių prieglobos išlaidos.
- Lėtesnis laikas iki interaktyvumo:
- Nors pradinis turinys įkeliamas greičiau, interaktyviems elementams gali prireikti daugiau laiko, kol jie reaguoja.
- Sudėtingesnis kūrimo procesas:
- Reikalingos serverio kalbos ir sistemos.
- Gali apsunkinti kūrimo darbo eigą, ypač komandoms, labiau susipažinusioms su kliento technologijomis.
- Viso puslapio įkėlimas iš naujo:
- Tradicinis SSR dažnai reikalauja viso puslapio įkėlimo iš naujo, o tai gali atrodyti ne taip sklandžiai nei SPA navigacija.
- Padidėjęs pralaidumo naudojimas:
- Kiekviena puslapio užklausa paprastai atsisiunčia visą puslapio turinį, net ir atliekant nedidelius pakeitimus.
- Valstybės valdymo iššūkiai:
- Būsenos palaikymas tarp puslapio įkėlimų gali būti sudėtingesnis, palyginti su atvaizdavimu kliento pusėje.
- Lėtesnis tolesnis puslapio įkėlimas:
- Nors pradinis įkėlimas yra greitas, naršymas tarp puslapių gali būti lėtesnis nei SPA.
- Mažiau lankstumo naujinimams realiuoju laiku:
- Realaus laiko funkcijų (pvz., tiesioginio pokalbio) įdiegimas gali būti sudėtingesnis.
- Ilgesnio laiko iki pirmojo baito (TTFB) galimybė:
- Serverio apdorojimo laikas gali atidėti pradinį atsakymą, ypač dinaminio turinio atveju.
- Aplinkos nuoseklumas:
- Reikia užtikrinti nuoseklumą tarp serverio ir kliento aplinkų, o tai gali būti sudėtinga kai kurioms „JavaScript“ bibliotekoms.
