Come funziona effettivamente il prerender?

Le risorse sul rendering lato server sono scarse, infatti, non sono riuscito a trovare nulla che spiegasse chiaramente come funzionano effettivamente le cose. Ho visto alcuni repository, ho cercato di seguire il codice, ma non sono riuscito a capirne il senso. Se corro angolare normalmente, io so praticamente cosa succede:Come funziona effettivamente il prerender?

file HTML viene caricato: <html><body><my-app>...</my-app><SCRIPTS/></body></html>
Gli script vengono caricati ... codice
processi angolari, e sostituisce <my-app> con tutte le chicche all'interno.

Per questa app:

@Component({ 
    selector: 'my-app' 
    template: `<p *ngFor="let i of items">{{ i }}</p>`, 
}) 
export class AppComponent { 
    items = [1, 2, 3]; 
}

posso vedere ispezionare html (plunker) e vedere:

<my-app> 
    <!--template bindings={ 
    "ng-reflect-ng-for-of": "1,2,3" 
    }--> 
    <p>1</p> 
    <p>2</p> 
    <p>3</p> 
</my-app>

Tutto chiaro finora! (:

Ma cosa succede con PreRender Se creo un file in questo modo:?

<html> 
<body> 
    <my-app> 
    <!--template bindings={ 
     "ng-reflect-ng-for-of": "1,2,3" 
     }--> 
    <p>1</p> 
    <p>2</p> 
    <p>3</p> 
    </my-app> 
    <SCRIPTS/> 
</body> 
</html>

Cosa farà angolare fare una volta gli script vengono caricati Posso usare questo html al posto del primo Se qualcuno capisce? ? come funziona questo processo, si prega di condividere (; Tutte le informazioni su questa roba sarebbe utile ... Posso Copia outerHTML, e fare che il mio "pagina prerenderizzati" ... in questo modo:

Se no, perché? Sto cercando l'essenza del processo, un esempio che potrebbe essere codificato a mano e il lavoro ...

fonte

2016-06-19 Sasxa

io penso che si debba usare angular2-universal-preview al fine di rendere l'applicazione sul lato server:

import * as express from 'express'; 
    import {ng2engine} from 'angular2-universal-preview'; 

    // Angular 2 
    import {App} from './src/app'; 

    let app = express(); 

    // Express View 
    app.engine('.ng2.html', ng2engine); 
    app.set('views', __dirname); 
    app.set('view engine', 'ng2.html'); 


    // static files 
    app.use(express.static(__dirname)); 


    app.use('/', (req, res) => { 
     res.render('index', { App }); 
    }); 



    app.listen(3000,() => { 
     console.log('Listen on http://localhost:3000'); 
    });`

fonte

2016-06-19 07:54:36 AngJobs

'Universal' è solo un utensile che fa il lavoro per noi, doesn' t aiutare a capire cosa fa Angular. Come faresti il prerender senza Universal? O senza server per quella materia .... – Sasxa

Con il rendering lato server la pagina viene sottoposta a rendering due volte: sul server, quindi è possibile visualizzare la visualizzazione di rendering molto presto, quindi sul client, dopo che l'app è stata caricata.

Sul lato server si utilizza angular-universal per eseguire il rendering di qualsiasi vista della propria app in base all'URL del percorso;
Sul client l'app viene sottoposta a bootstrap come di consueto: la vista di rendering client viene inserita nel tag radice dell'app e sostituisce la vista rendering server. L'unico evento magico sul lato client è lo stato di trasferimento verso il basso fino all'app client dal modulo preboot.js del progetto universale, che viene eseguito registrando gli eventi attivati nella vista di rendering server e quindi riproducendoli sulla vista di rendering client dopo l'app è caricata. Quindi, se si digita qualcosa nella casella input prima che l'app sia caricata, le sequenze di tasti verranno riprodotte dal comando preboot.complete() dopo che la vista di rendering client sostituisce quella gestita dal server.

vostre questioni:

Cosa farà angolare fare una volta gli script vengono caricati?

L'app viene avviata normalmente, il contenuto del tag <my-app></my-app> viene sostituito dalla vista di rendering del client.

Posso copiare outerHTML e rendere la mia "pagina prerenderata"?

Sì. Tuttavia, è preferibile utilizzare il modulo angular-universal, in modo da poter visualizzare dinamicamente la vista dietro a qualsiasi percorso.

Come per il campione, ecco lo Angular 2 Universal Starter che è un'app di esempio che dimostra la cosa universale in azione. Giocare con lui:

modificare la stringa 'This was rendered from the server!' nella dist/server/index.js per vedere che è ritornato di nuovo quando l'applicazione viene caricata. Il che significa che l'affermazione diventa una bugia dopo il rendering della vista client.

consentire preboot e rinviare la preboot.complete() per vederlo in azione (tipo qualcosa nella casella input):

src/main.node.ts

let config: ExpressEngineConfig = { 
    // ... 
    preboot: { appRoot: 'app' } // your top level app component selector 
};

src/client.ts

ngApp() 
.then(function() { 
    setTimeout(function() { 
    preboot.complete(); 
    }, 5000); 
});

Qui il semplice DEMO di visualizzazione "pre-renderizzata" offerta staticamente con il pre-avvio sul client. C'è un ritardo di 5 secondi prima che app venga riavviato per vedere il pre-avvio in azione.

Non sono un esperto angular2, quindi, per favore, correggimi se sbaglio. Baso il mio giudizio dopo aver letto le seguenti risorse:

fonte

2016-06-19 15:36:49

Grazie @Alec. Ho letto anche quelle risorse, o almeno sfogliato, ma la maggior parte delle cose ci sono ** come ** non *** perché? ***. Non ho lavorato con il lato server del nodo, quindi questo è forse un altro motivo per cui non riesco a ottenere Universal così bene. Spero che un giorno ci sarà la porta Python: P – Sasxa

Per ora sono interessato a *** in modo che tu possa vedere la vista renderizzata molto presto *** parte della storia.Sperimenterò con copia/incolla per ora e spero che quando * la vista resa dal client sia inserita nel tag radice dell'app e sostituisca la vista renderizzata dal server * le cose non vanno terribilmente storte (: – Sasxa

Una domanda: per Universal noi bisogno di un server, giusto? Cosa si può fare se abbiamo solo ** hosting statico **? – Sasxa

Come funziona effettivamente il prerender?

risposta

Problemi correlati