Clever Geek Handbook

How do I get React-Router to display interactive output from the server?

I'm trying to use react-router

right now express.js

. My ultimate goal:

  • When the url hits the server, it will use server side rendering to render the output.
  • After the client in the future, the component clicks are Link

    called react-router

    to render on the client (no need to make a full trip to the server).

What I got so far:

  • Make the server render as this .
  • To make the component Link

    work correctly when I do on the client.

My problem:

  • Once I create on the server, the output is not interactive. I mean, no event handler is DOM related. This is clear. However, I am looking for a way to combine server and client rendering. I mean the server displays the output, but somehow it becomes interactive in the client. If I get this I can use it Link

    on the client and it will satisfy my needs.
+3


source to share


1 answer


If you call React.render(component, element)

on the client where it element

points to a DOM node that contains the React markup processed by the server and component

is generated with the same props as on the server (and assumes the / state props are exactly the same), React will transparently update the static markup in an interactive React app.



See this JSFiddle example demonstrating this technique: http://jsfiddle.net/BinaryMuse/ddvdppeg/ (note that there is a 1 second delay before the markup is updated to an interactive application, but for demo purposes only).

+1


source






More articles:


All Articles