3.0 KiB
Server-side rendering
Marko allows any Marko template/UI component to be rendered on the server or in the browser. A page can be rendered to a Writable stream such as an HTTP response stream as shown below:
var template = require('./template'); // Import ./template.marko
module.exports = function(req, res) {
res.setHeader('Content-Type', 'text/html; charset=utf-8');
template.render({ name: 'Frank' }, res);
};
Marko can also provide you with a Readable stream.
var template = require('./template'); // Import ./template.marko
module.exports = function(req) {
// Return a Readable stream for someone to do something with:
return template.stream({ name: 'Frank' });
};
ProTip: Marko also provides server-side framework integrations:
Bootstrapping Components
When a server-rendered page loads in the browser it's possible for marko to automatically detect UI components rendered on the server and create and mount them with the correct state and input in the browser.
Bootstrapping: Lasso
If you are using Lasso.js then the bootstrapping will happen automatically as long as the JavaScript bundles for your page are included via the <lasso-body> tag. A typical HTML page structure will be the following:
routes/index/template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Marko + Lasso</title>
<!-- CSS includes -->
<lasso-head/>
</head>
<body>
<!-- Top-level UI component: -->
<app/>
<!-- JS includes -->
<lasso-body/>
</body>
</html>
ProTip: We have provided some sample apps to help you get started with Marko + Lasso
Bootstrapping: Non-Lasso
If a JavaScript module bundler other than Lasso is being used then you will need to add some client-side code to bootstrap your application in the browser by doing the following:
- Load/import/require all of the UI components that were rendered on the server (loading the top-level UI component is typically sufficient)
- Call
require('marko/components').init()
For example, if client.js is the entry point for your client-side application:
routes/index/client.js
// Load the top-level UI component:
require('./components/app/index');
// Now that all of the JavaScript modules for the UI component have been
// loaded and registered we can tell marko to bootstrap/initialize the app
// Initialize and mount all of the server-rendered UI components:
require('marko/components').init();
ProTip: We have provided some sample apps to help you get started: