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
andfetch
. - 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: