In order to render a component on the server-side, Zino provides the following methods:

renderComponent(name, path[, props])

  • name (String) - the component’s name to render
  • path (String) - which component to load and render
  • props (Object) - any pre-defined properties that should be handed into the component before mount()

This function will render a component including all imported sub components into a virtual document. Every call of renderComponent creates a new virtual document. The function’s result is a Promise that provides an object with the following properties:

  • styles (String) - all generated CSS styles (including the style tags) for the rendered components
  • preloader (String) - HTML code required to prefetch the rendered component (without extra network requests after page load)
  • body (String) - HTML code of the rendered component(s)
  • components (Object) - more detailed information on the components that were loaded on the server-side as part of this renderComponent call (contains the component’s code and path)
  • toString (Function) - when called, all required information will be bundled into one output string

A simple nodeJS example:

var Zino = require('zino-ssr');
var http = require('http');
var url = require('url');
var path = require('path');

setBasePath(process.cwd());
setStaticBasePath('/static/');

http.createServer(function (request, response) {
	let uri = url.parse(request.url).pathname,
		filename = path.join(process.cwd(), uri);

	// home page
	if (uri === '/') {
		Zino.renderComponent('home', './homepage.js').
		then(result => {
			response.writeHead(200, {
				'Content-Type': 'text/html'
			});
			response.write(result.toString());
		}).catch(error => {
			// if the component could not be rendered correctly bail out
			response.writeHead(500, {
				'Content-Type': 'text/plain'
			});
			response.end('500 - unable to render page: ' + error);
		});
	// static contents loaded by browser
	} else if (uri.indexOf('/static/') === 0) {
		// simplified static file handling for demonstration purposes only!
		if (fs.existsSync(filename)) {
			fs.readFile(filename, 'binary', function (err, file) {
				response.writeHead(200);
				response.write(file, 'binary');
				response.end();
			});
		}
	}
}).listen(8080);

setBasePath(path)

  • path (String) - the path that should become the new base path

This function defines from where components should be loaded on the server-side when calling Zino.import(). This path should be compatible to a require() call.

setStaticBasePath(path)

  • path (String) - the path from which all the component files will be loaded by the Browser from the server.

This function defines where to load the components from on the client-side, when Zino.import() is called. Please note, that the path should be component-independent.

setCollector(fn)

  • fn (Function) - callback function to be called when the final data has been provided

If the components that are rendered require additional, asynchronous data, setCollector can be used to define a callback function which is executed as soon as the components are rendered. That callback receives a parameter next of type Function, which, when called, leads to resolution or rejection of the promise returned by renderComponent. It is rejected if the next function is provided with an error message or object.

The default collector immediately executes the next() function.