{"id":474616,"date":"2022-07-16T11:04:43","date_gmt":"2022-07-16T08:04:43","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/what-is-static-content-and-how-does-it-affect-your-website\/"},"modified":"2022-07-16T11:04:43","modified_gmt":"2022-07-16T08:04:43","slug":"what-is-static-content-and-how-does-it-affect-your-website","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/what-is-static-content-and-how-does-it-affect-your-website\/","title":{"rendered":"#What Is Static Content, and How Does it Affect Your Website?"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 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-6a2daebd2d7e3\" 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-6a2daebd2d7e3\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-static-content-and-how-does-it-affect-your-website\/#%E2%80%9CWhat_Is_Static_Content_and_How_Does_it_Affect_Your_Website%E2%80%9D\" >&#8220;What Is Static Content, and How Does it Affect Your Website?&#8221;<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-static-content-and-how-does-it-affect-your-website\/#Static_vs_Dynamic_Content\" >Static vs. Dynamic Content<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-static-content-and-how-does-it-affect-your-website\/#Benefits_of_Static_Content_Hosting\" >Benefits of Static Content Hosting<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h1><span class=\"ez-toc-section\" id=\"%E2%80%9CWhat_Is_Static_Content_and_How_Does_it_Affect_Your_Website%E2%80%9D\"><\/span>&#8220;What Is Static Content, and How Does it Affect Your Website?&#8221;<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<div>\n<!-- UNCACHED CONTENT --><\/p>\n<figure style=\"width: 1275px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"type:primaryImage wp-image-15861 size-full\" data-pagespeed-no-defer=\"\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/csit\/2022\/03\/0c99c69c.png?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"1275\" height=\"675\" data-crediturl=\"https:\/\/www.shutterstock.com\/image-vector\/web-hosting-concept-rack-servers-icons-690129778\" data-credittext=\"Shutterstock\/marketinggraphics\"\/><figcaption class=\"wp-caption-text\"><span class=\"type:primaryImage imagecredit\"><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.shutterstock.com\/image-vector\/web-hosting-concept-rack-servers-icons-690129778\">Shutterstock\/marketinggraphics<\/a><\/span><\/figcaption><\/figure>\n<p>You\u2019ve probably heard the term \u201cstatic content\u201d thrown around\u2014it <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>lies to certain types of websites and files, and depending on the type of website you\u2019re running, it can have a huge effect on how you\u2019re able to host that site.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"Static_vs_Dynamic_Content\"><\/span>Static vs. Dynamic Content<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u201cStatic content\u201d applies to files that don\u2019t change. They\u2019re stored as files on disk and served directly to the users of your website. For example, CSS stylesheets are static content; they can be hosted as a file download, and they\u2019re the same for each user.<\/p>\n<p>This doesn\u2019t mean static content can\u2019t offer interactive websites. JavaScript files are static content, and they don\u2019t execute any code until they reach a user\u2019s browser. Using JavaScript frameworks like <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/reactjs.org\/\">ReactJS<\/a>, you can have interactive web apps without any server-side processing. The files for React are just JavaScript bundle files, HTML, and CSS\u2014regular website things.<\/p>\n<p>Dynamic content, on the other hand, is created for each unique user. It\u2019s important to understand the distinction on\u00a0<em>where<\/em> this happens. Dynamic content is specifically created on the\u00a0<em>server side,<\/em>\u00a0usually by making a database request and updating the page before it is sent to the user. As far as the user knows, they\u2019re just getting a web page. The never see the database.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15859\" data-pagespeed-lazy-src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/csit\/2022\/03\/12c860a1.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"1067\" height=\"359\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/wordpress.com\/\">WordPress<\/a> is a famous example of dynamic content, and it\u2019s what you\u2019re reading this on right now. For each request for an article, WordPress will talk to a MySQL database and fetch the page info. That info might get cached for performance, but it\u2019s still dynamic content.<\/p>\n<p>The key takeaway is that this requires CPU processing on the web server. Websites using tools like PHP, Ruby on Rails, or Django all execute on the server.\u00a0Every request uses extra CPU power, and there must always be a server like this to handle talking to the database.<\/p>\n<p>On the other hand, you can have \u201cstatic content\u201d that achieves largely the same effect. In this example, the processing is done client-side.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15860\" data-pagespeed-lazy-src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/csit\/2022\/03\/4d1f5152.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"1140\" height=\"546\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>This can still be \u201cdynamic\u201d in the sense that it can respond to inputs, update pages and components, and serve interactive\u00a0web applications, but all processing is done by the user\u2019s browser.<\/p>\n<p><a href=\"https:\/\/buradabiliyorum.com\/en\/category\/general\/\" data-internallinksmanager029f6b8e52c=\"3\" title=\"General\" target=\"_blank\" rel=\"noopener\">General<\/a>ly, if you want to connect this to a database, you\u2019d want to set up an API\u2014a web server that responds to requests in a JSON format that the browser application can load. In that case, this API web server would be serving dynamic JSON content.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"Benefits_of_Static_Content_Hosting\"><\/span>Benefits of Static Content Hosting<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Traditionally, if you want to host a website, you\u2019ll need to set up a web server to process requests. However, if you\u2019re only serving static content, there isn\u2019t much your web server actually has to do. In fact, all you\u2019d be doing is setting up a service like NGINX to serve those static files over HTTPS.<\/p>\n<p>This is an easy task to do, and many cloud services offer solutions for hosting files without configuring your own servers. This can cut down on costs tremendously, leaving you to only pay for data. It\u2019s also very easy to scale up, since if you host on a platform like AWS, your website is never going to go down because of too much traffic.<\/p>\n<p>Static content can be hosted from cloud storage solutions like AWS\u2019s Simple Storage Service (S3). You simply upload the files to the storage bucket, configure it for hosting, and it\u2019s available from the internet.<\/p>\n<p><img decoding=\"async\" data-pagespeed-lazy-src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/csit\/2020\/01\/025314eb.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"bucket contents\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>While this is a simple setup, it\u2019s actually a decent enterprise-grade solution for hosting websites. If your website doesn\u2019t use dynamic content, you will want to prioritize using a solution like this instead of hosting your own web servers, especially if you\u2019re on a cloud provider like AWS.<\/p>\n<\/div>\n<p><script>\n setTimeout(function(){\n  !function(f,b,e,v,n,t,s)\n  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?\n  n.callMethod.apply(n,arguments):n.queue.push(arguments)};\n  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';\n  n.queue=[];t=b.createElement(e);t.async=!0;\n  t.src=v;s=b.getElementsByTagName(e)[0];\n  s.parentNode.insertBefore(t,s) } (window, document,'script',\n  'https:\/\/connect.facebook.net\/en_US\/fbevents.js');\n   fbq('init', '335401813750447');\n   fbq('track', 'PageView');\n  },3000);\n<\/script><\/p>\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.howtogeek.com\/devops\/what-is-static-content-and-how-does-it-affect-your-website\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;What Is Static Content, and How Does it Affect Your Website?&#8221; Shutterstock\/marketinggraphics You\u2019ve probably heard the term \u201cstatic content\u201d thrown around\u2014it applies to certain types of websites and files, and depending on the type of website you\u2019re running, it can have a huge effect on how you\u2019re able to host that site. Static vs. Dynamic&#8230;<\/p>\n","protected":false},"author":1,"featured_media":474617,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.howtogeek.com\/wp-content\/uploads\/csit\/2022\/03\/0c99c69c.png?height=200p&trim=2,2,2,2","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-474616","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\/474616","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=474616"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/474616\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/474617"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=474616"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=474616"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=474616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}