Client-side rendering

What is Client-side rendering(CRS)?

Rendering a website is a process from downloading content from the web server and present it to the browser. There are 2 types of rendering solutions:

  • Server-side rendering: This is a traditional method that we used a lot before. Your entire HTML page will be built by the web server and send to the client on every request.
  • Client-side rendering: This is a new method. With this method, your server now is responsible for data fetching and send it to the client via API like RESTFUL or Graphql. HTML page will be built and presented to the browser by using Javascript. Since frameworks like Angular, ReactJS, and Vue exists, there are many websites are using this approach nowadays. Google now can “read” JavaScript, it works pretty well, and it’s even SEO friendly.

How does Polavi implement the CRS approach?

Template system.

Polavi uses ReactJs as a templating language. You will find more detail information about what is Area? what is widget? in Polavi application here. We will describe how to interact with Polavi template system like add/modify/remove a block later.

Client-side rendering in Polavi.

When you visit Polavi store the very first time, server will send to client a small piece of HTML with page data inside as a javascript variable. This small piece of HTML contains a bootstrap script app.js. This script will trigger a process to read data and build a completed HTML document and render it to the browser. From here, when you click on any link on the page, an Ajax call will be triggered to fetch data from the server. The server will return data to the client under JSON format and React templating system will parse and render it to the browser.