From 8fd2e001fc75ab30540db6cf3582b360ccadd64d Mon Sep 17 00:00:00 2001
From: ronan <geonanorch@gmail.com>
Date: Tue, 8 Mar 2022 11:11:36 +0100
Subject: [PATCH] updated: ssr example extended to highlight hydration

---
 ssr/README.md            | 6 +++++-
 ssr/app/app.riot         | 9 +++++++++
 ssr/app/main.js          | 6 +++++-
 ssr/app/pages/about.riot | 8 +++++++-
 ssr/app/pages/home.riot  | 8 +++++++-
 5 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/ssr/README.md b/ssr/README.md
index 69388b6..c326a42 100644
--- a/ssr/README.md
+++ b/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
 
diff --git a/ssr/app/app.riot b/ssr/app/app.riot
index 2b41f19..2a24f5a 100644
--- a/ssr/app/app.riot
+++ b/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>
diff --git a/ssr/app/main.js b/ssr/app/main.js
index 8e412b5..f72c22d 100644
--- a/ssr/app/main.js
+++ b/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)
diff --git a/ssr/app/pages/about.riot b/ssr/app/pages/about.riot
index 2585307..eb09fb7 100644
--- a/ssr/app/pages/about.riot
+++ b/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>
\ No newline at end of file
diff --git a/ssr/app/pages/home.riot b/ssr/app/pages/home.riot
index d55e2a6..0e74268 100644
--- a/ssr/app/pages/home.riot
+++ b/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>
\ No newline at end of file