{"id":3636,"date":"2023-10-27T06:42:12","date_gmt":"2023-10-27T06:42:12","guid":{"rendered":"https:\/\/www.qedge.co\/blog\/?p=3636"},"modified":"2024-08-19T01:13:36","modified_gmt":"2024-08-19T01:13:36","slug":"how-does-sitecore-jss-work","status":"publish","type":"post","link":"https:\/\/www.qedge.ai\/blog\/how-does-sitecore-jss-work.html","title":{"rendered":"How Does Sitecore Jss Work - A Complete Guide"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">How Does Sitecore JSS Work? A Detailed Look at the Capabilities and Benefits<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sitecore JSS is a SDK (software development kit) that provides a bridge between Sitecore and various JavaScript frameworks. It enables developers to use their framework of choice to build UI components that <a href=\"https:\/\/www.qedge.co\/blog\/sitecore-enterprise-content-management.html\" target=\"_blank\" rel=\"noreferrer noopener\">integrate seamlessly with Sitecore for content management<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-group alignwide\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-buttons alignwide is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-50 has-custom-font-size has-normal-font-size\"><a class=\"wp-block-button__link has-typology-bg-color has-electric-grass-gradient-background has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.qedge.co\/Contact\" target=\"_blank\" rel=\"noopener\">let's talk<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Some key things to know about JSS:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>It is a collection of npm packages that abstract away Sitecore complexities and make it simpler to develop apps.<\/li>\n\n\n\n<li>JSS apps can be built headlessly, without a Sitecore instance, using local sample data.<\/li>\n\n\n\n<li>Once ready, JSS apps can connect to Sitecore for dynamic, real content.<\/li>\n\n\n\n<li>The same app codebase can work across different JavaScript frameworks like React, Vue, Angular, etc.<\/li>\n\n\n\n<li>JSS apps support advanced Sitecore capabilities like <a href=\"https:\/\/www.qedge.co\/blog\/sitecore-personalization.html\" target=\"_blank\" rel=\"noreferrer noopener\">personalization<\/a>, testing, langauges, and Experience Editor integrations.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">In a nutshell, JSS provides a modern way for <a href=\"https:\/\/www.qedge.co\/blog\/sitecore-development-mistakes.html\" target=\"_blank\" rel=\"noreferrer noopener\">developers to harness the power of Sitecore <\/a>using the tools and frameworks they love. Content authors retain all the Sitecore authoring features they know.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"430\" src=\"https:\/\/www.qedge.co\/blog\/wp-content\/uploads\/2023\/07\/20230619-blog-03.jpg\" alt=\"Sitecore implementation partner\" class=\"wp-image-1065\"\/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">When Should You Use Sitecore JSS?<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Sitecore JSS<\/th><th>Ideal Use Cases<\/th><th>Not the Best Fit<\/th><\/tr><\/thead><tbody><tr><td>When to Use<\/td><td>\ud83c\udf1f Building SPA, PWA, or headless web apps with JavaScript frameworks<\/td><td>\u274c Need to support older browser versions with no JavaScript<\/td><\/tr><tr><td><\/td><td>\ud83c\udf1f Skilled team with JavaScript\/TypeScript development<\/td><td>\u274c Complex bespoke functionality dependent on Sitecore internals<\/td><\/tr><tr><td><\/td><td>\ud83c\udf1f Need for highly customizable UI without backend constraints<\/td><td>\u274c Desire for tight coupling between backend and frontend<\/td><\/tr><tr><td><\/td><td>\ud83c\udf1f Modernizing existing Sitecore implementation<\/td><td>\u274c Team lacks modern JavaScript\/web development skills<\/td><\/tr><tr><td><\/td><td>\ud83c\udf1f Content accessibility across multiple platforms<\/td><td><\/td><\/tr><tr><td><\/td><td>\ud83c\udf1f Incremental transition to headless architecture<\/td><td><\/td><\/tr><tr><td>Advantages<\/td><td>\u2714\ufe0f Enables building modern web apps using JavaScript frameworks<\/td><td>\u274c May not work for older browsers without JavaScript support<\/td><\/tr><tr><td><\/td><td>\u2714\ufe0f Offers a highly customizable UI without backend limitations<\/td><td>\u274c Complex custom functionality relying on Sitecore internals may not be feasible<\/td><\/tr><tr><td><\/td><td>\u2714\ufe0f Facilitates incremental migration towards headless architecture<\/td><td>\u274c Backend and frontend coupling is not as tightly integrated<\/td><\/tr><tr><td><\/td><td>\u2714\ufe0f Supports content accessibility across multiple platforms<\/td><td>\u274c Requires a skilled team with modern JavaScript\/web development expertise<\/td><\/tr><tr><td>Disadvantages<\/td><td>\u274c Limited compatibility with older browser versions<\/td><td>\u274c Compatibility issues with older browsers<\/td><\/tr><tr><td><\/td><td>\u274c Complex bespoke functionality may require workarounds<\/td><td>\u274c Complex functionality may require extensive modifications<\/td><\/tr><tr><td><\/td><td>\u274c Backend and frontend may not be as tightly coupled<\/td><td>\u274c Reduced integration between backend and frontend<\/td><\/tr><tr><td><\/td><td>\u274c Steeper learning curve for teams lacking JavaScript\/web development skills<\/td><td>\u274c Higher learning curve for teams without JavaScript\/web development expertise<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">As with any architectural decision, your specific needs and context will determine if JSS is a good solution. But in general, JSS opens up many possibilities that were not feasible for Sitecore before.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Embracing the Power of Headless Architecture<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Sitecore JSS opens up a world of possibilities by enabling a headless architecture. Imagine having the freedom to develop your frontend independently from the backend, using the latest JavaScript frameworks like React, Vue, or Angular. This decoupled approach empowers your frontend developers to craft immersive user interfaces without being tied to the complexities of Sitecore's infrastructure.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"1195\" src=\"https:\/\/www.qedge.co\/blog\/wp-content\/uploads\/2023\/10\/the-Power-of-Headless-Architecture.jpg\" alt=\"\" class=\"wp-image-7466\" srcset=\"https:\/\/www.qedge.ai\/blog\/wp-content\/uploads\/2023\/10\/the-Power-of-Headless-Architecture.jpg 800w, https:\/\/www.qedge.ai\/blog\/wp-content\/uploads\/2023\/10\/the-Power-of-Headless-Architecture-768x1147.jpg 768w, https:\/\/www.qedge.ai\/blog\/wp-content\/uploads\/2023\/10\/the-Power-of-Headless-Architecture-720x1076.jpg 720w, https:\/\/www.qedge.ai\/blog\/wp-content\/uploads\/2023\/10\/the-Power-of-Headless-Architecture-580x866.jpg 580w, https:\/\/www.qedge.ai\/blog\/wp-content\/uploads\/2023\/10\/the-Power-of-Headless-Architecture-320x478.jpg 320w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Implementing JSS for Maximum Value<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Hopefully this gives you a solid understanding of what Sitecore JSS is and how it enables headless architecture for Sitecore.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">But realizing the full benefits takes thoughtful design and implementation:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Choose your JavaScript framework wisely<\/strong> - Factor in skillset, performance needs, and platform targets<\/li>\n\n\n\n<li><strong>Plan your hosting infrastructure<\/strong> - Determine where frontend and backend will be hosted and required capabilities<\/li>\n\n\n\n<li><strong>Design reusable components<\/strong> - Modular component design is key to flexibility<\/li>\n\n\n\n<li><strong>Use code scaffolding<\/strong> - Rapidly generate boilerplate code with JSS CLI<\/li>\n\n\n\n<li><strong>Manage dependencies<\/strong> - Carefully evaluate third-party libraries for security, maintenance<\/li>\n\n\n\n<li><strong>Optimize performance<\/strong> - Use code splitting, caching, CDNs, and other techniques<\/li>\n\n\n\n<li><strong>Evolve gradually<\/strong>- Prioritize routes and features that will derive most value<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><em>For rapidly building a high-impact Sitecore JSS application tailored to your needs, QEdge Digital Solutions can help. With deep Sitecore and modern web development expertise, we make JSS work for you. <a href=\"https:\/\/www.qedgedigital.com\/contact\" target=\"_blank\" rel=\"noopener\">Contact us<\/a> for a free consultation!<\/em><\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.qedge.co\/Portfolio\/Lionsgate\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"808\" height=\"453\" data-id=\"1663\" src=\"https:\/\/www.qedge.co\/blog\/wp-content\/uploads\/2023\/08\/lionsgate.png\" alt=\"lionsgate qedge\" class=\"wp-image-1663\"\/><\/a><figcaption class=\"wp-element-caption\">official website of Lionsgate Entertainment World <\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.qedge.co\/Portfolio\/Ausgrid\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"808\" height=\"453\" data-id=\"1660\" src=\"https:\/\/www.qedge.co\/blog\/wp-content\/uploads\/2023\/08\/Ausgrid.png\" alt=\"qedge\" class=\"wp-image-1660\"\/><\/a><figcaption class=\"wp-element-caption\">Ausgrid Official Website<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.qedge.co\/Services\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"808\" height=\"454\" data-id=\"1661\" src=\"https:\/\/www.qedge.co\/blog\/wp-content\/uploads\/2023\/08\/Cortex.png\" alt=\"qedge\" class=\"wp-image-1661\"\/><\/a><figcaption class=\"wp-element-caption\">Sitecore Gold Partner<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.qedge.co\/Portfolio\/Cochlear\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"430\" data-id=\"588\" src=\"https:\/\/www.qedge.co\/blog\/wp-content\/uploads\/2023\/06\/a-brief-view-of-cochlear.jpg\" alt=\"a brief view of cochlear\" class=\"wp-image-588\"\/><\/a><figcaption class=\"wp-element-caption\">Developed Cochlear China website <\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.qedge.co\/Portfolio\/Lincoln-Electric\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"356\" height=\"240\" data-id=\"1740\" src=\"https:\/\/www.qedge.co\/blog\/wp-content\/uploads\/2023\/08\/Lincoln-Electric-Official-Website-IT-Services.jpg\" alt=\"\" class=\"wp-image-1740\"><\/a><figcaption class=\"wp-element-caption\">Lincoln Electric Official Website IT Services<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.qedge.co\/Portfolio\/United-Imaging\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"356\" height=\"240\" data-id=\"1732\" src=\"https:\/\/www.qedge.co\/blog\/wp-content\/uploads\/2023\/08\/united-imaging.jpg\" alt=\"\" class=\"wp-image-1732\"><\/a><figcaption class=\"wp-element-caption\">Built United Imaging global website <\/figcaption><\/figure>\n<\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.linkedin.com\/company\/33247506\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>QEdge\u2019s LinkedIn Page<\/strong><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Sitecore JSS opens up exciting new possibilities for developers by bridging Sitecore with modern JavaScript frameworks. It enables building fast, flexible headless experiences while retaining all the authoring capabilities content teams rely on.<\/p>\n\n\n\n<div class=\"wp-block-group alignwide\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-buttons alignwide is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-50 has-custom-font-size has-normal-font-size\"><a class=\"wp-block-button__link has-typology-bg-color has-electric-grass-gradient-background has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.qedge.co\/Contact\" target=\"_blank\" rel=\"noopener\">let's talk<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">However, maximizing the return from JSS requires thoughtful planning and implementation. The framework solves many problems, but smart design is still required to develop solutions tailored to your needs. By partnering with specialists like QEdge Digital Solutions, you can successfully adopt JSS to achieve your digital goals.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How Does Sitecore JSS Work? A Detailed Look at the Capabilities and Benefits Sitecore JSS is a SDK (software development kit) that provides a bridge between Sitecore and various JavaScript frameworks. It enables developers to use their framework of choice to build UI components that integrate seamlessly with Sitecore for content management. Some key things [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":3641,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-3636","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-insights"],"views":6245,"_links":{"self":[{"href":"https:\/\/www.qedge.ai\/blog\/wp-json\/wp\/v2\/posts\/3636","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.qedge.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.qedge.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.qedge.ai\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.qedge.ai\/blog\/wp-json\/wp\/v2\/comments?post=3636"}],"version-history":[{"count":7,"href":"https:\/\/www.qedge.ai\/blog\/wp-json\/wp\/v2\/posts\/3636\/revisions"}],"predecessor-version":[{"id":7470,"href":"https:\/\/www.qedge.ai\/blog\/wp-json\/wp\/v2\/posts\/3636\/revisions\/7470"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.qedge.ai\/blog\/wp-json\/wp\/v2\/media\/3641"}],"wp:attachment":[{"href":"https:\/\/www.qedge.ai\/blog\/wp-json\/wp\/v2\/media?parent=3636"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.qedge.ai\/blog\/wp-json\/wp\/v2\/categories?post=3636"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.qedge.ai\/blog\/wp-json\/wp\/v2\/tags?post=3636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}