Search Considerations for React Based Content
-
Upload
pete-wailes -
Category
Software
-
view
104 -
download
0
Transcript of Search Considerations for React Based Content
![Page 1: Search Considerations for React Based Content](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2fbce1a28abaf208b466f/html5/thumbnails/1.jpg)
Search Considerations for React Based ContentA look at the implications of using React for web content
Pete WailesChief Software [email protected]
![Page 2: Search Considerations for React Based Content](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2fbce1a28abaf208b466f/html5/thumbnails/2.jpg)
Easy part!
![Page 3: Search Considerations for React Based Content](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2fbce1a28abaf208b466f/html5/thumbnails/3.jpg)
renderToStringReactDOM.renderToString(React.createElement(App, props))
![Page 4: Search Considerations for React Based Content](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2fbce1a28abaf208b466f/html5/thumbnails/4.jpg)
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 ) ) })})
![Page 5: Search Considerations for React Based Content](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2fbce1a28abaf208b466f/html5/thumbnails/5.jpg)
More complex stuff…
![Page 6: Search Considerations for React Based Content](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2fbce1a28abaf208b466f/html5/thumbnails/6.jpg)
Stateful Content
![Page 7: Search Considerations for React Based Content](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2fbce1a28abaf208b466f/html5/thumbnails/7.jpg)
Tabs & CarouselsTwo types of stateful content controls:
1. className: ‘active’2. var content = this.renderTab(this.props.data[this.state.activeItem])
![Page 8: Search Considerations for React Based Content](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2fbce1a28abaf208b466f/html5/thumbnails/8.jpg)
CSS Controlled
![Page 9: Search Considerations for React Based Content](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2fbce1a28abaf208b466f/html5/thumbnails/9.jpg)
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…)
![Page 10: Search Considerations for React Based Content](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2fbce1a28abaf208b466f/html5/thumbnails/10.jpg)
Render Controlled
![Page 11: Search Considerations for React Based Content](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2fbce1a28abaf208b466f/html5/thumbnails/11.jpg)
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
![Page 12: Search Considerations for React Based Content](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2fbce1a28abaf208b466f/html5/thumbnails/12.jpg)
AMP
![Page 13: Search Considerations for React Based Content](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2fbce1a28abaf208b466f/html5/thumbnails/13.jpg)
Accelerated Mobile Pageshttps://www.ampproject.org/
![Page 14: Search Considerations for React Based Content](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2fbce1a28abaf208b466f/html5/thumbnails/14.jpg)
AMP− Mobile-optimised content− Google AMP Cache (global CDN)− Custom components
![Page 15: Search Considerations for React Based Content](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2fbce1a28abaf208b466f/html5/thumbnails/15.jpg)
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>
![Page 16: Search Considerations for React Based Content](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2fbce1a28abaf208b466f/html5/thumbnails/16.jpg)
PWA
![Page 17: Search Considerations for React Based Content](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2fbce1a28abaf208b466f/html5/thumbnails/17.jpg)
Progressive Web Appshttps://developers.google.com/web/progressive-web-apps/
![Page 18: Search Considerations for React Based Content](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2fbce1a28abaf208b466f/html5/thumbnails/18.jpg)
PWA− HTML5 + JS + Service Workers + App Shell Architecture
− Offline first page experience
![Page 19: Search Considerations for React Based Content](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2fbce1a28abaf208b466f/html5/thumbnails/19.jpg)
Service Workers?
![Page 20: Search Considerations for React Based Content](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2fbce1a28abaf208b466f/html5/thumbnails/20.jpg)
Service Workers− Browser > network > server > network > browser
− Service workers intercept between the browser & network
![Page 21: Search Considerations for React Based Content](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2fbce1a28abaf208b466f/html5/thumbnails/21.jpg)
App Shell Architecture?
![Page 22: Search Considerations for React Based Content](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2fbce1a28abaf208b466f/html5/thumbnails/22.jpg)
Application Shell Architecture− Minimum HTML, CSS & JS to render something
− On load, if we have cache, even with no connection, we can render something
![Page 23: Search Considerations for React Based Content](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2fbce1a28abaf208b466f/html5/thumbnails/23.jpg)
Offline First
![Page 24: Search Considerations for React Based Content](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2fbce1a28abaf208b466f/html5/thumbnails/24.jpg)
Offline First− Pass-through caching with service workers
− Cache all the things
− Assume no connection, render app shell, load content via connection if available
![Page 25: Search Considerations for React Based Content](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2fbce1a28abaf208b466f/html5/thumbnails/25.jpg)
Takeaways
![Page 26: Search Considerations for React Based Content](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2fbce1a28abaf208b466f/html5/thumbnails/26.jpg)
Use renderToString
![Page 27: Search Considerations for React Based Content](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2fbce1a28abaf208b466f/html5/thumbnails/27.jpg)
Create AMP versions of content
![Page 28: Search Considerations for React Based Content](https://reader035.fdocuments.us/reader035/viewer/2022081605/58f2fbce1a28abaf208b466f/html5/thumbnails/28.jpg)
PWA for future-proofing