From 83ef72c9bcdafa46e86615ab312c6eb89e5217ad Mon Sep 17 00:00:00 2001
From: Johny Ho <johny@thoughtbot.com>
Date: Sun, 8 Oct 2023 14:48:42 -0400
Subject: [PATCH] Clarify hydration instructions.

There should not be any spacing within the root dom. If there is, React will
fail to hydrate. We also remove an incorrect comment on `edit.html.erb` and
refer back to the docs for instructions.
---
 docs/recipes/server-side-rendering.md             | 15 +++++----------
 .../generators/rails/templates/web/edit.html.erb  | 10 ++++------
 .../generators/rails/templates/web/index.html.erb |  2 ++
 .../generators/rails/templates/web/new.html.erb   |  2 ++
 .../generators/rails/templates/web/show.html.erb  |  2 ++
 5 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/docs/recipes/server-side-rendering.md b/docs/recipes/server-side-rendering.md
index c07e29cb..8644a6d0 100644
--- a/docs/recipes/server-side-rendering.md
+++ b/docs/recipes/server-side-rendering.md
@@ -96,20 +96,15 @@ Add a line to your `package.json` like so:
 +    "build:ssr": "node ./build-ssr.mjs"
 ```
 
-Replace `<div id="app">` in your ERB templates with:
+Replace `<div id="app"></div>` in your ERB templates `index.html.erb` with:
 
 ```erb
-<% initial_state = controller.render_to_string(@virtual_path ,formats: [:json], locals: local_assigns, layout: true) %>
-
-<script type="text/javascript">
-  window.SUPERGLUE_INITIAL_PAGE_STATE=<%= initial_state.html_safe %>;
-</script>
-
-<div id="app">
-  <%= Humid.render(initial_state).html_safe %>
-</div>
+<div id="app"><%= Humid.render(initial_state).html_safe %></div>
 ```
 
+!> Do not render spacing above. If you do, React will not hydrate properly and
+warn `Hydration failed because the initial UI does not match what was rendered on the server`
+
 In `application.js` change this:
 
 ```
diff --git a/superglue_rails/lib/generators/rails/templates/web/edit.html.erb b/superglue_rails/lib/generators/rails/templates/web/edit.html.erb
index f01b0427..5d366e6c 100644
--- a/superglue_rails/lib/generators/rails/templates/web/edit.html.erb
+++ b/superglue_rails/lib/generators/rails/templates/web/edit.html.erb
@@ -4,9 +4,7 @@
   window.SUPERGLUE_INITIAL_PAGE_STATE=<%%= initial_state.html_safe %>;
 </script>
 
-<div id="app">
-  <%%# If you need SSR follow instructions at %>
-  <%%# https://github.com/thoughtbot/superglue/blob/main/docs/recipes/server-side-rendering.md %>
-  <%%# and uncomment the following line %>
-  <%%#= Humid.render(initial_state).html_safe %>
-</div>
+<%%# If you need SSR follow instructions at %>
+<%%# https://github.com/thoughtbot/superglue/blob/main/docs/recipes/server-side-rendering.md %>
+<div id="app"></div>
+
diff --git a/superglue_rails/lib/generators/rails/templates/web/index.html.erb b/superglue_rails/lib/generators/rails/templates/web/index.html.erb
index 2d9cc95b..db4b62ab 100644
--- a/superglue_rails/lib/generators/rails/templates/web/index.html.erb
+++ b/superglue_rails/lib/generators/rails/templates/web/index.html.erb
@@ -4,4 +4,6 @@
   window.SUPERGLUE_INITIAL_PAGE_STATE=<%%= initial_state.html_safe %>;
 </script>
 
+<%%# If you need SSR follow instructions at %>
+<%%# https://github.com/thoughtbot/superglue/blob/main/docs/recipes/server-side-rendering.md %>
 <div id="app"></div>
diff --git a/superglue_rails/lib/generators/rails/templates/web/new.html.erb b/superglue_rails/lib/generators/rails/templates/web/new.html.erb
index 2d9cc95b..db4b62ab 100644
--- a/superglue_rails/lib/generators/rails/templates/web/new.html.erb
+++ b/superglue_rails/lib/generators/rails/templates/web/new.html.erb
@@ -4,4 +4,6 @@
   window.SUPERGLUE_INITIAL_PAGE_STATE=<%%= initial_state.html_safe %>;
 </script>
 
+<%%# If you need SSR follow instructions at %>
+<%%# https://github.com/thoughtbot/superglue/blob/main/docs/recipes/server-side-rendering.md %>
 <div id="app"></div>
diff --git a/superglue_rails/lib/generators/rails/templates/web/show.html.erb b/superglue_rails/lib/generators/rails/templates/web/show.html.erb
index 2d9cc95b..db4b62ab 100644
--- a/superglue_rails/lib/generators/rails/templates/web/show.html.erb
+++ b/superglue_rails/lib/generators/rails/templates/web/show.html.erb
@@ -4,4 +4,6 @@
   window.SUPERGLUE_INITIAL_PAGE_STATE=<%%= initial_state.html_safe %>;
 </script>
 
+<%%# If you need SSR follow instructions at %>
+<%%# https://github.com/thoughtbot/superglue/blob/main/docs/recipes/server-side-rendering.md %>
 <div id="app"></div>