matheus marsiglio - isomorphic react + redux app
Post on 28-Jan-2018
50 Views
Preview:
TRANSCRIPT
Motivation
Create a great experience for users exploring super powers from two worldswith an awesome challenge.
Knowledge level
Medium to advanced Javascript knowledge and some relevant experience working with React and Redux
Client side
Faster navigation Smarter data persistence
More control over user behavior Easier DOM manipulation
Server side
More control over loaded assets SEO super powers
client serverisomorphic code
client & server
Faster navigation Smarter data persistence
More control over user behavior Easier DOM manipulation
More control over loaded assets SEO super powers
Index.js
• SEO • Basic render in server side
• Isomorphic Fetch • SEO • PRELOADED_DATA • Folder tree with containers and components • Component abstraction layer for isomorphic fetch • Both sides fetch problem • Hot fetched data marker
Basic render in server side
Bring ReactDOMServer to your app ->Your component ->
Similar to ReactDOM.render()->
Folder structure
src/ └── components/ └── Home/ └── index.js └── Login/ └── index.js
└── containers/ └── Home.js └── Login.js
Folder structure
src/ └── components/ └── Home/ └── index.js └── Login/ └── index.js
└── containers/ └── Home.js └── Login.js └── ConnectApplication.js
Both sides fetch issue
Server side
Fetches, renders, magics
React checks data-reactid and do nothing :)
Client Side Javascript is loaded
Javascript will be executed and all fetched data will be refetched
Client side
Summary
• Basic render in server side • SEO issues • PRELOADED_DATA • Folder tree with containers and components • Component abstraction layer for isomorphic fetch • Both sides fetch problem • Hot fetched data marker
top related