search considerations for react based content
TRANSCRIPT
Search Considerations for React Based ContentA look at the implications of using React for web content
Pete WailesChief Software [email protected]
Easy part!
renderToStringReactDOM.renderToString(React.createElement(App, props))
renderToStringapp.get('/', function(req, res) { res.render('index.ejs', { reactTitle: JsonData.home.title, reactSection: '', reactDescription: JsonData.home.description, reactOutput: ReactDOM.renderToString( React.createElement(FMttM, JsonData.home ) ) })})
More complex stuff…
Stateful Content
Tabs & CarouselsTwo types of stateful content controls:
1. className: ‘active’2. var content = this.renderTab(this.props.data[this.state.activeItem])
CSS Controlled
CSS− Less weight given to content
− But still gets some weight
Use Cases:
− Booking options (flight, flight + car…)− Fast secondary navigation (accordions…)− Related data (stocks, bonds, currencies…)
Render Controlled
Render− Unrendered tabbed content doesn’t exist, so doesn’t get indexed
Use Cases:
− Useful but repetitive data (T&Cs, returns info…)− Image galleries− Lightboxes
AMP
Accelerated Mobile Pageshttps://www.ampproject.org/
AMP− Mobile-optimised content− Google AMP Cache (global CDN)− Custom components
Example<amp-video width=400 height=300 src=“foo.mp4" poster=“poster.jpg"> <div fallback> <p>Your browser doesn’t support HTML5 video</p> </div> <source type="video/mp4" src="foo.mp4"> <source type="video/webm" src="foo.webm"></amp-video>
PWA
Progressive Web Appshttps://developers.google.com/web/progressive-web-apps/
PWA− HTML5 + JS + Service Workers + App Shell Architecture
− Offline first page experience
Service Workers?
Service Workers− Browser > network > server > network > browser
− Service workers intercept between the browser & network
App Shell Architecture?
Application Shell Architecture− Minimum HTML, CSS & JS to render something
− On load, if we have cache, even with no connection, we can render something
Offline First
Offline First− Pass-through caching with service workers
− Cache all the things
− Assume no connection, render app shell, load content via connection if available
Takeaways
Use renderToString
Create AMP versions of content
PWA for future-proofing
