{"id":818,"date":"2018-06-02T05:54:22","date_gmt":"2018-06-02T05:54:22","guid":{"rendered":"http:\/\/blog.softgridcomputers.com\/?p=818"},"modified":"2020-10-05T12:52:24","modified_gmt":"2020-10-05T12:52:24","slug":"building-a-static-site-with-components-such-as-nunjucks","status":"publish","type":"post","link":"https:\/\/www.softgridcomputers.com\/blog\/building-a-static-site-with-components-such-as-nunjucks\/","title":{"rendered":"Building a Static Site with Components such as Nunjucks"},"content":{"rendered":"<p>Its surprising to see but nevertheless a very important development in <a href=\"https:\/\/www.softgridcomputers.com\/webdesign-development\/\"><strong>web development<\/strong><\/a>, to build websites with different components. Well, to understand this, you have to imagine a page and then another page and then yet another page. Building pages one by one can get quite tedious. Building a website with components essentially implies that you are building separate components, like a call-to-action form, a search form, as separate components and then just piecing them together with those components.<\/p>\n<p>Static websites are slowly becoming quite a rage and this is rightly so because they are easy to navigate and even easier to develop. There are several <strong>JavaScript frameworks<\/strong> that emphasize this movement quite ferociously and several of these static websites are being built using different JavaScript template engine, <strong>Nunjucks<\/strong> being a popular one.<\/p>\n<p>Let\u2019s look at it from the version of a Microsite. It doesn\u2019t require a sophisticated CMS that handles hundreds of different pages. It doesn\u2019t even require any Java framework for its interactivity. All it needs is a set of pages with the same layout. If you are looking at HTML as a solution, you\u2019re not going to find it there. The next natural choice would be <strong><a href=\"https:\/\/www.softgridcomputers.com\/php-development\/\">PHP<\/a><\/strong> language but static sites don\u2019t support PHP so Nunjucks comes to the rescue. When you are looking to create a layout, you are essentially looking at different elements of that layout including the header, footer.<\/p>\n<p>\u00a0<\/p>\n<p>The advantage of using Nunjucks is that it has been created to implement a complete lexer and parser which can then generate an AST along with a compiler, which allows it to compile to raw JavaScript. If you were to compare it to any other frameworks, it would be as fast as jinja2, only with a rendering time of a few milliseconds.<\/p>\n<p>If we were to continue comparing, Nunjucks also allows for client-side browser rendering, something which you won\u2019t be offered by jinja2. This allows you to pre-render complicated pages and factor in any changes in data by using the same templates that you have used for anything else.<\/p>\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.softgridcomputers.com\/contact\/\"><img loading=\"lazy\" decoding=\"async\" width=\"740\" height=\"140\" src=\"https:\/\/www.softgridcomputers.com\/blog\/wp-content\/uploads\/2020\/10\/softgrid-blog-Banner_3.png\" alt=\"\" class=\"wp-image-1205\" srcset=\"https:\/\/www.softgridcomputers.com\/blog\/wp-content\/uploads\/2020\/10\/softgrid-blog-Banner_3.png 740w, https:\/\/www.softgridcomputers.com\/blog\/wp-content\/uploads\/2020\/10\/softgrid-blog-Banner_3-300x57.png 300w\" sizes=\"auto, (max-width: 740px) 100vw, 740px\" \/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Its surprising to see but nevertheless a very important development in web development, to build websites with different components. Well, to understand this, you have to imagine a page and then another page and then yet another page. Building pages &hellip; <a href=\"https:\/\/www.softgridcomputers.com\/blog\/building-a-static-site-with-components-such-as-nunjucks\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":4,"featured_media":819,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-818","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/www.softgridcomputers.com\/blog\/wp-json\/wp\/v2\/posts\/818","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.softgridcomputers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.softgridcomputers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.softgridcomputers.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.softgridcomputers.com\/blog\/wp-json\/wp\/v2\/comments?post=818"}],"version-history":[{"count":1,"href":"https:\/\/www.softgridcomputers.com\/blog\/wp-json\/wp\/v2\/posts\/818\/revisions"}],"predecessor-version":[{"id":1210,"href":"https:\/\/www.softgridcomputers.com\/blog\/wp-json\/wp\/v2\/posts\/818\/revisions\/1210"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.softgridcomputers.com\/blog\/wp-json\/wp\/v2\/media\/819"}],"wp:attachment":[{"href":"https:\/\/www.softgridcomputers.com\/blog\/wp-json\/wp\/v2\/media?parent=818"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.softgridcomputers.com\/blog\/wp-json\/wp\/v2\/categories?post=818"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.softgridcomputers.com\/blog\/wp-json\/wp\/v2\/tags?post=818"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}