Improving SEO for React Apps with Server-Side Rendering and Static Site Generation
Tags: javascript, react, seo, programming
Published: 2023-09-29 05:34:46

<div>
<p class="ace-copy-paste-skip-this-tag"><span style="font-size: 16px;">React has become one of the most popular JavaScript libraries for building user interfaces and web applications. </span></p>

</div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">With its component-based architecture and virtual DOM diffing algorithm, React enables developers to build complex UIs that are fast, modular, and responsive.</span></div>
<div></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">However, React applications built using create-react-app, or other client-side-only frameworks have some drawbacks regarding SEO. </span></div>
<div></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">By default, React apps are rendered entirely on the client side, meaning the content is generated dynamically using JavaScript after the page loads. This presents challenges for search engine crawlers trying to index the content.</span></div>
<div></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">In this article, we’ll explore how server-side rendering and static site generation can help improve SEO for React applications. We’ll look at the specific problems with client-only React apps and then discuss how server-side and static rendering can solve those problems. </span></div>
<div></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">We’ll also walk through implementation details using popular React frameworks like Next.js and Gatsby.</span></div>
<div>
<h4 data-usually-unique-id="507458893938728373709201"><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Challenges of SEO with Client-Side Rendered React Apps</span></h4>
</div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Single-page applications built with frontend JavaScript frameworks like React suffer from some SEO disadvantages compared to traditional server-rendered apps. Here are some of the main challenges:</span></div>
<div></div>
<ul class="listtype-bullet listindent1 list-bullet1">
 	<li><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Content is not visible to search engine crawlers - Because content is rendered dynamically on the client side after the initial page load, crawlers cannot see the rendered content as they lack JavaScript capabilities. This means much of the app's content can be invisible to search engines.</span></li>
</ul>
<div></div>
<ul class="listtype-bullet listindent1 list-bullet1">
 	<li><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Crawl budget can be consumed rapidly - Modern search engine crawlers have limited ability to run JavaScript, but they impose a crawl budget to limit how much JS is processed to prevent overloading servers. If an app requires crawling many pages with heavy client-side JS, it can quickly use up the entire budget.</span></li>
</ul>
<div></div>
<ul class="listtype-bullet listindent1 list-bullet1">
 	<li><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Poor performance on mobile and slow connections - Client-side JavaScript takes longer to download and execute on mobile devices and slow connections before the content is viewable. This leads to poor user experience and performance.</span></li>
</ul>
<div></div>
<ul class="listtype-bullet listindent1 list-bullet1">
 	<li><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Low initial page loading speeds - The server can only return a mostly empty HTML shell for the initial visit, requiring the client to download and execute a lot of JS before useful content appears. This also hampers user experience.</span></li>
</ul>
<div></div>
<ul class="listtype-bullet listindent1 list-bullet1">
 	<li><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Not friendly for web sharing and bookmarks - When a user shares a link or bookmarks a page, only the initial empty HTML is captured, meaning no meaningful content is shared.</span></li>
</ul>
<div></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Clearly, relying entirely on client-side rendering limits SEO capabilities for React and other JavaScript apps. The good news is there are solutions to these problems.</span></div>
<div>
<h4 data-usually-unique-id="601512806683912971075864"><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Server-Side Rendering for React Apps</span></h4>
</div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Server-side rendering</span> <span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i h-lparen">(SSR)</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i"> involves rendering your React app into HTML on the server before sending it to the client. </span></div>
<div></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">This means the initial page view will contain a fully rendered markup that search engines can crawl properly. SSR addresses the major SEO drawbacks of client-only apps:</span></div>
<div></div>
<ul class="listtype-bullet listindent1 list-bullet1">
 	<li><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Search engines can crawl meaningful content - Since the React components are pre-rendered to HTML on the server, crawlers can see the full content on the initial visits.</span></li>
 	<li><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">No crawl budget issues - No client-side JavaScript needs to be executed for the initial visit, so the crawl budget will not be consumed rapidly.</span></li>
 	<li><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Faster initial page loads - Pre-rendered HTML loads quickly without waiting for JS bundles and client-side rendering.</span></li>
 	<li><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Good performance on slow connections - The page is usable even before client JS fully loads since the server-rendered HTML contains the content.</span></li>
 	<li><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Link sharing works properly - Server-rendered HTML will contain actual content, so links shared on social media or bookmarks will work as expected.</span></li>
</ul>
<div></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">SSR is critical for React apps that must be indexable and shareable by search engines and social media. The tradeoff is increased complexity on both the server and client side.</span></div>
<div>
<h4 data-usually-unique-id="986054552343719114771804"><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Implementing Server-Side Rendering</span></h4>
</div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">While server-side rendering is possible to implement manually, it's complex and requires expertise with servers and deployment. Luckily, React frameworks handle all the SSR complexity for you automatically.</span></div>
<div></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">The most popular framework for SSR React apps is Next.js from Vercel. Here's how it implements SSR:</span></div>
<div></div>
<ul class="listtype-bullet listindent1 list-bullet1">
 	<li><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Components are rendered to static HTML on the server - A Node.js server runs the React rendering and component lifecycles to generate static HTML.</span></li>
 	<li><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">HTML is returned for the initial request - The server returns the rendered HTML to the browser for the first-page visit.</span></li>
 	<li><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Client-side React takes over - After the initial server render, the client-side JSbundle boots up React to take over with dynamic functionality.</span></li>
 	<li><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Incremental static regeneration - Pages can be selectively re-rendered to HTML in the background and then served statically.</span></li>
</ul>
<div></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Next.js streamlines the process so you can focus on building React components and pages. Under the hood, it handles all the SSR complexity, like managing server build processes and routing.</span></div>
<div></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Other frameworks like Razzle and After.js also implement SSR for React, but Next.js remains the most full-featured and widely used. For most applications needing SEO, Next.js is the best choice.</span></div>
<div>
<h4 data-usually-unique-id="995063716886679982892825"><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Static Site Generation for React Apps</span></h4>
</div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Static site generation</span> <span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i h-lparen">(SSG)</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i"> takes SSR to the maximum level for performance and SEO. With SSG, the entire site is prebuilt into static HTML pages at build time instead of rendering on each request. The static files can then be served from a CDN.</span></div>
<div></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">SSG provides all the same SEO benefits of SSR, plus additional performance gains:</span></div>
<ul class="listtype-bullet listindent1 list-bullet1">
 	<li><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">No server-side rendering required - Pages are simple static files that can be served from a CDN without needing application servers.</span></li>
 	<li><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">CDN handles caching and scaling - A content delivery network handles caching static assets close to users and horizontal scaling to absorb traffic spikes.</span></li>
 	<li><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Faster performance - Serving prebuilt files is faster than rendering on each request. No server computing is required.</span></li>
 	<li><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Easier scaling - Scaling is handled automatically by the CDN without scaling backend servers.</span></li>
</ul>
<div></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">The tradeoff is that SSG only works for sites with mostly static content. For frequently changing dynamic data, SSR is preferable. SSG also requires a build/deploy step whenever the content is updated.</span></div>
<div></div>
<div>
<h4 data-usually-unique-id="687312629649322202646533"><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Implementing Static Site Generation</span></h4>
</div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Like SSR, dedicated frameworks remove the complexity of implementing SSG yourself. Next.js and GatsbyJS both provide React frameworks optimized for SSG.</span></div>
<div></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">With Next.js, SSG is accomplished by:</span></div>
<ul class="listtype-bullet listindent1 list-bullet1">
 	<li><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Exporting pages to static HTML at build time - Next.js generates static HTML for each page upfront instead of server-side rendering on each request.</span></li>
 	<li><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Rebuilding and redeploying when data changes - To update content, you rerun the build to regenerate a fresh static site.</span></li>
 	<li><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">CDN serves the static files - Files are deployed to a CDN like Vercel or Netlify to be served globally.</span></li>
 	<li><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Falls back to SSR where needed - Next.js can selectively use SSR while the rest remain static for dynamic pages.</span></li>
</ul>
<div></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">GatsbyJS is a React-based open-source framework that follows the JAMstack architecture for SSG:</span></div>
<div></div>
<ul class="listtype-bullet listindent1 list-bullet1">
 	<li><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">During the build, data is sourced from APIs, CMSs, databases, etc..</span></li>
 	<li><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Gatsby uses the data to render static pages from React components at build time.</span></li>
 	<li><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Pages are deployed to a CDN to be served as simple static files.</span></li>
 	<li><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Can preview builds before deploying and integrate with CMSs</span></li>
</ul>
<div></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">SSG offers faster performance and better scaling for sites with mostly static content than traditional SSR. Both Next.js and Gatsby provide powerful ways to implement SSG with React.</span></div>
<div>
<h4 data-usually-unique-id="190584730822231024822195"><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Conclusion</span></h4>
</div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">React's client-side rendering approach delivers a fast, interactive user experience but hampers SEO reach and social sharing. Server-side rendering and static site generation unlock the SEO potential of React by pre-rendering sites to HTML.</span></div>
<div></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Tools like Next.js make implementing SSR straightforward so you can focus on building your React app. For sites with mostly static content, SSG frameworks like Next.js and Gatsby enable blazing-fast performance by pre-building pages.</span></div>
<div></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Compared to client-only React apps, SSR and SSG provide immense gains in SEO capability, page speed performance, and long-term scalability. </span></div>
<div></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Any React developer who cares about SEO and performance should strongly consider utilizing these techniques for their next project. The ease of implementing SSR and SSG with frameworks means there's no reason not to.</span></div>
<div></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">If you want to become a programmer, then this </span><span class="attrlink url author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i"><a class="attrlink" href="https://blog.learnhub.africa/2023/09/12/how-to-learn-programming-in-2023/" target="_blank" rel="noreferrer nofollow noopener" data-target-href="https://blog.learnhub.africa/2023/09/12/how-to-learn-programming-in-2023/"><u>article</u></a></span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i"> is your guide to becoming one. It explains everything from start to finish on how to build technical skills and what to do.</span></div>
<div></div>
<div><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">If you find this post exciting, find more exciting posts on </span><span class="attrlink url author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i"><a class="attrlink" href="http://blog.learnhub.africa/" target="_blank" rel="noreferrer nofollow noopener" data-target-href="http://blog.learnhub.africa/"><u>Learnhub Blog</u></a></span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">; we write everything tech from </span><span class="attrlink url author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i"><a class="attrlink" href="https://blog.learnhub.africa/category/cloud-computing/" target="_blank" rel="noreferrer nofollow noopener" data-target-href="https://blog.learnhub.africa/category/cloud-computing/"><u>Cloud computing</u></a></span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i"> to </span><span class="attrlink url author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i"><a class="attrlink" href="https://blog.learnhub.africa/category/frontend/" target="_blank" rel="noreferrer nofollow noopener" data-target-href="https://blog.learnhub.africa/category/frontend/"><u>Frontend Dev</u></a></span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">, </span><span class="attrlink url author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i"><a class="attrlink" href="https://blog.learnhub.africa/category/security/" target="_blank" rel="noreferrer nofollow noopener" data-target-href="https://blog.learnhub.africa/category/security/"><u>Cybersecurity</u></a></span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">, </span><span class="attrlink url author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i"><a class="attrlink" href="https://blog.learnhub.africa/category/data-science/" target="_blank" rel="noreferrer nofollow noopener" data-target-href="https://blog.learnhub.africa/category/data-science/"><u>AI</u></a></span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">, and </span><span class="attrlink url author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i"><a class="attrlink" href="https://blog.learnhub.africa/category/blockchain/" target="_blank" rel="noreferrer nofollow noopener" data-target-href="https://blog.learnhub.africa/category/blockchain/"><u>Blockchain</u></a></span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">.</span></div>
<div>
<h4 data-usually-unique-id="479138036767759450832067"><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i">Resource</span></h4>
</div>
<ul class="listtype-bullet listindent1 list-bullet1">
 	<li><span class="attrlink url author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i"><a class="attrlink" href="https://www.codecademy.com/learn/learn-how-to-code?periods=year&amp;plan_id=proGoldAnnualV2&amp;utm_source=pepperjam&amp;utm_medium=affiliate&amp;utm_term=96525&amp;clickId=4438617034&amp;pj_creativeid=8-12462&amp;pj_publisherid=96525" target="_blank" rel="noreferrer nofollow noopener" data-target-href="https://www.codecademy.com/learn/learn-how-to-code?periods=year&amp;plan_id=proGoldAnnualV2&amp;utm_source=pepperjam&amp;utm_medium=affiliate&amp;utm_term=96525&amp;clickId=4438617034&amp;pj_creativeid=8-12462&amp;pj_publisherid=96525"><u>Getting Started with Programming</u></a></span></li>
 	<li><span class="attrlink url author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i"><a class="attrlink" href="https://blog.learnhub.africa/2023/06/08/4-javascript-email-frameworks-nodemailer-sendgrid-smtp-js-and-mailgun/" target="_blank" rel="noreferrer nofollow noopener" data-target-href="https://blog.learnhub.africa/2023/06/08/4-javascript-email-frameworks-nodemailer-sendgrid-smtp-js-and-mailgun/"><u>Javascript Email with Nodemailer</u></a></span></li>
 	<li><span class="attrlink url author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i"><a class="attrlink" href="https://blog.learnhub.africa/2023/01/18/how-to-send-an-email-in-node-js-using-nodemailer/" target="_blank" rel="noreferrer nofollow noopener" data-target-href="https://blog.learnhub.africa/2023/01/18/how-to-send-an-email-in-node-js-using-nodemailer/"><u>How to send an email in node.js using nodemailer</u></a></span></li>
 	<li><span class="attrlink url author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i"><a class="attrlink" href="https://www.w3schools.com/js/js_arrays.asp" target="_blank" rel="noreferrer nofollow noopener" data-target-href="https://www.w3schools.com/js/js_arrays.asp"><u>Javascript Array method</u></a></span></li>
 	<li><span class="attrlink url author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qowz80zsz71zp65nz74z73z81zz87zz122z2gz81zz84zz90zz81ztyz73zvd2jz83zpi3i"><a class="attrlink" href="https://blog.learnhub.africa/2023/05/09/20-best-javascript-frameworks-for-2023/" target="_blank" rel="noreferrer nofollow noopener" data-target-href="https://blog.learnhub.africa/2023/05/09/20-best-javascript-frameworks-for-2023/"><u>20 Best React JavaScript Frameworks For 2023</u></a></span></li>
</ul>