ssr example extended to highlight hydration

ssr/README.md

@@ -1,6 +1,10 @@
 # SSR
 
-This example shows how you can render and hydrate a simple Riot.js application using `@riotjs/ssr`.
+This example shows how you can render and hydrate a simple Riot.js application using `@riotjs/ssr` and `@riotjs/hydrate`.
+
+When loaded in the browser, the app is first statically rendered from the server, clicking on the button does not work (clicking on a navigation link results in a new page load).
+
+After a few seconds, the app is hydrated and fully working.
 
 ## Run locally
 

ssr/app/app.riot

@@ -11,6 +11,10 @@
     <route each={page in props.pages} path={page.path}>
       <main is={page.component}/>
     </route>
+
+    <div>
+      <button onclick="{ onClick }">Click me!</button>
+    </div>
   </router>
 
   <script>
@@ -33,6 +37,7 @@
       },
       // the isServer property is automatically injected by @riotjs/ssr
       onBeforeMount({isServer, initialRoute}) {
+        console.log('onBeforeMount, SSR mode: ' + (isServer ? '<YES>' : '<NO>'))
         // create a stream on all routes
         this.anyRouteStream = route('(.*)')
         // create a stream to check the riot-router state
@@ -68,6 +73,10 @@
       onBeforeUnmount() {
         this.routerStateStream.end()
         this.anyRouteStream.end()
+      },
+
+      onClick() {
+        alert('hello!')
       }
     }
   </script>

ssr/app/main.js

@@ -2,4 +2,8 @@ import '@riotjs/hot-reload'
 import hydrate from '@riotjs/hydrate'
 import App from './app.riot'
 
-hydrate(App)(document.querySelector('app'),  window.__INITIAL_STATE__)
+console.log('APP loaded and rendered statically, hydrating in a few seconds...')
+setTimeout(() => {
+  hydrate(App)(document.querySelector('app'),  window.__INITIAL_STATE__)
+  console.log('APP hydrated')
+}, 5000)

ssr/app/pages/about.riot

@@ -1,4 +1,10 @@
 <about>
-  <h1>Something about me</h1>
+  <h1>Something about me (in blue)</h1>
   <p>Here I describe who I am and what I do</p>
+
+  <style>
+    h1 {
+      color: blue;
+    }
+  </style>
 </about>

ssr/app/pages/home.riot

@@ -1,4 +1,10 @@
 <home>
-  <h1>I am the home page</h1>
+  <h1>I am the home page (in green)</h1>
   <p>Welcome</p>
+
+  <style>
+    h1 {
+      color: darkgreen;
+    }
+  </style>
 </home>