Server render

To try server render, use this boilerplate. Next, we will analyze it: In order to test server rendering in action use ready boilerplate.

Next, we will disassemble it:

Algorithm server rendering

Create a server

/build/server/index.js

const createServer = require('vqua-server') const layout = require('./layout') const initRoutes = require('../build/initializers/initRoutes') initRoutes().then(routes => { const app = createServer({ routes, layout, publicPath: './dist', componentPath: './build/containers', }) app.listen(8000) }) process.on('unhandledRejection', error => { console.log('unhandledRejection', error) });

The server accepts the request, and finds the matched route and controller.

Learn more about creating a server

Controller

/build/controllers/WelcomeController.js

class WelcomeController { index(req, res) { res.send(200, 'WelcomeContainer', { props: {}, context: {} }) } } module.exports = WelcomeController

Controller return response code, component name and his params.

After that, the server finds in the folder /build/containers the requested component and creates a virtual tree from it. On the basis of this tree, it creates an html string, places it in your main template (layout) and sends a request to the browser.

Also, along with the main template in the script#app-cache, the server places the JSON string with the data from request.send (). This is done in order to not cause the controller once again in the browser.

Browser navigation

/build/index.js

const { render } = require('vqua') const Navigation = require('vqua-navigation') const initRoutes = require('./initializers/initRoutes') initRoutes().then(routes => { let liveNodes = [] const navigation = new Navigation(routes) navigation.onNavigate(({ path, statusCode, componentName, params }) => { const $app = document.getElementById('app') const Component = require('./containers/' + componentName) const context = Object.assign(params.context, { navigate: navigation.navigate.bind(navigation) }) const templateNodes = [ Component.v(params.props, context) ] liveNodes = render($app, liveNodes, templateNodes, context) }) navigation.onRedirect(({ redirectPath, statusCode, params }) => { window.history.pushState({}, '', redirectPath) navigation.navigate(redirectPath) }) const $cache = document.getElementById('app-cache') const cache = $cache.innerHTML $cache.parentNode.removeChild($cache) navigation.navigate(window.location.pathname, cache) window.onpopstate = (event) => { navigation.navigate(window.location.pathname) } })

The browser received a response from the server. Now we need to build two virtual trees.

1st tree we build on the basis of the DOM that provided us with a browser.

2nd tree we build on the basis of JSON controller cache from the script tag mentioned above.

Now the render method will compare two trees and restore the difference between them. More precisely, hangs the missing events, and it will go all the way through the life cycle of the callbacks of each component.

More about browser navigation