This document discusses server-side rendering and isomorphic JavaScript with Drupal. It explains that while front-end apps run program logic in the client, the first HTML view is best rendered by the server for performance. Isomorphic JavaScript allows running code on both the server and client. With Drupal, options include using it as a REST backend, rendering the first view with a proxy, or rendering Node.js tags within Twig templates using the Twigriot proof of concept. This allows server-side rendering with minimal overhead.

1. SERVER-SIDE RENDERING &
ISOMORPHIC JAVASCRIPT
WITH DRUPAL
Jani Tarvainen

2. Front End Apps
§ Program logic moving to the client
§ Vue,Angular, React, etc, etc.
§ Sending data only via a RESTAPI works,
but not ideal on the first page load
§ 1st HTMLview rendered by server for best perf.
§ Duplicating program logic & templates in the
back end and front end adds complexity

3. Isomorphic JavaScript
§ It’s now staple to run JavaScript on the server
§ You can run (parts) of the code base in both the
server and the browser
§ Server renders the 1st view state
§ Front end app picks up via REST from there on
§ Browser receives http://example.com/foo/BAR
<h1>BAR</h1> vs. <h1>{ foo }</h1>

4. Isomorphic Drupal Options
§ Drupal as REST back end only for a Node front
§ You miss out on Drupal features (blocks, etc.) and
are forced to an app only approach
§ Abrowser proxy (Phantom.js, etc.) renders 1st
view
§ Adds complexity to your server setup, development
§ Render tags content via Twig
§ Fluent mixing of standard Twig templating and
Node.js rendered tags (with state)

5. Twigriot
§ Proof of concept of rendering Node.js rendered
content Twig:
§ {{ riot_render('ymap',coords) }}
§ No developer overhead once initial setup is done
§ More at
www.symfony.fi/twig-node