Permalink
Browse files

Server-side Render Components

We can now take advantage of the express server and "server-side"
render the components. The result is complete HTML pages being returned.
In fact, you should now be able to navigate the page without the
need for Javascript enabled, time-to-render on the client is faster,
obvious SEO benefits. The downside is a "round-trip" to the express
server
  • Loading branch information...
nambrot committed Mar 24, 2015
1 parent 545326e commit 02204f74006390a8cbb591eb2281aa22d38dd7c1
Showing with 9 additions and 4 deletions.
  1. +1 −0 Gemfile
  2. +5 −0 Gemfile.lock
  3. +1 −1 README.md
  4. +1 −3 app/helpers/react_helper.rb
  5. +1 −0 app/views/posts/new.html.erb
@@ -46,3 +46,4 @@ end
gem 'simple_form'
gem 'foundation-rails'
gem 'responders'
gem 'httparty'
@@ -59,6 +59,9 @@ GEM
globalid (0.3.3)
activesupport (>= 4.1.0)
hike (1.2.3)
httparty (0.13.1)
json (~> 1.8)
multi_xml (>= 0.5.2)
i18n (0.7.0)
jbuilder (2.2.12)
activesupport (>= 3.0.0, < 5)
@@ -76,6 +79,7 @@ GEM
mini_portile (0.6.2)
minitest (5.5.1)
multi_json (1.11.0)
multi_xml (0.5.5)
nokogiri (1.6.6.2)
mini_portile (~> 0.6.0)
rack (1.6.0)
@@ -157,6 +161,7 @@ DEPENDENCIES
byebug
coffee-rails (~> 4.1.0)
foundation-rails
httparty
jbuilder (~> 2.0)
jquery-rails
rails (= 4.2.0)
@@ -25,7 +25,7 @@ The first step to server side rendering is to be able to deserialize data into t

### 4. Add Server-Side Rendering

We are going to use a simple express server which will take the 1. route and 2. serializedState as parameters and simply return the HTML.
We are going to use a simple express server which will take the 1. route and 2. serializedState as parameters and simply return the HTML. The result is complete HTML pages being returned. In fact, you should now be able to navigate the page without the need for Javascript enabled, time-to-render on the client is faster, obvious SEO benefits. The downside is a "round-trip" to the express server

### Not Adressing

@@ -1,8 +1,6 @@
module ReactHelper
def renderSerializedStoreState(state)
component = "<script>"
component += "window.serializedStoreState = " + state.to_json.to_json
component += "</script>"
component = HTTParty.post "http://localhost:3001", body: {path: request.path, serializedStoreState: state.to_json}.to_json, headers: {'Content-Type' => "application/json"}
component.html_safe
end
end
@@ -0,0 +1 @@
<%= renderSerializedStoreState({}) %>

0 comments on commit 02204f7

Please sign in to comment.