Sobes.tech
Intervijas palīdzība
Resursi
Intervijas sagatavošana
Resursi
Darba meklēšana
Resursi
Juridisks
Atpakaļ pie jautājumiem
Middle

Kā darbojas servera puses attēlošanas (SSR) tehnoloģija?

sobes.tech AI

Atbilde no AI

Servera puses renderēšana (SSR) ir tehnika, kurā pirmā parādīšanās tīmekļa lapai notiek serverī, nevis lietotāja pārlūkprogrammā.

Parastā klienta renderēšanas gadījumā pārlūks saņem tukšu HTML failu ar saiti uz JavaScript. Pārlūks ielādē JavaScript, analizē to, izpilda un tikai pēc tam dinamiskā veidā būvē DOM un attēlo saturu.

SSR gadījumā serveris apstrādā lietojumprogrammas komponentus, veido gatavu HTML kodu un nosūta to pārlūkam.

SSR posmi:

  1. Pieprasījums: Lietotāja pārlūks nosūta HTTP pieprasījumu serverim.
  2. Servera renderēšana: Serveris palaid JavaScript koda lietojumprogrammu, ieskaitot UI komponentu renderēšanas loģiku, un saņem pilnībā izveidotu HTML virkni.
  3. Atbilde: Serveris nosūta šo HTML failu pārlūkam.
  4. Pirmā parādīšanās: Pārlūks saņem HTML un tūlīt parāda lapas saturu, jo visi elementi jau ir klāt marķējumā.
  5. Hidratācija (Hydration): Pēc HTML ielādes pārlūks ielādē un izpilda lietojumprogrammas JavaScript kodu. Šis kods "atsvaidzina" statisko marķējumu, pievienojot interaktivitāti, notikumu apstrādātājus un sasaistot stāvokli.

SSR priekšrocības:

  • Uzlabots SEO: Pilnībā izveidotas HTML lapas labāk indeksē meklētājprogrammas roboti.
  • Ātrāka pirmā satura attēlošana (FCP - First Contentful Paint): Lietotājs redz saturu ātrāk.
  • Labāka pieejamība vājākām ierīcēm un lēnam internetam: Mazāka atkarība no klienta ierīces veiktspējas, lai attēlotu galveno saturu.

Trūkumi:

  • Paaugstināta slodze uz serveri: Serveris veic vairāk aprēķinu renderēšanai.
  • Izstrādes sarežģītība: Jāņem vērā koda izomorfisms (iespēja izpildīt gan serverī, gan klientā).
  • Lielāks atbildes izmērs: Pirmais servera atbilde satur pilnu HTML.
// Klienta koda piemērs (pseudos kods)
// Parasta klienta lietojumprogramma saņem tukšu div
const appDiv = document.getElementById('app');
// JavaScript tiek ielādēts un veido saturu
appDiv.innerHTML = `<h1>Hello, world!</h1>`;

// Servera koda piemērs (pseudos kods, izmantojot framework)
// SSR laikā, serveris ģenerē pilnu HTML
import ReactDOMServer from 'react-dom/server';
import App from './App';

const html = ReactDOMServer.renderToString(<App />);
// Serveris nosūta kaut ko līdzīgu:
// <div id="app"><h1>Hello, world!</h1></div>
IepriekšējaisTālāk