search considerations for react based content

Search Considerations for React Based ContentA look at the implications of using React for web content

Pete WailesChief Software Architectpete@builtvisible.com

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

Questions?

Pete WailesChief Software Architectpete@builtvisible.com