![SERVER RESPONSE TEMPLATE
export default function serverResponseTemplate({appContent = '', headCss = '', storeJson = {}, helmetObj}, {scriptName}) {
const assets = global.assetsChunks;
return `
<!DOCTYPE html>
<html lang="en" ${helmetObj.htmlAttributes}>
<head>
${headCss}${helmetObj.title}${helmetObj.meta}${helmetObj.link}
</head>
<body>
<div id="root">${appContent}</div>
<script charSet="UTF-8">
window.__initial_state__=${serialize(storeJson)};
</script>
${assets.styles.main ? `<link rel="stylesheet" href="${assets.styles.main}">` : ''}
<script src="${assets.javascript.vendor}"></script>
${scriptName ? `<script src="${assets.javascript[scriptName]}"></script>` : ''}
</body>
</html>
`;
}](https://image.slidesharecdn.com/componentlevelcachingwithreact3-190520154000/85/Component-level-caching-with-react-10-320.jpg)
Component level caching with react
- 1. MAY. 18, 2019 • REACTJS- BANGALORE COMPONENT LEVEL CACHING WITH REACT ANUSHEEL SINGH (@ImAnusheel) TEAM GOIBIBO (@goibibo_tech)
- 2. DISCUSSION OUTLINE Background of Goibibo's Isomorphic Usecase Problem statement in-hand Lifecycle of a request for dynamic content Basis of Solution Implementation Future of component level caching Q&A
- 3. ORGANIC TRAFFIC IS IMPORTANT New user. Search engine domination on user behaviour. WHY SERVER SIDE RENDERING? NO REPETITIVE EFFORT Single system powering all source of traffic. Feature parity. Better utilisation of engineering bandwidth. Reliability. MATRICS MATTERS Response time, Time to first meaningful paint, SEO Rank
- 4. TECH STACK CUSTOM IMPLEMENTATION React Redux Redis
- 5. PROPERTY DETAIL PAGE TOTAL REQUEST ~300K UNIQUE PROPERTY REQUESTED ~100k DOC GZIP SIZE ~25kb CACHE TTL ~7 Days * Organic traffic only
- 6. Natural language organic queries/searches BEACH FACING HOTEL IN GOA. TREE HOUSE IN MUNNAR. HOTELS WITH INFINITY POOLS IN PHUKET. AND MANY MORE ENDLESS QUERIES. PROBLEM STATEMENT / OPPORTUNITY
- 7. All reviews indexing NATURAL LANGUAGE QUERIES Infinite set of queries are possible. Hard to control tagging quality if power is given to the hotelier. USER GENERATED CONTENTS Natural language reviews. Trusted content. Good response time with optimised cache size
- 8. MATCH ROUTE Top level component to be rendered. Async task to be performed. Should be cached or not. Cache key function. TRY TO SERVE FROM CACHE If route is configured to be cached then check in cache against the cache key. INITIALISE STORE WITH INPUT & PERFORM ASYNC TASK Input from URL & async task from matched route object. RENDER TO STATIC MARKUP Content. Critical CSS. Store snapshot for client hydration. Meta/Link tags (using helmet). CACHE IT If cache flag is true then set the cache against the cache key. LIFECYCLE OF A REQUEST DYNAMIC CONTENT
- 9. String output from renderToString. Goes into body tag (element hook). CONTENT CACHE FORMAT CSS required for proper layout. Goes into head tag. CRITICAL CSS Redux store snapshot used to render on server. Hydrate on client with same state. STORE SNAPSHOT Critical for SEO Goes into head tag HEAD TAGS Comstech • Oct. 15, 2020
- 10. SERVER RESPONSE TEMPLATE export default function serverResponseTemplate({appContent = '', headCss = '', storeJson = {}, helmetObj}, {scriptName}) { const assets = global.assetsChunks; return ` <!DOCTYPE html> <html lang="en" ${helmetObj.htmlAttributes}> <head> ${headCss}${helmetObj.title}${helmetObj.meta}${helmetObj.link} </head> <body> <div id="root">${appContent}</div> <script charSet="UTF-8"> window.__initial_state__=${serialize(storeJson)}; </script> ${assets.styles.main ? `<link rel="stylesheet" href="${assets.styles.main}">` : ''} <script src="${assets.javascript.vendor}"></script> ${scriptName ? `<script src="${assets.javascript[scriptName]}"></script>` : ''} </body> </html> `; }
- 11. Basis of solution EVERYTHING IS A COMPONENT App layout, Route Layout, Container, Component everything is a component. Props can be provided from parent or component can be connnected to redux store COMPONENT IS A FUNCTION OF PROPS On server, component is just a function of props provided. If props remains the same then output will also be the same. COMPONENT AS A INDEPENDENT UNIT Each component can be rendered as content, critical css, helmet object, data snapshot.
- 12. Implementation DIVIDE & FETCH Introduce a request handler and split it into two sub request. Complete Detail and Review. INDIVIDUAL LIFECYCLE Both will go through there individual journey, cache and returns the cache structure. MERGE Once we have both the response. Merge it and create a new cache structure. SERVER RESPONSE TEMPLATE Send the final merged output to the server response template and send response.
- 13. CODE SNIPPETS DETAIL CONTAINER // detail component render function render() { return ( <View> {/* other components */} <DetailReview // other props renderHook={Platform.OS === 'mobile' && __SERVER__} /> {/* other components */} </View> ); REVIEW COMPONENT // detail review component render function render() { if (this.props.renderHook) { return (<div id="detail-rnr"></div>); } // otherwise render actual component return (<TheComponent />); }
- 14. MERGING const storeJson = {...staticStoreJson,ugc: reviewStoreJson.ugc}; // merge store const finalHelmetObj = {...helmetObj, link: `${helmetObj.link}${seoLinks} || ''`}; // merge helmet const appContent = staticContent.replace(`<div id="detail-rnr"></div>`, reviewContent); // merge markup const headCss = `${staticHeadCss}${reviewHeadCss}`; // merge css const data = { appContent, headCss, storeJson, helmetObj: finalHelmetObj };
- 15. FUTURE OF COMPONENT LEVEL CACHIING REACT COMPONENT CACHING https://github.com/rookLab/rea ct-component-caching REACT CACHE https://github.com/facebook/re act/tree/master/packages/reac t-cache CONCURRENT RENDERING IN REACT https://www.youtube.com/watc h?v=ByBPyMBTzM0
- 16. Anusheel Singh - @ImAnusheel TEAM GOIBIBO - @GOIBIBO_TECH Q & A THANK YOU