Kako izraditi kutnu aplikaciju sa prikazom na strani poslužitelja

Postoji nekoliko razloga zbog kojih možda želite koristiti prikazivanje na strani poslužitelja sa svojom kutnom aplikacijom.

  1. SSR pomaže u optimizaciji tražilice. Tražilice mogu raščlaniti stranicu jer je prikazana na poslužitelju.
  2. Društvene medijske platforme poput Facebooka i Twittera mogu prikazati pregled web mjesta kada se dijeli.
  3. Nakon što se web stranica prikaže na poslužitelju, možete je spremiti u predmemoriju i služiti je mnogo brže.

Da biste implementirali prikaz na strani poslužitelja u svojoj kutnoj aplikaciji, možete koristiti Angular Universal paket.

Kutni univerzalni

Stvorite novi kutni projekt:

novo ime projekta

Unutar tog projekta preuzmite sljedeće pakete i dodajte Angular Universal:

cd-naziv projekta
npm install --save @ ugaoni / platformski poslužitelj @ nguniverzalni / modul-karta-ngfactory-loader [email protected] express
ng generirati univerzalno ime projekta

Ovo stvara i ažurira sljedeće datoteke:

stvorite src / app / app.server.module.ts
stvori src / main.server.ts
stvori src / tsconfig.server.json
ažuriraj paket.json
ažuriraj .angular-cli.json
update src / main.ts
ažurirati src / app / app.module.ts
ažurirati .gitignore

Moduli: Sada imate dva odvojena korijenska modula: app.server.module.tsand app.module.ts. Modul poslužitelja uvozi ServerModule iz @ angular / platform-server paketa. Modul preglednika zove theBrowerModule.withServerTransition () metodu koja kaže Angular da koristimo prikaz na strani poslužitelja i da pogled treba zamijeniti nakon što se učita cijeli okvir.

Ulazna točka: Za prijavu imate i dvije ulazne točke: src / main.ts i src / main.server.ts. Potonje je ulazna točka za poslužitelj i jednostavno izvozi naš poslužiteljski modul.

Konfiguriranje datoteka: Da bismo rekli kutnom prevoditelju da imamo dva modula za unos, stvorena je datoteka tsconfig.server.json. Tsconfig.app.json sastavlja aplikaciju za preglednik.

Kutni CLI: U kutnoj-cli.json datoteci dodaje se drugi profil za paket poslužitelja.

Bootstrapping: Vaša datoteka main.ts ažurira se sa sljedećom funkcijom:

document.addEventListener ('DOMContentLoaded', () => {
   platformBrowserDynamic (). bootstrapModule (AppModule)
   .catch (err => console.log (err));
});

Time se želi ugaona aplikacija pokrenuti nakon što se DOM učita. Logika pokretanja aplikacije postavljena je unutar događaja DOMContentLoaded.

Poslužitelj čvora

Zatim ćete morati stvoriti poslužitelj u korijenskom direktoriju aplikacije. Ova će datoteka upotrebljavati Javascript datoteku proizvedenu pokretanjem npm run build: ssr pomoću poslužiteljske aplikacije konfigurirane u .angular-cli.json datoteci. Zatim se primjenjuje na stranicu index.html. Stvorite datoteku server.ts u korijenskom direktoriju vašeg projekta i dodajte sljedeći kôd:

Datoteci server.ts potrebna je konfiguracija webpaka da bi se generirala Javascript datoteka za pokretanje na poslužitelju. Napravite datoteku webpack.server.config.js u korijenskom direktoriju svoje aplikacije i dodajte sljedeći kôd:

U svoju file.json datoteku dodajte sljedeće naredbe u svoj niz skripti:

"build: ssr": "npm run build: paketi klijenta i poslužitelja && npm pokrenite webpack: server",
"serve: ssr": "čvor dist / server.js",
"build: paketi klijenta i poslužitelja": "ng build --prod && ng build --prod --app 1 --output-hashing = false",
"webpack: server": "webpack --config webpack.server.config.js - napredak - boje"

Prvo pokrenite npm run build: ssr, a kad je to dovršeno, pokrenite npm run serve: ssr. Vaša prijava treba biti dostavljena na localhost: 4201.

Država prijenosa

Kad koristimo Angular Universal, API koji isporučuje sadržaj pogođen je dva puta. Prvo kada poslužitelj prikazuje stranicu i drugo, kad se aplikacija pokreće. To uzrokuje probleme s kašnjenjem i loše korisničko iskustvo jer zaslon obično treperi kad se to dogodi. Pogledajte dijagram u nastavku da biste vidjeli kako to funkcionira:

dizajnirao Upstate Interactive, LLC

Možemo koristiti uslugu TransferState za slanje podataka s poslužitelja klijentu, čime se izbjegavaju dvostruki API pozivi. Pogledajte kako to funkcionira u nastavku:

dizajnirao Upstate Interactive, LLC

Koristimo uslugu TransferState u našoj aplikaciji. U app.module.ts uvezite BrowserTransferStateModule:

uvoz {BrowserModule, BrowserTransferStateModule} iz '@ angular / platform-browser';
uvoz: [
  BrowserModule.withServerTransition ({appId: 'moja aplikacija'}),
  BrowserTransferStateModule,
  ...
]

U app.server.module.ts uvezite ServerTransferStateModule:

import {ServerModule, ServerTransferStateModule} s '@ angular / platforma-poslužitelj';
uvoz: [
  AppModule,
  ServerModule,
  ServerTransferStateModule,
  ...
]

Funkcijom makeStateKey možemo koristiti za izradu ključa, za pohranu podataka u stanje (koje će biti proslijeđene u preglednik). Koristićete ovaj.state.get za dobivanje podataka iz stanja i this.state.set za postavljanje podataka u državi. Kad se izvrši API poziv, pohranjivat ćete vraćene podatke u stanje koristeći ključ koji ste stvorili pomoću makeStateKey.

U datoteku koju konzumirate svoj API, uvezite TransferState i makeStateKey module.

import {TransferState, makeStateKey} s '@ angular / platform-browser';

Ugradite uslugu TransferState u funkciju konstruktora:

konstruktor(
   privatno stanje: TransferState,
   ...
) {}

Stvorite ključeve za pohranu podataka:

const KEY_NAME = makeStateKey ('naziv varijable');

Unutar svoje funkcije u kojoj pozivate API, dobijte svoje podatke iz države koristeći this.state.get. Ako unos nije pronađen, uputite se na http poziv. Kad vratite svoje podatke iz http poziva, spremite ih u stanje koristeći this.state.set.

functionName () {
   neka varijabla_name = this.state.get (KEY_NAME, nula kao bilo koja);
   ako (varijabla_ime) {
     uzvrati Observable.of (naziv varijable);
   }
   vrati ovo.http.get ('url')
     ...
     this.state.set (KEY_NAME, naziv varijable kao bilo koji drugi);
     povratna_ime varijable;
 }

Sada vaš klijent neće upućivati ​​HTTP poziv kada se podaci vrate s poslužitelja za prikazivanje, jer su pohranjeni u stanju.

Ako pokrenete aplikaciju nakon što slijedi ove korake, vaša aplikacija neće upućivati ​​nikakve HTTP pozive od klijenta. To možete potvrditi gledanjem na karticu mreže u alatima za razvojne programere vašeg preglednika. Ne biste trebali vidjeti nikakve XHR zahtjeve, jer se zahtjev postavlja na poslužitelju i šalje u preglednik kao HTML.

I na kraju, ne svaka aplikacija jamči prikaz na strani poslužitelja. Umjesto da objasnim sama, preporučio bih vam da pročitate ovaj članak za temeljit pregled vremena kada je SSR prikladan za vaš projekt. Također, puno mojeg razumijevanja ove teme proizišlo je iz sljedećeg vodiča: http://www.dotnetcurry.com/angularjs/1388/server-side-rendering-angular-nodejs. Toplo preporučujem da sami pratite i izrađujete aplikaciju.

Da biste učinili ovaj korak dalje, pogledajte dio II: Postavljanje Angular Universal s ngrx.

Nadam se da je ovo bilo od pomoći!

☞ Pomažemo B2B organizacijama da sjajne ideje pretvore u softver. Zainteresirani ste za učenje više?

☞ Možda ćete uživati ​​i u sljedećim člancima.