const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
 return (
  Loading...

2. Vahemällu salvestamise strateegiad

Serveripoolne vahemällu salvestamine: Salvestage renderdatud HTML serveris vahemällu, et vähendada serveri koormust ja parandada vastamisaegu. Rakendage vahemällu salvestamist erinevatel tasanditel, näiteks:

• Lehe tasemel vahemällu salvestamine: Salvestage kogu HTML-väljund konkreetse URL-i jaoks.
• Fragmendi vahemällu salvestamine: Salvestage lehe üksikuid komponente või jaotisi.
• Andmete vahemällu salvestamine: Salvestage lehe renderdamiseks kasutatud andmed.

Kliendipoolne vahemällu salvestamine: Kasutage brauseri vahemälu staatiliste varade, nagu JavaScript, CSS ja pildid, salvestamiseks. Konfigureerige õiged vahemälu päised, et kontrollida, kui kaua neid varasid vahemälus hoitakse.

CDN (sisu edastamise võrk): Jagage oma staatilised varad globaalses serverivõrgus, et parandada laadimisaegu kasutajatele üle maailma. CDN-id võivad vahemällu salvestada ka dünaamilist sisu, vähendades veelgi koormust teie lähteserverile.

Näide (kasutades Redis'i serveripoolseks vahemällu salvestamiseks):

            
const redis = require('redis');
const client = redis.createClient();

async function renderPage(req, res) {
 const cacheKey = `page:${req.url}`;

 client.get(cacheKey, async (err, cachedHtml) => {
 if (err) {
 console.error(err);
 }

 if (cachedHtml) {
 res.send(cachedHtml);
 return;
 }

 const html = await generateHtml(req);

 client.setex(cacheKey, 3600, html); // Salvesta vahemällu 1 tunniks
 res.send(html);
 });
}

            

              
                Copy
              
            
          

3. Andmete toomise optimeerimine

Paralleelne andmete toomine: Tooge andmeid samaaegselt, et vähendada üldist andmete laadimisaega. Kasutage `Promise.all` või sarnaseid tehnikaid mitme andmeallika paralleelseks toomiseks.

Andmete partii kaupa töötlemine: Kombineerige mitu andmepäringut üheks päringuks, et vähendada võrgu edasi-tagasi käikude arvu. See on eriti kasulik seotud andmete toomisel andmebaasist või API-st.

GraphQL: Kasutage GraphQL-i, et tuua ainult need andmed, mida konkreetse komponendi jaoks vaja on. See väldib üleliigset toomist ja vähendab võrgu kaudu edastatavate andmete hulka.

Näide (kasutades `Promise.all`):

            
async function fetchData() {
 const [user, posts, comments] = await Promise.all([
 fetch('/api/user').then(res => res.json()),
 fetch('/api/posts').then(res => res.json()),
 fetch('/api/comments').then(res => res.json()),
 ]);

 return { user, posts, comments };
}

            

              
                Copy
              
            
          

4. Tõhus JavaScripti käivitamine

Minimeerige JavaScripti: Vähendage JavaScripti koodi hulka, mida on vaja alla laadida ja käivitada. Eemaldage kasutamata kood, minimeerige JavaScripti faile ja kasutage koodi tükeldamist, et laadida ainult vajalik kood.

Optimeerige JavaScripti jõudlust: Kasutage tõhusaid algoritme ja andmestruktuure, et minimeerida JavaScripti koodi täitmisaega. Profiilige oma koodi, et tuvastada jõudluse kitsaskohad ja optimeerida vastavalt.

Veebitöötajad (Web Workers): Suunake arvutusmahukad ülesanded veebitöötajatele, et vältida põhilõime blokeerimist. See võib parandada kasutajaliidese reageerimisvõimet.

Puu raputamine (Tree Shaking): Eemaldage oma JavaScripti kimpudest kasutamata kood. Webpack ja teised kimpude loojad toetavad puu raputamist, mis võib oluliselt vähendada teie kimpude suurust.

5. Hüdreerimise optimeerimine

Osaline hüdreerimine: Hüdreerige ainult lehe interaktiivsed komponendid, jättes staatilise sisu hüdreerimata. See vähendab JavaScripti hulka, mida on vaja käivitada, ja parandab esialgset laadimisaega.

Progressiivne hüdreerimine: Hüdreerige komponente kindlas järjekorras, alustades kõige olulisematest komponentidest. See võimaldab kasutajal varem suhelda lehe kõige kriitilisemate osadega.

Hüdreerimise lahknevuste kõrvaldamine: Tagage, et serveris renderdatud HTML ja kliendipoolne JavaScript oleksid järjepidevad, et vältida hüdreerimise lahknevusi. Need lahknevused võivad põhjustada vilkumist või vigu ja mõjutada negatiivselt jõudlust.

Näide (kasutades React'i `useDeferredValue` progressiivseks hüdreerimiseks):

            
import { useState, useDeferredValue } from 'react';

function SearchInput() {
 const [query, setQuery] = useState('');
 const deferredQuery = useDeferredValue(query);

 return (
  

    setQuery(e.target.value)} />
   
  
 );
}

            

              
                Copy
              
            
          

6. Raamistikupõhised optimeerimised

Igal JavaScript'i raamistikul on oma spetsiifilised optimeerimised SSR-i jaoks. Siin on mõned näited:

• React: Kasutage `ReactDOMServer.renderToString` staatiliseks HTML-iks renderdamiseks. Kasutage `React.memo` ja `useMemo` komponentide memoiseerimiseks.
• Angular: Kasutage Angular Universal'i SSR-i jaoks. Optimeerige muutuste tuvastamist ja kasutage AOT (Ahead-of-Time) kompileerimist.
• Vue.js: Kasutage Vue Server Renderer'it SSR-i jaoks. Optimeerige komponentide renderdamist ja kasutage komponentide ja marsruutide laiska laadimist.
• Next.js: Next.js on Reacti raamistik, mis on spetsiaalselt loodud SSR-i jaoks. See pakub sisseehitatud tuge SSR-ile, koodi tükeldamisele ja marsruutimisele.
• Nuxt.js: Nuxt.js on Vue.js raamistik, mis on spetsiaalselt loodud SSR-i jaoks. See pakub sisseehitatud tuge SSR-ile, koodi tükeldamisele ja marsruutimisele.

Tööriistad SSR-i optimeerimiseks

Mitmed tööriistad aitavad teil SSR-i jõudlust optimeerida:

• Google PageSpeed Insights: Analüüsige oma veebisaidi jõudlust ja tuvastage parendusvaldkonnad.
• WebPageTest: Testige oma veebisaidi jõudlust erinevatest asukohtadest ja võrgutingimustest.
• Lighthouse: Avatud lähtekoodiga automatiseeritud tööriist veebilehtede kvaliteedi parandamiseks. Sellel on auditid jõudluse, ligipääsetavuse, progressiivsete veebirakenduste, SEO ja muu kohta.
• Webpack Bundle Analyzer: Visualiseerige oma JavaScripti kimpude suurust ja tuvastage võimalusi koodi tükeldamiseks.
• New Relic, Datadog, Sentry: Rakenduse jõudluse jälgimise tööriistad, et tuvastada ja diagnoosida jõudlusprobleeme teie rakenduses, sealhulgas serveripoolse renderdamise kitsaskohti.

SSR-i rakendamise näited

Siin on mõned näited sellest, kuidas SSR-i saab rakendada erinevates JavaScript'i raamistikes:

React koos Next.js-iga

Next.js lihtsustab SSR-i, pakkudes sisseehitatud tuge serveripoolseks renderdamiseks. `pages` kaustas olevad lehed renderdatakse automaatselt serveris.

            
// pages/index.js

function HomePage(props) {
 return (
  

   
Tere tulemast minu veebisaidile!
   
Andmed serverist: {props.data}
  
 );
}

export async function getServerSideProps(context) {
 const data = await fetchData();
 return {
  props: { data }, // edastatakse lehe komponendile propsidena
 };
}

export default HomePage;

            

              
                Copy
              
            
          

Vue.js koos Nuxt.js-iga

Nuxt.js pakub Vue.js rakenduste jaoks sarnast kogemust nagu Next.js. See lihtsustab SSR-i ja pakub sisseehitatud tuge marsruutimisele, koodi tükeldamisele ja muule.

            
// pages/index.vue





            

              
                Copy
              
            
          

Angular koos Angular Universal'iga

Angular Universal võimaldab serveripoolset renderdamist Angular'i rakendustele. See nõuab rohkem seadistamist kui Next.js või Nuxt.js, kuid pakub võimsa lahenduse SSR-i jaoks.

1. Installige Angular Universal: `ng add @nguniversal/express-engine`
2. Seadistage server: Muutke faili `server.ts`, et käsitleda serveripoolset renderdamist.
3. Käivitage rakendus: `npm run dev:ssr`

Kokkuvõte

Serveripoolne renderdamine on võimas tehnika JavaScript'i raamistikel põhinevate veebirakenduste jõudluse ja SEO parandamiseks. HTML-i serveris eelrenderdades saab SSR oluliselt vähendada esialgseid laadimisaegu, parandada nähtavust otsingumootorites ja täiustada üldist kasutajakogemust. Kuigi SSR lisab arendusprotsessile keerukust, kaaluvad eelised sageli väljakutsed üles. Selles juhendis kirjeldatud optimeerimistehnikaid rakendades saavad arendajad kasutada SSR-i võimsust, et luua suure jõudlusega, SEO-sõbralikke veebirakendusi, mis pakuvad suurepärast kasutajakogemust globaalses mastaabis. Ärge pidage neid näpunäiteid ühekordseks lahenduseks, vaid pideva protsessi osaks. Veeb areneb pidevalt ja ka teie optimeerimisstrateegiad peaksid kohanema.

Ärge unustage oma rakendust regulaarselt profileerida ja vajadusel oma optimeerimistehnikaid kohandada. Pidage ka meeles, et parim lähenemine SSR-ile sõltub teie rakenduse konkreetsetest nõuetest. Katsetage erinevaid tehnikaid ja leidke need, mis teie olukorras kõige paremini toimivad. Ärge kartke A/B testimist erinevate optimeerimiste puhul, et mõõta nende mõju jõudlusele ja kasutajakogemusele. Ja lõpuks, hoidke end kursis uusimate parimate tavadega SSR-i ja esiotsa jõudluse optimeerimise valdkonnas. Veebiarenduse maastik muutub pidevalt ning oluline on jätkata õppimist ja kohanemist uute tehnoloogiate ja tehnikatega.