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
calledreact-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.
source to share
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).
source to share