donejs v1.1.0 Release Notes

Release Date: 2017-11-06 // over 6 years ago
  • DoneJS 1.1.0 release marks the introduction of done-ssr's new Zones API. This new API makes it possible to customize server-side rendering by using can-zone plugins.

    done-ssr Zones

    We believe that done-ssr is one of the best server-rendering libraries available for any framework. It was always designed to be able to be used with any framework. This is because it:

    • Provides a minimal DOM layer with can-simple-dom.
    • ๐Ÿ‘‰ Uses can-zone to know when rendering is complete.

    With these two pieces any framework that uses DOM and async APIs; all of them, will work with done-ssr. Nevertheless it has still been somewhat difficult to use done-ssr outside of a DoneJS app because of the dependency on steal.

    ๐Ÿ”Œ For 1.1 we wanted to provide a way to use done-ssr with a DOM layer other than can-simple-dom (such as JSDOM which strives to be spec compliant). We settled on the best way to achieve this would be to provide all of the functionality of done-ssr through a set of Zone plugins. These include:

    • Setting up DOM layers.
    • Rerouting API requests from XMLHttpRequest and fetch.
    • Copying cookies from a request to the DOM layer's document.cookie and then setting cookies back on the response once finished.
    • ๐Ÿ‘ HTTP/2 PUSH support for fetch, XHR, and images.
    • Incremental Rendering.

    You can use it like this:

    const Zone = require("can-zone");const requests = require("done-ssr/zones/requests");const dom = require("can-zone-jsdom")const steal = require("done-ssr/zones/steal");require("http").createServer(async function(req, res) {res.writeHead(200, { 'content-type': 'text/html' });var zone = new Zone([// Overrides XHR, fetchrequests(req),// Sets up a DOMdom(req, {executeScripts: false,html: \_\_dirname + '/public/index.html'}),steal({config: \_\_dirname + '/public/package.json!npm',main: 'react-client/main'})]);let {html} = await zone.run();res.end(html);});
    

    React Server rendering guide

    ๐Ÿ— To go with this new API we've also created a new Server rendering React guide on donejs.com. It walks you through building a small React application using its default tools and then using done-ssr, can-zone, and can-zone-jsdom to implement server rendering.

    At the end of the guide you have an incrementally rendered React application that looks like this:

    ssr react example