clientside-view-serverside-renderer

    1.1.2 • Public • Published

    clientside-view-serverside-renderer

    This module makes it easy to setup a proxy server capable of rendering clientside content on the server side. When used in conjunction with the clientside-view-loader, changing client rendering to server rendering is as simple as adding the string "server" as a flag.

    Usage Example

    The following example demonstrates how seamlessly this module enables rendering on the server.

    1. rendering on client
        view_loader.load(path_to_view).build(build_options);
    1. rendering on server
        view_loader.load(path_to_view).build(build_options, "server");
    Server Setup Example

    A rendering proxy server can be started with 5 lines of code:

    var Render_Server = require("clientside-view-serverside-renderer");
    var render_list = require("./render_list.json");
    var original_server = require("./original_server.json");
    var render_server = new Render_Server(render_list, original_server)
    render_server.start(8181);

    where render_list.json contains an array of paths that the proxy should render on (e.g., ["/index.html", "/cart/display.html"]) and original_server.json contains an object that defines the protocol, host, and port of the original server (e.g., {protocol:"http", "host":"a.domain.com", port:"80"}).

    Overview

    The renderer_server conducts server-side rendering on select paths before serving the content to a client.

    • For paths on the render_list, it proxies the html from a raw server, renders it (waiting for certain async content), and serves it.
      • the clientside-view-loader can then be used to facilitate hydration of the rendered dom
    • For paths not on the render_list, it proxies the request directly to and from the console without any modifications.

    Usage Overview

    This section documents an overview of using the server-side rendering functionality. It particularly covers automated usage, which utilizes the clientside-view-loader to seamlessly integrate server-side rendering into a client-side application.

    Automated Usage

    This module was built in coordination with the clientside-view-loader module to facilitate seemless usage of serverside rendering. The clientside-view-loader supports selectivly building view components on the server and on the client based on a simple flag. The difference between building on the server and building on the client is really as little as adding one string to the clientside-view-loader's build() command.

    Example

    The following example will demonstrate how seamlessly this module enables rendering on the server.

    1. rendering on client
        view_loader.load(path_to_view).build(build_options);
    1. rendering on server
        view_loader.load(path_to_view).build(build_options, "server");

    Manual Usage

    This module can also be used manually. One must consider several border cases and constraints. There are several tools created by this module that facilitate overcoming these border cases.

    These border cases and constraints are outlined in the following client-side usage considerations section.

    Components

    Proxy

    This module provides a proxy server capable of seamlessly integrating with any existing server to render views on the server.

    INSERT IMAGE DEMONSTRATING HOW SEEMLESSLY IT INTERFACES WITH EXISTING OPERATIONS

    Rendering

    The proxy server retreives HTML from any server and evaluates all client-side JS on the server. The HTML resultant by any changes JS has made to the DOM is then forwarded to the client.

    The rendering service utilizes JSDOM as the headless browser. Rendering waits until all promises specified to the content_rendered_manager are resolved to determine when asynchronous rendering has completed.

    Client-Side Usage Considerations

    Client-side developers must take care in considering three aspects to ensure ideal server-side rendering of client-side code. This module supports both a manual and a seamless integration. The manual integration requires the developers to consider these three aspects on their own. The seemless integration leverages the clientside-view-loader view library to automatically handle these considerations for them.

    (1) Duplicate Rendering

    Special care must be considered to ensure that views that are not intended to be rendered on the server are not rendered by the server. Otherwise, certain views would be rendered on both the client and the server.

    Seamless Integration

    The clientside-view-loader module ensures that views intended to be rendered on the client are not rendered on the server automatically.

    Manual Integration

    For manual integrations, the rendering service provisions the JSDOM rendering environment with the global property currently_rendering_on_server. Client-side JS should skip rendering any views ment to be rendered on the client when they see this property set to true.

    (2) Waiting for Asynchronous Rendering

    As mentioned in the rendering section, the rendering service waits for a specific promise to resolve to ensure that all asynchronous code has rendered. This promise is generated through the content_rendered_manager object, provisioned in the rendering environment.

    Seamless Integration

    The clientside-view-loader module provides and has seamless support for server side rendering. By using the clientside-view-loader, developers do not need to consider ensuring that the rendering server waits for async rendering to complete. All clientside-require load() requests are waited for on the server. Additionally, all clientside-view-loader view() and build().

    Manual Integration

    For manual integrations, the rendering service provisions the JSDOM rendering environment with the global object content_rendered_manager. Client-side JS should ensure that the content_rendered_manager waits for any asynchronous rendering js to complete by utilizing the wait_for() method. Example:

    if(typeof window.content_rendered_manager == "object")
        window.content_rendered_manager.wait_for(a_rendering_promise);

    (3) Hydration

    Special care has to be taken by the client-side JS code as when the client receives the rendered DOM, any "hydration" that the JS code conducts on the server will not be present on the client. Therefore, special care must be taken to hydrate any rendered DOM.

    Seamless Integration

    The clientside-view-loader module provides seamless support for serverside rendering. The module automatically detects whether a view needs to be rendered, hydrated, or both on run time.

    By utilizing the clientside-view-loader, developers to not need to consider which elements to hydrate with what code - given the view is rendered on the server in the first place.

    Install

    npm i clientside-view-serverside-renderer

    DownloadsWeekly Downloads

    0

    Version

    1.1.2

    License

    ISC

    Unpacked Size

    50.3 kB

    Total Files

    43

    Last publish

    Collaborators

    • uladkasach