server-side rendering isn't enough · server-side rendering isn't enough. matthew...
Post on 07-Nov-2018
235 Views
Preview:
TRANSCRIPT
MATTHEW PHILLIPSMATTHEW PHILLIPS
GITHUB.COM/CANJS/CAN-SSRGITHUB.COM/CANJS/CAN-SSR
WHY BOTHERWHY BOTHERPerceived performance: noone likes staring at a spinner.
This sucks
SEO: if you care about thatsort of thing, it helps. Notevery bot is Googlebot.
BLING BLING: Amazonreports that conversionincreased by 1% for every100ms improvement.
REQUIREMENTSREQUIREMENTS
Rendering speedOnly includes the assets needed (CSS and JavaScript)Prevents unnecessary requests in the client
PERFORMANCEPERFORMANCE
Shared routerAsynchronous renderingFast development experience with hot module swapping
MAINTAINABILITYMAINTAINABILITY
VIRTUAL DOMSVIRTUAL DOMSRun the same code on the client and serverRun within a single Node contextRendering is usually synchronous
/cart
Title
TRADITIONAL METHODTRADITIONAL METHOD
1. Initially unstyled2. Main, site-wide style is loaded3. Page specific style is loaded
progressively.
CSS LOADED IN JAVASCRIPTCSS LOADED IN JAVASCRIPT
/cart
Title
WITH SERVER TEMPLATEWITH SERVER TEMPLATE
1. Initially partially styled; main CSS isincluded, most of the page-specificCSS.
2. Rest of page-specific styles areadded.
ADDING CSS MANUALLYADDING CSS MANUALLY
/cart
Title
WITH DONEJSWITH DONEJS
1. All styles needed for the page areincluded directly in the head.
And only the styles needed forthe page.
CAN-SSR DOES IT FOR YOUCAN-SSR DOES IT FOR YOU
import Framework from 'fancy-framework';import './styles.scss';
...
COMPONENT-BASED ARCHITECTURECOMPONENT-BASED ARCHITECTURE
PREVENT REDUNDANT REQUESTSPREVENT REDUNDANT REQUESTS
<script> INLINE_CACHE = {"users": [{ ... } ] };</script>
Embed responses into the rendered page.Can be reused on the client to do initialrendering.
HOW MUCH CODE IS SHARED?HOW MUCH CODE IS SHARED?MINIMIZING DIFFERENCES FOR EASIER MAINTAINENCEMINIMIZING DIFFERENCES FOR EASIER MAINTAINENCE
The "main" can run on both client and inNode.A shared router, not adding new routes inseparate places
EXAMPLEEXAMPLE
var ssr = require("can-ssr/middleware");var app = require("express")();
app.use(ssr());
Middleware
var ssr = require("can-ssr");
var render = ssr();
render("/cart").then(function(result){ console.log(result.html);});
Core API
SYNCHRONOUS RENDERINGSYNCHRONOUS RENDERINGForces all data to be presentbefore rendering.Cannot use component-based architecture.Pushes application logic intoanother layer.Makes writing reusablecomponents harder.
// server.jsimport render from "framework-dom";
app.get("/cart", function(req, res){
fetchCart().then(function(data){ res.send( render(data) ); });
});
// cart.jsimport Component from "fancy-framework";
class Cart extends Component { render() { let data = this.props.data;
return <div> ... </div> }}
HTTPS://GITHUB.COM/CANJS/CAN-WAITHTTPS://GITHUB.COM/CANJS/CAN-WAIT
top related