From 83ef72c9bcdafa46e86615ab312c6eb89e5217ad Mon Sep 17 00:00:00 2001 From: Johny Ho 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 `
` in your ERB templates with: +Replace `
` in your ERB templates `index.html.erb` with: ```erb -<% initial_state = controller.render_to_string(@virtual_path ,formats: [:json], locals: local_assigns, layout: true) %> - - - -
- <%= Humid.render(initial_state).html_safe %> -
+
<%= Humid.render(initial_state).html_safe %>
``` +!> 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 %>; -
- <%%# 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 %> -
+<%%# If you need SSR follow instructions at %> +<%%# https://github.com/thoughtbot/superglue/blob/main/docs/recipes/server-side-rendering.md %> +
+ 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 %>; +<%%# If you need SSR follow instructions at %> +<%%# https://github.com/thoughtbot/superglue/blob/main/docs/recipes/server-side-rendering.md %>
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 %>; +<%%# If you need SSR follow instructions at %> +<%%# https://github.com/thoughtbot/superglue/blob/main/docs/recipes/server-side-rendering.md %>
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 %>; +<%%# If you need SSR follow instructions at %> +<%%# https://github.com/thoughtbot/superglue/blob/main/docs/recipes/server-side-rendering.md %>