• Mon. Mar 1st, 2021

are you building a single-page app with JavaScript that has lots of frequently changing content then your web app might benefit from dynamic rendering and that's what we're gonna look at in this video for this video we will use the filly cats as our sample application it is a single page app build as a progressive web app as well that lets you search for cats and great deals on them online we won't go much into the details of this app and focusing on implementing dynamic rendering instead but wait what is dynamic rendering it is a technique where you switch between client-side rendered content and pre-rendered content for certain user agents this is useful because you can deliver the full client-side rendered experience to users while getting as much content as possible to crawlers such as Googlebot as discussed earlier in this series that means your content is crawled and indexed without needing to execute JavaScript first alright let's get started first we take a look at our web app it loads a list of cats and shows cuteness along with its price at different affiliates when we put the URL into the mobile-friendly test though we only see the loading view rather than the actual content as the cats and the affiliate deals keep changing we won't be able to pre-render them easily switching entirely to server-side rendering might be a little too much on our plates right now so we want to look into dynamic rendering instead we will apply the server so that our users see the app the way it is right now but Googlebot and a few other BOTS get a version that was rendered on demand in a headless chromium using a render tron we start by deploying a render tron instance I chose to use Google Cloud for this but you can deploy render onto your own infrastructure as well I also set up the cache because starting a headless browser and render the page on every request will take some time and we want to serve the page as quickly as possible to avoid time outs with our render tron server running we install Express and the render tron middleware from NPM now we can write a small Express server to host our web app then we add to render tron middleware and configure it to use the default render tron user agent list but we add Googlebot to also use it for google search even though Googlebot can execute javascript we don't want to rely on that now the last two steps are setting up the middleware to use our render tron server to pre render pages and we write a little function as part of the server start to request our single page app so that the cache is ready to surf pages without having to wait for the headless browser to run we will rerun this function periodically to make sure the cache data is not too old so this video has concluded our JavaScript SEO series if you would like to see more JavaScript SEO content or any other SEO topics on our channel please let us know and submit your ideas in the comments below

Leave a Reply

Your email address will not be published. Required fields are marked *