## <span style="color:#038d99">Informal squad updates</span>  --- ## <span style="color:#038d99">Overview 📜</span> 1. Pre-rendering 2. React router v6 3. New search page 4. Upcoming changes --- ### <span style="color:#038d99">Prerender - Introduction </span> <ul style="font-size:1.6rem"> - React gives users a SPA (Single Page Application) which requires Javascript to show the content on the page. The problem is that the Google crawl bot, isn’t as good as understanding a page with javascript compared with a page that consists of regular HTML-code. - There are 2 solutions for the problem: - Server Side Rendering (SSR) using Gatsby or Nextjs - Use tool that helps crawl bots to view page without using Javascript - Why pre-render? - low cost - simple implementation - https://dashboard.prerender.io/ </ul> --- ### <span style="color:#038d99">Pre-rendering - Setup </span> - Public -> index.html ```javascript= <script> window.prerenderReady = false; if (navigator.userAgent.indexOf("prerender") !== -1) { window.SC_DISABLE_SPEEDY = true; } </script> ``` - Event.jsx ```javascript= setTimeout(() => { window.prerenderReady = true; }, 1000); ``` .env ``` PRERENDER_TOKEN= PRERENDER_SERVICE_URL=http://localhost:3000/ ``` --- ### <span style="color:#038d99">Pre-rendering - Testing </span> 1. Clone repo and start pre-render server -> https://docs.prerender.io/article/14-test-it ```bash= curl -A Googlebot http://localhost:3018/events/design-your-own-data-visualisation > pre-render.html ``` --- ### <span style="color:#038d99">React router v6</span> <ul style="font-size:2.2rem"> - Switch -> Routes - Match -> useMatch ( prop -> hook) - render fucntion -> element object </ul> --- ### <span style="color:#038d99">New Search</span> <ul style="font-size:2.6rem">  </ul> --- - Improved UX - Elastic search is gone - Data is coming from govquery api --- ### <span style="color:#038d99">Upcoming changes </span> - 404 page (at the moment, it’s very inconsistent between the different frontends, and for most of them, it’s practically broken) - Improving govgraph --- ## <span style="color:#038d99">Thank you! 🙏</span> ### Any Question