Server side rendering, when used effectively, can dramatically increase the performance of a web application by offloading heavy calculations of dynamic content to a server process allowing an application developer to minimize the JavaScript and application state that needs to be shipped to the browser.

    A web application is generally made up of three key technologies:

    • HTML
    • CSS

    As well as increasingly, might play a part in a web application.

    These technologies combine to allow a developer to build an application in a browser using the web platform. While Deno supports a lot of web platform APIs, it generally only supports web APIs that are usable in a server-side context, but in a client/browser context, the main “display” API is the Document Object Model (or DOM). There are APIs that are accessible to application logic via JavaScript that manipulate the DOM to provide a desired outcome, as well as HTML and CSS are used to structure and style the display of a web application.

    We will be exploring fairly low-level enabling libraries and technologies, versus a full solution or framework for server side generation of websites.

    Created by the React team at Facebook, JSX is a popular DSL (domain specific language) for embedding HTML-like syntax in JavaScript. The TypeScript team also added support for the JSX syntax into TypeScript. JSX has become popular with developers as it allows mixing imperative programming logic with a declarative syntax that looks a lot like HTML.

    An example of what a JSX “component” might look like:

    The main challenge with JSX is that it isn’t JavaScript nor is it HTML. It requires transpiling to pure JavaScript before it can be used in a browser, which then has to process that logic to manipulate the DOM in the browser. This is provably less efficient than having a browser render static HTML.

    Read the Configuring JSX in Deno section for information on how to customize the configuration of JSX in Deno.

    The DOM is the main way a user interface is provided in a browser, and it exposes a set of APIs that allow it to be manipulated via JavaScript, but also allows the direct use of HTML and CSS.

    While Deno has a lot of web platform APIs, it does not support most of the DOM APIs related to visual representation. Having said that though, there are a few libraries that provide a lot of the APIs needed to take code that was designed to run in a web browser to be able to run under Deno, in order to generate HTML and CSS which can be shipped to a browser “pre-rendered”. We will cover those in the following sections:

    Cascading Style Sheets (CSS) provide styling for HTML within the DOM. There are tools which make working with CSS in a server side context easier and powerful.