{"id":306301,"date":"2021-07-22T20:00:00","date_gmt":"2021-07-22T17:00:00","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/how-to-generate-static-websites-with-react-cloudsavvy-it\/"},"modified":"2021-07-22T20:00:00","modified_gmt":"2021-07-22T17:00:00","slug":"how-to-generate-static-websites-with-react-cloudsavvy-it","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/how-to-generate-static-websites-with-react-cloudsavvy-it\/","title":{"rendered":"#How to Generate Static Websites with React \u2013 CloudSavvy IT"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a4200a7e122a\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a4200a7e122a\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-generate-static-websites-with-react-cloudsavvy-it\/#What_Is_a_Static_Site\" >What Is a Static Site?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-generate-static-websites-with-react-cloudsavvy-it\/#Using_React-Static\" >Using React-Static<\/a><\/li><\/ul><\/nav><\/div>\n<p><strong>&#8220;#How to Generate Static Websites with React \u2013 CloudSavvy IT&#8221;<\/strong><\/p>\n<div id=\"article-content-area\">\n<img loading=\"lazy\" decoding=\"async\" class=\"type:primaryImage alignnone size-full wp-image-3717\" srcset=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2020\/02\/bad7835f.png?width=398&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1 400w, https:\/\/www.cloudsavvyit.com\/p\/uploads\/2020\/02\/bad7835f.png?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1 1200w\" sizes=\"auto, 400w, 1200w\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2020\/02\/bad7835f.png?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"react logo\" width=\"700\" height=\"256\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/reactjs.org\/\">React<\/a> is often used to make dynamic web <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">app<\/a>s that respond to user input, but it\u2019s also quite useful for static sites. React sites can even be pregenerated during the build process to save on precious milliseconds during page load.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"What_Is_a_Static_Site\"><\/span>What Is a Static Site?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Static sites are HTML that is delivered to the user directly, rather than generating the page for each request. For example, this article you\u2019re reading was instead dynamically generated by WordPress talking to a database, which caused the PHP code to render out paragraphs of HTML.<\/p>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/reactjs.org\/\">React<\/a> is a popular framework used to make dynamic web apps. It splits HTML into component files using a format called JSX, and uses JavaScript to dynamically render pages.\u00a0It\u2019s very useful, but there\u2019s one problem\u2014the loading times are a lot longer than basic pages with no JavaScript. React works by loading a <code>bundle.js<\/code>\u00a0file on the client, which renders out the page, but this takes time. Page load times directly affect user experience, and on important sites like landing pages, every millisecond can directly affect revenue.<\/p>\n<p>To fix this, React has a couple of third-party tools for generating static sites. The basic idea is that rather than rendering on the client side, it renders on the dev\u2019s machine during the build process, thus saving on load times. You then take this static site\u2019s HTML, and serve it like a regular webpage.<\/p>\n<p>The question then is, why bother going through all this effort to use a fully fledged JavaScript framework like React, for a non-web app that isn\u2019t going to change? Well, even though the page isn\u2019t changing for every user\u2019s request, webpages don\u2019t usually stay the same over time. Most businesses will update their sites frequently, like whenever you release a new product, run a promotion, or just want to refresh things for a new look.<\/p>\n<p>The benefit React offers is a much easier code updates compared to not using a framework. If you\u2019re just making your site with HTML and CSS, you\u2019ll need to do more work to make small styling changes, and you\u2019ll need to do a lot of work to make large templating changes. With React, even if you use the same component multiple times, you simply just need to update the one component file, and it will apply the changes wherever you use it in your project.<\/p>\n<p>Of course, it isn\u2019t for everyone, as React requires a fair bit of JavaScript knowledge to use properly. Alternatively, if you\u2019re just looking to make a simple website that won\u2019t be a pain to update, you should look into a Content Management System (CMS) like <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.squarespace.com\/\">SquareSpace<\/a> or even <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/wordpress.org\/\">WordPress<\/a>.<\/p>\n<p>There are a couple competing \u201cReact Static\u201d frameworks out there, which often bring added functionality and added control that is useful for large production apps. <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.gatsbyjs.org\/\">Gatsby<\/a> is very popular, as is <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/nextjs.org\/\">Next.js<\/a>. For this guide, we\u2019ll be using <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/react-static\/react-static\"><code>react-static<\/code><\/a>, which just provides a simple and lightweight way to generate static sites, and is easy to use for beginners.<\/p>\n<p>A note before we begin: because the rendering all happens on the client side (unless you\u2019re using server-side rendering), React is <em>technically<\/em> \u201cstatic\u201d as far as your web server is concerned. The files that you host on your web server don\u2019t change in response to requests like PHP would. However, this is largely a technicality,\u00a0 because the pages are still rendered dynamically, just on the client.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"Using_React-Static\"><\/span>Using React-Static<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><code>react-static<\/code>\u00a0is pretty easy to use. First, you\u2019ll need to install <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/docs.npmjs.com\/downloading-and-installing-node-js-and-npm\">Node.JS and NPM<\/a> on your machine. <code>react-static<\/code>\u00a0is simply an NPM package, which you can install globally:<\/p>\n<pre>npm i -g react-static<\/pre>\n<p>Then, you can run the project creation tool:<\/p>\n<pre>react-static create<\/pre>\n<p>Give your project a name, and select which template to use. The \u201cbasic\u201d option is standard JS, but there is also a TypeScript variant, which plenty of people prefer over standard JavaScript for larger projects. If you\u2019re more familiar with statically typed languages, choose TypeScript, otherwise, select \u201cbasic.\u201d<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"imgchk9 alignnone wp-image-5650 size-full\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2020\/07\/a398801d.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"Name your project, select template.\" width=\"557\" height=\"182\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>This will take a second to install some NPM dependencies and set up the project. The main files are in <code>\/src\/<\/code>, with <code>index.jsx<\/code>\u00a0being the very root of the app, and <code>App.jsx<\/code>\u00a0being the primary router that controls which pages the user sees. In <code>\/dist\/<\/code>, you\u2019ll fine the output of the build (after you run it) that you\u2019ll put on your web server.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"imgchk9 alignnone wp-image-5651 size-full\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2020\/07\/1242250f.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\" Install NPM dependencies, set up project.\" width=\"507\" height=\"382\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>In <code>App.jsx<\/code>, you\u2019ll find the start of the rendering. The <code>Router<\/code>\u00a0component renders out each page in <code>\/src\/pages\/<\/code>, depending on the URL. The configuration for this is handled in <code>static.config.js<\/code>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"imgchk9 alignnone wp-image-5652 size-full\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2020\/07\/7207b144.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"Start of the rendering.\" width=\"668\" height=\"588\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>You can actually have dynamic routes in your application\u2014any route configured with the <code>&lt;Dynamic \/&gt;<\/code>\u00a0component will not be affected by the static renderer.<\/p>\n<p>To launch the app, you can start the development server:<\/p>\n<pre>npm run start<\/pre>\n<p>To run a build to deploy to your web server, do <code>run build<\/code>:<\/p>\n<pre>npm run build<\/pre>\n<p>The outputted files will be in <code>\/dist\/<\/code>. You\u2019ll, of course, find each HTML page to be rendered out in advance, with any dynamic pages still loading React binaries.\n<\/div>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.cloudsavvyit.com\/5418\/how-to-generate-static-websites-with-react\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#How to Generate Static Websites with React \u2013 CloudSavvy IT&#8221; React is often used to make dynamic web apps that respond to user input, but it\u2019s also quite useful for static sites. React sites can even be pregenerated during the build process to save on precious milliseconds during page load. What Is a Static Site?&#8230;<\/p>\n","protected":false},"author":1,"featured_media":306302,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2020\/02\/bad7835f.png","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-306301","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/306301","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=306301"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/306301\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/306302"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=306301"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=306301"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=306301"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}