{"id":51766,"date":"2023-03-07T10:32:58","date_gmt":"2023-03-07T10:32:58","guid":{"rendered":"https:\/\/www.bridge-global.com\/blog\/?p=51766"},"modified":"2023-03-08T06:06:15","modified_gmt":"2023-03-08T06:06:15","slug":"what-is-sveltekit-and-why-choose-it","status":"publish","type":"post","link":"https:\/\/www.bridge-global.com\/blog\/what-is-sveltekit-and-why-choose-it\/","title":{"rendered":"All About SvelteKit: A Versatile Rendering Framework"},"content":{"rendered":"<div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-737f6e18\" data-vce-do-apply=\"all el-737f6e18\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-edafb5dd\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-edafb5dd\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-edafb5dd\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-9bf22658\" data-vce-do-apply=\"all el-9bf22658\"><div><noscript><style>.vce-row-container .vcv-lozad {display: none}<\/style><\/noscript><\/div>\n<div>\n<p>As a web developer, especially in the JavaScript ecosystem, you're probably familiar with or even using rendering frameworks like Next or Nuxt. SvelteKit is a similar framework catered towards Svelte users.<\/p>\n<p>It hit a stable 1.0 last month and has generated quite the hype. I know what you're thinking, \"Oh god another JS framework! Why should I learn this?\" - well, let me try and convince you why Svelte\/Sveltekit provides one of the best developer experiences.<\/p>\n<h2>Why Svelte\/SvelteKit?<\/h2>\n<p>SvelteKit is basically used for creating web apps with Svelte. For those who are not really familiar with Svelte, it is, in a lot of ways similar, to like React or Vue. It can do almost all that React and Vue can do, but its approach has some fundamental differences.<\/p>\n<p><strong>No Virtual DOM: <\/strong>This is due to Svelte being a compiled UI framework and therefore does not do a DOM diffing at run-time. This also results in better performance on average. However, if you really care about performance there are other options out there (SolidJS is a notable one).<\/p>\n<p><strong>Lower Bundle Size:<\/strong> Since it's a compiler, Svelte can analyze the code at build-time and only ship the parts that are used. It even removes unused CSS from the build.<\/p>\n<p><strong>Built-in animations, stores, accessibility checks, etc.<\/strong>: In my humble opinion, the built-in animations library is criminally underutilized and underrated. These modules make it super easy to do basic transitions and animations. Other features like stores, accessibility warnings, easing functions, etc. make svelte a more out-of-the-box experience.<\/p>\n<p>Compiler-centric solutions like Svelte (or SolidJS), have a unique advantage in that they can provide as many features as the core team can possibly provide without negatively affecting the bundle sizes. Svelte leans heavily into this philosophy, improving developer experience, productivity, and overall fewer lines of code without taking away too much control from the developer.<\/p>\n<p>Coming to SvelteKit, as was said before, is the rendering framework for Svelte users. And like Nuxt or Next, it does server-side rendering on the first-page load improving SEO and on subsequent navigations, it functions like a single-page app. So how is it any different? Well, there are two notable philosophical differences between Kit and other rendering frameworks:<\/p>\n<p><strong>Uses the Platform:<\/strong> SvelteKit philosophy is to primarily use the standard HTML, CSS, and JS rather than introduce too many framework-specific things. This reduces cognitive load and also makes us better web devs in the long run. SvelteKit also encourages development patterns that help make the websites work even if JS is disabled by the end-user.<\/p>\n<p><strong>Serverless-first SvelteKit uses adapters to tune your build code to the platform you'd like to deploy to.<\/strong> Sveltekit officially supports a few adapters like Netlify, Vercel, Nodejs (for typical Nodejs servers), static (for SSG), and others. You can even write your own adapters.<\/p>\n<p>Enough theory. Let's see how everything works and dive right in.<\/p>\n<p>Note: All the code in this blog is available <a href=\"https:\/\/github.com\/jithusnair\/sveltekit-introduction\" target=\"_blank\" rel=\"nofollow noopener\">here<\/a>.<\/p>\n<\/div>\n<div><!--Start of Tawk.to Script (0.7.1)--> <!--End of Tawk.to Script (0.7.1)--><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-1e9780a1\" data-vce-do-apply=\"all el-1e9780a1\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-36f2c730\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-36f2c730\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-36f2c730\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-cee2d3c7\" data-vce-do-apply=\"all el-cee2d3c7\"><h3>Getting Started<\/h3>\n<p>Let's create a blog named <span style=\"font-family: 'courier new', courier, monospace;\">intro-to-sveltekit<\/span>. To create a SvelteKit app, the easiest way is to use<span style=\"font-family: 'courier new', courier, monospace;\"> npm create<\/span>. So let's run <span style=\"font-family: 'courier new', courier, monospace;\">npm create svelte@latest intro-to-sveltekit<\/span> in the terminal and select \"Skeleton Project\" with \"Typescript\", \"ESLint\" and \"Prettier\" formatting enabled. It also asks if we want to install some testing suite but we'll skip those for now.<\/p>\n<p>Once the project is created cd into<span style=\"font-family: 'courier new', courier, monospace;\"> intro-to-sveltekit<\/span> and run <span style=\"font-family: 'courier new', courier, monospace;\">npm install<\/span> and <span style=\"font-family: 'courier new', courier, monospace;\">npm run dev<\/span>. This will start a server on <span style=\"font-family: 'courier new', courier, monospace;\">localhost:5173<\/span> and if you go to that page in the browser you\u2019ll see a basic placeholder page. Let's take a quick look at the project structure.<\/p>\n<h3>Project structure<\/h3>\n<p>At this stage, our folder structure should look something like this:<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-08157f06\" data-vce-do-apply=\"all el-08157f06\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-a1a8ba89\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-a1a8ba89\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-a1a8ba89\"><div class=\"vce-single-image-container vce-single-image--align-left\"><div class=\"vce vce-single-image-wrapper\" id=\"el-f44b39ab\" data-vce-do-apply=\"all el-f44b39ab\"><figure><div class=\"vce-single-image-inner vce-single-image--absolute\" style=\"padding-bottom: 67.7451%; width: 1020px;\"><img loading=\"lazy\" decoding=\"async\" class=\"vce-single-image vcv-lozad\" data-src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2023\/03\/Project-structure-sveltekit-e1678183838952.jpg\" width=\"1020\" height=\"691\" src=\"\" data-img-src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2023\/03\/Project-structure-sveltekit-e1678183838952.jpg\" alt=\"Project structure-sveltekit\" title=\"Project structure-sveltekit\" \/><noscript>\n        <img loading=\"lazy\" decoding=\"async\" class=\"vce-single-image\" src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2023\/03\/Project-structure-sveltekit-e1678183838952.jpg\" width=\"1020\" height=\"691\" alt=\"Project structure-sveltekit\" title=\"Project structure-sveltekit\" \/>\n      <\/noscript><\/div><figcaption hidden=\"\"><\/figcaption><\/figure><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-57732bce\" data-vce-do-apply=\"all el-57732bce\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-3397be53\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-3397be53\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-3397be53\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-17df9116\" data-vce-do-apply=\"all el-17df9116\"><p>The src folder is the main folder of our project.<\/p>\n<ul>\n<li>The routes, as you can probably guess, mainly contain the pages and API routes. It can also include helper files and components but it is better to put those in an <span style=\"font-family: 'courier new', courier, monospace;\">src\/lib folder<\/span><\/li>\n<li>Sveltekit encourages the use of<span style=\"font-family: 'courier new', courier, monospace;\"> lib<\/span> folder (not shown in the above image) inside <span style=\"font-family: 'courier new', courier, monospace;\">src<\/span> folder (in other words <span style=\"font-family: 'courier new', courier, monospace;\">src\/lib<\/span>) to contain utilities and components. SvelteKit has provided an alias \"$lib\" for this lib folder out of the box to make the import statements shorter and easier.<\/li>\n<li><span style=\"font-family: 'courier new', courier, monospace;\">app.html<\/span> is our page template with some SvelteKit-specific placeholders.<\/li>\n<li><span style=\"font-family: 'courier new', courier, monospace;\">static<\/span> folder - static assets (images, favicons, etc.) go in here.<\/li>\n<\/ul>\n<p>There are other files and folders in svelteKit like <span style=\"font-family: 'courier new', courier, monospace;\">error.html, hooks.ts, src\/params<\/span> , etc. But for now, let's focus on routes.<\/p>\n<h3>Basics of routing<\/h3>\n<p>For our blog, we'll first need two pages - Home and Blog. For the home page, let's <span style=\"font-family: 'courier new', courier, monospace;\">edit routes\/+page.svelte<\/span> file:<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-174f2c4e\" data-vce-do-apply=\"all el-174f2c4e\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-c2b007bc\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-c2b007bc\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-c2b007bc\"><div class=\"vce-widgets-container\"><div class=\"vce vce-widgets-wrapper\" id=\"el-d6620938\" data-vce-do-apply=\"all el-d6620938\">\t\t\t<div class=\"textwidget\"><pre class=\"brush: css; html-script: true; light: true; title: ; notranslate\" title=\"\"> \n&lt;h1&gt; Blogs &lt;\/h1&gt;\n&lt;p&gt; Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, aut minus fugit nulla repellendus perferendis quam, odit quae blanditiis ratione, qui aliquam dignissimos aspernatur molestiae eaque nesciunt dolores autem magnam? &lt;\/p&gt;\n<\/pre>\n<\/div>\n\t\t<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-adb755fc\" data-vce-do-apply=\"all el-adb755fc\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-c0ba7a04\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-c0ba7a04\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-c0ba7a04\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-9e9d314c\" data-vce-do-apply=\"all el-9e9d314c\"><p>You might have noticed that the file names are a bit different. This is because Sveltekit enforces a few naming styles for our routes. To tell svelteKit that a file is a page, we use <span style=\"font-family: 'courier new', courier, monospace;\">+page.svelte<\/span>. In the above case, since the <span style=\"font-family: 'courier new', courier, monospace;\">+page.svelte<\/span> is inside blog folder, SvelteKit understands that <span style=\"font-family: 'courier new', courier, monospace;\">blog\/+page.svelte<\/span> is the file to be used to render \/the blog page.<\/p>\n<p>If we create files in routes that are not page-specific, SvelteKit will not generate routes for them. Meaning, if we create a file <span style=\"font-family: 'courier new', courier, monospace;\">routes\/blog\/some-component.svelte<\/span>. Sveltekit <strong>will not<\/strong> generate \/blog\/some-component page. However, this means we can place some of our components within routes. Usually, page-specific components are placed in route folders. If you need to reuse such components on more than one page, it is better to put them in \"$lib\" (src\/lib).<\/p>\n<p>There are other 'special files' - namely, <span style=\"font-family: 'courier new', courier, monospace;\">+layout.svelte, +layout.ts, +server.ts<\/span> etc. We'll look into a few of these in the coming sections.<\/p>\n<h3>Layouts<\/h3>\n<p>We have our pages, but now we need a way to navigate between them. One way is to include the <span style=\"font-family: 'courier new', courier, monospace;\">&lt;nav&gt;&lt;\/nav&gt;<\/span> mark-up in both of the pages we have. But that's certainly not a scalable solution. Instead, we can make use of a <span style=\"font-family: 'courier new', courier, monospace;\">+layout.svelte<\/span> file - let's create one.<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-058503d2\" data-vce-do-apply=\"all el-058503d2\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-e36fc8a8\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-e36fc8a8\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-e36fc8a8\"><div class=\"vce-widgets-container\"><div class=\"vce vce-widgets-wrapper\" id=\"el-e232f6a9\" data-vce-do-apply=\"all el-e232f6a9\">\t\t\t<div class=\"textwidget\"><pre class=\"brush: css; html-script: true; light: true; title: ; notranslate\" title=\"\"> \n&lt;!-- routes\/+layout.svelte --&gt;\n\n\n&lt;nav&gt; \n\t&lt;ul&gt; \n\t\t&lt;li&gt; \n\t\t\t&lt;a href=&quot;\/&quot;&gt;Home&lt;\/a&gt; \n\t\t&lt;\/li&gt; \n\t\t&lt;li&gt; \n\t\t\t&lt;a href=&quot;\/blogs&quot;&gt;Blogs&lt;\/a&gt; \n\t\t&lt;\/li&gt; \n\t&lt;\/ul&gt; \n&lt;\/nav&gt;\n\n\n&lt;!-- \n\tFor those unfamiliar with svelte - css in svelte files do not leak outside the component and works similar to vue&#039;s &quot;scoped&quot; attribute by default.\n--&gt;\n&lt;style&gt;\n\tnav { \n\t\tbackground-color: beige; \n\t} \n\t\n\tul { \n\t\tdisplay: flex; \n\t} \n\t\n\tli {\n\t\tlist-style: none; margin: 15px; \n\t} \n\t\n\ta { \n\t\ttext-decoration: none; color: black; \n\t} \n&lt;\/style&gt;\n<\/pre>\n<\/div>\n\t\t<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-f36e14c4\" data-vce-do-apply=\"all el-f36e14c4\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-7efe935a\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-7efe935a\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-7efe935a\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-589310e5\" data-vce-do-apply=\"all el-589310e5\"><p><span style=\"font-weight: 400;\">Our app should look something like this:<\/span><\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-e00699de\" data-vce-do-apply=\"all el-e00699de\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-9019b577\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-9019b577\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-9019b577\"><div class=\"vce-single-image-container vce-single-image--align-left\"><div class=\"vce vce-single-image-wrapper\" id=\"el-ca230d19\" data-vce-do-apply=\"all el-ca230d19\"><figure><div class=\"vce-single-image-inner vce-single-image--absolute\"><\/div><figcaption hidden=\"\"><\/figcaption><\/figure><\/div><\/div><div class=\"vce-single-image-container vce-single-image--align-center\"><div class=\"vce vce-single-image-wrapper\" id=\"el-c3e0f693\" data-vce-do-apply=\"all el-c3e0f693\"><figure><div class=\"vce-single-image-inner vce-single-image--absolute\" style=\"padding-bottom: 46.706%; width: 1017px;\"><img loading=\"lazy\" decoding=\"async\" class=\"vce-single-image vcv-lozad\" data-src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2023\/03\/Layouts-blogs-sveltekit-e1678183964778.jpg\" width=\"1017\" height=\"475\" src=\"\" data-img-src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2023\/03\/Layouts-blogs-sveltekit-e1678183964778.jpg\" alt=\"\" title=\"Layouts-blogs-sveltekit\" \/><noscript>\n        <img loading=\"lazy\" decoding=\"async\" class=\"vce-single-image\" src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2023\/03\/Layouts-blogs-sveltekit-e1678183964778.jpg\" width=\"1017\" height=\"475\" alt=\"\" title=\"Layouts-blogs-sveltekit\" \/>\n      <\/noscript><\/div><figcaption hidden=\"\"><\/figcaption><\/figure><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-faa592be\" data-vce-do-apply=\"all el-faa592be\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-69e23a28\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-69e23a28\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-69e23a28\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-9e479d8d\" data-vce-do-apply=\"all el-9e479d8d\"><p>With <span style=\"font-family: 'courier new', courier, monospace;\">+layout.svelte<\/span> our navigation header is always visible and clicking Home or Blog only replaces the rest of the markup. Anchor tags in SvelteKit by-default work similarly to<span style=\"font-family: 'courier new', courier, monospace;\"> &lt;router-link&gt;&lt;\/router-link&gt;<\/span> and don't do a full page reload. This behavior can also be changed using some <a href=\"https:\/\/kit.svelte.dev\/docs\/link-options\" target=\"_blank\" rel=\"noopener\">special attributes<\/a>.<\/p>\n<p>All routes inherit the layout markup by default and can also be nested - meaning, we can have another <span style=\"font-family: 'courier new', courier, monospace;\">routes\/blog\/+layout.svelte<\/span> with some other special markup and <span style=\"font-family: 'courier new', courier, monospace;\">routes\/blog\/*<\/span> pages will inherit both layouts' markup. The inheritance behavior can be <a href=\"https:\/\/kit.svelte.dev\/docs\/link-options\" target=\"_blank\" rel=\"nofollow noopener\">customized<\/a> of course.<\/p>\n<p>Keen-eyed amongst you might have noticed a <span style=\"font-family: 'courier new', courier, monospace;\">&lt;slot&gt;&lt;\/slot&gt;<\/span> tag in the above markup. This is a required tag in<span style=\"font-family: 'courier new', courier, monospace;\"> +layout.svelte<\/span> files. The slot tag is used to tell SvelteKit that the Home-page or Blog-page markup (in our case) should go above or below <span style=\"font-family: 'courier new', courier, monospace;\">&lt;nav&gt;&lt;\/nav&gt;<\/span> element. If we omit the slot SveletKit won't render the pages at all and will only show the layout markup.<\/p>\n<p>Now that we have the basic pages and navigation setup, let's replace the placeholder texts from the Blogs page with a list of blogs from the database.<\/p>\n<h3><strong>Loading Data<\/strong><\/h3>\n<p>For the database and data, for now, let's create an in-memory database of sorts using some mock-movie data.<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-9f624cbb\" data-vce-do-apply=\"all el-9f624cbb\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-04a003db\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-04a003db\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-04a003db\"><div class=\"vce-raw-html\"><div class=\"vce-raw-html-wrapper\" id=\"el-6b70177e\" data-vce-do-apply=\"all el-6b70177e\"><div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; light: true; title: ; notranslate\" title=\"\">\n\/\/ src\/lib\/database.ts\n\n\nexport interface Blog {\n  id: string;\n  title: string;\n  synopsis: string;\n}\n\n\nexport const posts = &#x5B;\n  {\n    id: &#039;d98c2457-eccd-4c1e-b389-77acf50cd26d&#039;,\n    title: &#039;Can Mr. Smith Get to Washington Anymore?&#039;,\n    synopsis: `&lt;p&gt;The film follows Jeff Smith from inside his campaign during his bid to win the Democratic primary for the House seat of Representative Dick Gephardt, who announced his retirement. Smith, a 29-year-old teacher with no political experience, decided to run for the seat against 10 other Democratic candidates including Russ Carnahan, a member of the Carnahan political family. He was instantly dismissed by pundits who saw him as a no-name candidate due to his lack of political expertise and the presence of a Carnahan in the race.&lt;\/p&gt;\n    &lt;p&gt;Smith&#039;s campaign begins to gain more support as he mobilizes a large grassroots political campaign. He earns the endorsement of Howard Dean at one of his speaking events, and his campaign cuts into Carnahan&#039;s initial 30-point lead. Smith, however, loses the campaign by fewer than 2,000 votes.&lt;\/p&gt;`\n  },\n  {\n    id: &#039;d98c2457-eccd-4c1e-b389-77acf50cd26d&#039;,\n    title: &#039;Affair in Trinidad&#039;,\n    synopsis: `&lt;p&gt;When nightclub performer Chris Emery (Rita Hayworth) discovers that her husband has been murdered, she resolves to help the police find his killer. Soon she is caught between two men -- her late husband&#039;s friend Max Fabian (Alexander Scourby) and her brother-in-law, Steve (Glenn Ford), who begins his own investigation into his sibling&#039;s death. As evidence begins to point to Max as the killer, Chris finds herself in an increasingly dangerous situation.&lt;\/p&gt;`\n  },\n  {\n    id: &#039;d98c2457-eccd-4c1e-b389-77acf50cd26d&#039;,\n    title: &#039;Where a Good Man Goes (Joi gin a long)&#039;,\n    synopsis: `&lt;p&gt;A former triad boss is just released from a Macau prison and ends up in a small inn runs by a simple and honest widow. He quickly goes back to his harsh and brutal lifestyle trying to regain his position of respect in the underworld treating everyone including the innkeeper like his servant. Though she is treated harshly, her inner strength and honesty start to work on the ex-con and when her business is threatened he tries to come to her rescue.&lt;\/p&gt;`\n  },\n  {\n    id: &#039;de627d98-864f-4a8d-81dc-11d3b2850bc9&#039;,\n    title: &#039;Basic Instinct&#039;,\n    synopsis: `&lt;p&gt;Dantes is imprisoned on the island prison of Chateau d&#039;If for 13 years, where he plots revenge against those who betrayed him. With help from another prisoner, he escapes the island and proceeds to transform himself into the wealthy Count of Monte Cristo as part of his plan to exact revenge.&lt;\/p&gt;`\n  }\n\n\n];\nWe now need to load this data on the blogs page. There are a few ways to do this, but for now, let&#039;s create a load function in routes\/blogs\/+page.server.ts.\n\/\/ routes\/blogs\/+page.server.ts\n\n\nimport { blogs } from &#039;$lib\/database&#039;;\n\n\nimport type { Blog } from &#039;$lib\/database&#039;;\nimport type { PageServerLoad } from &#039;.\/$types&#039;;\n\n\ntype BlogsData = Omit&lt;Blog, &#039;synopsis&#039;&gt;;\n\n\nexport const load: PageServerLoad = async () =&gt; {\n  \/\/ Let&#039;s pretend that this is a network call to a database\n  \/\/ that takes 2 seconds.\n  const aFakeNetworkCall: Promise&lt;BlogsData&#x5B;]&gt; = new Promise((resolve) =&gt; {\n    setTimeout(() =&gt; {\n      const mappedBlogData = blogs.map((blog) =&gt; {\n        return {\n          id: blog.id,\n          title: blog.title\n        } as BlogsData;\n      });\n      resolve(mappedBlogData);\n    }, 2000);\n\n\n  });\n  \n  return {\n    blogs: await aFakeNetworkCall\n  };\n};\n\n<\/pre><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-256b764e\" data-vce-do-apply=\"all el-256b764e\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-f7da42ad\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-f7da42ad\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-f7da42ad\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-3f6be993\" data-vce-do-apply=\"all el-3f6be993\"><p>Let's break down what's going on here. If a <span style=\"font-family: 'courier new', courier, monospace;\">+page.svelte<\/span> is accompanied by <span style=\"font-family: 'courier new', courier, monospace;\">+page.server.ts<\/span> which exports a load function, SvelteKit runs the function and awaits the result before it renders the page. In our case, we mimic a network call using a <span style=\"font-family: 'courier new', courier, monospace;\">setTimeout<\/span> function to demonstrate the 'awaiting' nature of page load. Once the promise is resolved we return the list of blog data with just their id and title.<br>A small note for typescript users - the <span style=\"font-family: 'courier new', courier, monospace;\">.\/$types<\/span> is just a syntactic sugar for a types module that is automatically generated by SvelteKit for each page and endpoint which we can use for type-safety.<\/p>\n<p>As mentioned above, there are other ways to load the data and one of them is <span style=\"font-family: 'courier new', courier, monospace;\">+page.ts.<\/span> The difference between this and <span style=\"font-family: 'courier new', courier, monospace;\">+page.server.ts<\/span> is that the load function in <span style=\"font-family: 'courier new', courier, monospace;\">+page.ts<\/span> runs on both client-side and server-side. But <span style=\"font-family: 'courier new', courier, monospace;\">+page.server.ts<\/span> runs the load function in the server only. So, if you have sensitive data-processing requirements, <span style=\"font-family: 'courier new', courier, monospace;\">+page.server.ts<\/span> is the best option to load the page-specific data.<\/p>\n<p>Let's now explore how to access this data we get from the load function in <span style=\"font-family: 'courier new', courier, monospace;\">blogs.svelte<\/span> and display it.<\/p>\n<h3>Display Page-Load Data<\/h3>\n<p>Let's modify our <span style=\"font-family: 'courier new', courier, monospace;\">blog.svelte<\/span> a bit:<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-0da0c3e4\" data-vce-do-apply=\"all el-0da0c3e4\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-8c611347\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-8c611347\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-8c611347\"><div class=\"vce-widgets-container\"><div class=\"vce vce-widgets-wrapper\" id=\"el-6a4367bc\" data-vce-do-apply=\"all el-6a4367bc\">\t\t\t<div class=\"textwidget\"><pre class=\"brush: css; html-script: true; light: true; title: ; notranslate\" title=\"\"> \n&lt;!-- routes\/blogs\/+page.svelte --&gt;\n\n\n&lt;script lang=&quot;ts&quot;&gt;\n  import type { PageServerData } from &#039;.\/$types&#039;;\n\n\n  export let data: PageServerData;\n&lt;\/script&gt;\n\n\n&lt;h1&gt;Blogs&lt;\/h1&gt;\n\n\n&lt;div class=&quot;container&quot;&gt;\n  {#each data.blogs as blog}\n    &lt;a href={`\/blogs\/${blog.id}`}&gt;\n      {blog.title}\n    &lt;\/a&gt;\n  {\/each}\n&lt;\/div&gt;\n\n\n&lt;style&gt;\n  .container {\n    display: flex;\n    flex-direction: column;\n    row-gap: 1rem;\n  }\n&lt;\/style&gt;\n<\/pre>\n<\/div>\n\t\t<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-ff36d196\" data-vce-do-apply=\"all el-ff36d196\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-6de40ae5\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-6de40ae5\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-6de40ae5\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-04529c76\" data-vce-do-apply=\"all el-04529c76\"><p>When we provide the data prop (<span style=\"font-family: 'courier new', courier, monospace;\">export let variable_name<\/span> is the syntax used by svelte to declare component props and in this case the pages are essentially svelte-components) for the page, svelte injects the load functions data (in our case, the blog data) to the<span style=\"font-family: 'courier new', courier, monospace;\"> data<\/span> prop. This data is then used in svelte's <span style=\"font-family: 'courier new', courier, monospace;\">{#each}{\/each}<\/span> syntax to loop and display the links to each of the blog pages.<\/p><p>As noted before, the types from \".\/$types\" automatically give us type-safety.<br>Our blog page should now look something like the below:<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-685ae27d\" data-vce-do-apply=\"all el-685ae27d\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-816644f4\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-816644f4\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-816644f4\"><div class=\"vce-single-image-container vce-single-image--align-left\"><div class=\"vce vce-single-image-wrapper\" id=\"el-970cb8c6\" data-vce-do-apply=\"all el-970cb8c6\"><figure><div class=\"vce-single-image-inner vce-single-image--absolute\" style=\"padding-bottom: 46.1622%; width: 925px;\"><img loading=\"lazy\" decoding=\"async\" class=\"vce-single-image vcv-lozad\" data-src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2023\/03\/Display-Page-Load-Data-bllog-page-sveltekit-e1678255428336.jpg\" width=\"925\" height=\"427\" src=\"\" data-img-src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2023\/03\/Display-Page-Load-Data-bllog-page-sveltekit-e1678255428336.jpg\" alt=\"\" title=\"Display Page Load Data- bllog page- sveltekit\" \/><noscript>\n        <img loading=\"lazy\" decoding=\"async\" class=\"vce-single-image\" src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2023\/03\/Display-Page-Load-Data-bllog-page-sveltekit-e1678255428336.jpg\" width=\"925\" height=\"427\" alt=\"\" title=\"Display Page Load Data- bllog page- sveltekit\" \/>\n      <\/noscript><\/div><figcaption hidden=\"\"><\/figcaption><\/figure><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-57113d55\" data-vce-do-apply=\"all el-57113d55\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-378a720a\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-378a720a\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-378a720a\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-2c3c8557\" data-vce-do-apply=\"all el-2c3c8557\"><div><noscript><style>.vce-row-container .vcv-lozad {display: none}<\/style><\/noscript><\/div>\n<div>\n<p><span style=\"font-weight: 400;\">If you try and navigate from the Home page to the Blogs page, you can see that the page will not be rendered until the load function returns data. You can increase the&nbsp;<\/span><span style=\"font-weight: 400; font-family: 'courier new', courier, monospace;\">setTimeout<\/span><span style=\"font-weight: 400;\"><span style=\"font-family: 'courier new', courier, monospace;\">&nbsp;<\/span>duration in the load function and observe this behavior clearly.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We have successfully rendered the blogs page dynamically. We now need to render each blog page. Let's do that next.<\/span><\/p>\n<h3><strong>Params and Blog Page<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">To render our blog page we need a REST-like&nbsp;<\/span><span style=\"font-weight: 400; font-family: 'courier new', courier, monospace;\">\/blogs\/:blog_id<\/span><span style=\"font-weight: 400;\">&nbsp;page. To do that in Sveltekit, we can create a file in&nbsp;<\/span><span style=\"font-family: 'courier new', courier, monospace;\"><span style=\"font-weight: 400;\">routes\/blogs\/[blogId]<\/span><span style=\"font-weight: 400;\">.<\/span><\/span><\/p>\n<\/div>\n<div><!--Start of Tawk.to Script (0.7.1)--> <!--End of Tawk.to Script (0.7.1)--><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-ac24705c\" data-vce-do-apply=\"all el-ac24705c\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-d746e29e\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-d746e29e\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-d746e29e\"><div class=\"vce-raw-html\"><div class=\"vce-raw-html-wrapper\" id=\"el-5714c03b\" data-vce-do-apply=\"all el-5714c03b\"><div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; light: true; title: ; notranslate\" title=\"\">\n\n&lt;!-- routes\/blogs\/&#x5B;blogId]\/+page.svelte --&gt;\n\n\n&lt;h1&gt; This is a blog-page &lt;\/h1&gt;\nWe can now click on one of the links on the \/blogs page and we should land on this page with the dummy text.\n\n\nOf course, the dummy text will not work for us and we need to load the blog data. We can repeat the process we did for the blogs page and use the load function to fetch the data. Let us create a +page.server.ts file.\n\n\n\/\/ routes\/blogs\/&#x5B;blogId]\/+page.server.ts\nimport { error } from &#039;@sveltejs\/kit&#039;;\nimport { blogs } from &#039;$lib\/database&#039;;\n\n\nimport type { Blog } from &#039;$lib\/database&#039;;\nimport type { PageServerLoad } from &#039;.\/$types&#039;;\n\n\nexport const load: PageServerLoad = async (event) =&gt; {\n  const { params } = event;\n  \/\/ Let&#039;s pretend that this is a network call to a database\n  \/\/ that takes 2 seconds.\n  const aFakeNetworkCall: Promise&lt;blog&gt; = new Promise((resolve, reject) =&gt; {\n    setTimeout(() =&gt; {\n      const blogData = blogs.find((blog) =&gt; params.blogId === blog.id);\n      if (blogData) resolve(blogData);\n      else reject(&quot;Not Found&quot;);\n    }, 2000);\n  });\n\n\n  try {\n    const blog = await aFakeNetworkCall;\n    return {\n      blog\n    };\n  } catch (loadError) {\n    if (loadError === &quot;Not Found&quot;) throw error(404, &quot;Not Found&quot;);\n    \n\t\tthrow error(500, &quot;Something went wrong. Please try again.&quot;);\n  }\n};\n\n\n<\/pre><\/div><\/blog><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-205023ef\" data-vce-do-apply=\"all el-205023ef\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-f60a15c8\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-f60a15c8\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-f60a15c8\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-ad044803\" data-vce-do-apply=\"all el-ad044803\"><p>This is similar to our <span style=\"font-family: 'courier new', courier, monospace;\">routes\/blogs\/+page.server.ts<\/span> except for some minor differences. Sveltekit provides a params object for our load function and we use it here to find our blog's id (in other words <span style=\"font-family: 'courier new', courier, monospace;\">params.blogId<\/span> gives us our<span style=\"font-family: 'courier new', courier, monospace;\"> [blogId])<\/span>.<\/p>\n<p>If the blog is not found in our database we throw a SvelteKit-specific-error. This error function is used to catch errors we expect. When such an error is thrown, Sveltekit goes up the route folders and renders the nearest <span style=\"font-family: 'courier new', courier, monospace;\">+error.svelte<\/span>. This is a special Sveltekit-route-file that's used to render such expected errors. We haven't created such a file in our app and in such cases, SvelteKit renders a default error page.<br>With our load function done, we now need to display the data in <span style=\"font-family: 'courier new', courier, monospace;\">[blogId]<\/span> page. Let's remove our dummy text in <span style=\"font-family: 'courier new', courier, monospace;\">[blogId]<\/span> page and use our load data just like we did for blogs-page:<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-a8d1507c\" data-vce-do-apply=\"all el-a8d1507c\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-dcfb7bf8\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-dcfb7bf8\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-dcfb7bf8\"><div class=\"vce-raw-html\"><div class=\"vce-raw-html-wrapper\" id=\"el-0a63bf34\" data-vce-do-apply=\"all el-0a63bf34\"><div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; light: true; title: ; notranslate\" title=\"\">\n\n&lt;!-- routes\/blogs\/&#x5B;blogId]\/+page.svelte --&gt;\n\n\n&lt;script lang=&quot;ts&quot;&gt;\n  import type { PageServerData } from &#039;.\/$types&#039;;\n  \n  export let data: PageServerData;\n&lt;\/script&gt;\n\n\n&lt;h1&gt;\n  {data.blog.title}\n&lt;\/h1&gt;\n\n\n&lt;!-- This is the svelte syntax to render the given data as HTML --&gt;\n{@html data.blog.synopsis}\n\n\n<\/pre><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-89a9224b\" data-vce-do-apply=\"all el-89a9224b\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-ef19f495\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-ef19f495\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-ef19f495\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-e74ac6da\" data-vce-do-apply=\"all el-e74ac6da\"><p>That's it!<br>Let's click on one of our blog links on the <span style=\"font-family: 'courier new', courier, monospace;\">\/blogs<\/span> page.<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-cabdaa87\" data-vce-do-apply=\"all el-cabdaa87\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-639e7661\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-639e7661\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-639e7661\"><div class=\"vce-single-image-container vce-single-image--align-left\"><div class=\"vce vce-single-image-wrapper\" id=\"el-d5e9408b\" data-vce-do-apply=\"all el-d5e9408b\"><figure><div class=\"vce-single-image-inner vce-single-image--absolute\"><\/div><figcaption hidden=\"\"><\/figcaption><\/figure><\/div><\/div><div class=\"vce-single-image-container vce-single-image--align-center\"><div class=\"vce vce-single-image-wrapper\" id=\"el-2d0bfce5\" data-vce-do-apply=\"all el-2d0bfce5\"><figure><div class=\"vce-single-image-inner vce-single-image--absolute vce-single-image--border-rounded\" style=\"padding-bottom: 44.4118%; width: 1020px;\"><img loading=\"lazy\" decoding=\"async\" class=\"vce-single-image vcv-lozad\" data-src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2023\/03\/Can-mr-smith-sveltekit-e1678184350123.jpg\" width=\"1020\" height=\"453\" src=\"\" data-img-src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2023\/03\/Can-mr-smith-sveltekit-e1678184350123.jpg\" alt=\"Can mr smith- sveltekit\" title=\"Can mr smith- sveltekit\" \/><noscript>\n        <img loading=\"lazy\" decoding=\"async\" class=\"vce-single-image\" src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2023\/03\/Can-mr-smith-sveltekit-e1678184350123.jpg\" width=\"1020\" height=\"453\" alt=\"Can mr smith- sveltekit\" title=\"Can mr smith- sveltekit\" \/>\n      <\/noscript><\/div><figcaption hidden=\"\"><\/figcaption><\/figure><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-5e10b2bc\" data-vce-do-apply=\"all el-5e10b2bc\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-076a362f\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-076a362f\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-076a362f\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-a29008fc\" data-vce-do-apply=\"all el-a29008fc\"><p><span style=\"font-weight: 400;\">It works! Now let's see what happens if we try a blog Id that doesn't exist - say&nbsp;<\/span><span style=\"font-family: 'courier new', courier, monospace;\"><span style=\"font-weight: 400;\">blogs\/123<\/span><span style=\"font-weight: 400;\">.<\/span><\/span><\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-49569759\" data-vce-do-apply=\"all el-49569759\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-b998d5bc\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-b998d5bc\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-b998d5bc\"><div class=\"vce-single-image-container vce-single-image--align-left\"><div class=\"vce vce-single-image-wrapper\" id=\"el-365a3411\" data-vce-do-apply=\"all el-365a3411\"><figure><div class=\"vce-single-image-inner vce-single-image--absolute\"><\/div><figcaption hidden=\"\"><\/figcaption><\/figure><\/div><\/div><div class=\"vce-single-image-container vce-single-image--align-center\"><div class=\"vce vce-single-image-wrapper\" id=\"el-a1027df1\" data-vce-do-apply=\"all el-a1027df1\"><figure><div class=\"vce-single-image-inner vce-single-image--absolute\" style=\"padding-bottom: 38.3789%; width: 1024px;\"><img loading=\"lazy\" decoding=\"async\" class=\"vce-single-image vcv-lozad\" data-src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2023\/03\/404-blog-sveltekit-e1678184435981.jpg\" width=\"1024\" height=\"393\" src=\"\" data-img-src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2023\/03\/404-blog-sveltekit-e1678184435981.jpg\" alt=\"404- blog- sveltekit\" title=\"404- blog- sveltekit\" \/><noscript>\n        <img loading=\"lazy\" decoding=\"async\" class=\"vce-single-image\" src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2023\/03\/404-blog-sveltekit-e1678184435981.jpg\" width=\"1024\" height=\"393\" alt=\"404- blog- sveltekit\" title=\"404- blog- sveltekit\" \/>\n      <\/noscript><\/div><figcaption hidden=\"\"><\/figcaption><\/figure><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-9ddf9436\" data-vce-do-apply=\"all el-9ddf9436\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-ea6ee56f\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-ea6ee56f\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-ea6ee56f\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-6e14ed42\" data-vce-do-apply=\"all el-6e14ed42\"><p>The above page is created by Sveltekit because we don't have a custom <span style=\"font-family: 'courier new', courier, monospace;\">+error.svelte<\/span> page.<\/p><h2>Conclusion<\/h2><p>We have successfully built a blog app in Sveltekit. We have only scratched the surface of what's possible though, but I hope I've been able to convince you how fun Svelte\/Sveltekit development can be.<\/p><p>If you'd like to go beyond this introduction and learn how to handle forms, per-user-state, errors, or other advanced topics, I'd recommend <a href=\"https:\/\/kit.svelte.dev\/docs\/introduction\" target=\"_blank\" rel=\"noopener\">SveltKit documentation<\/a> or their new<a href=\"https:\/\/learn.svelte.dev\/tutorial\/welcome-to-svelte\"> interactive tutorial<\/a> (the latter is a work-in-progress)<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>As a web developer, especially in the JavaScript ecosystem, you&#8217;re probably familiar with or even using rendering frameworks like Next or Nuxt. SvelteKit is a similar framework catered towards Svelte users. It hit a stable 1.0 last month and has &hellip;<!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":197,"featured_media":51792,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[426],"tags":[607,608,609,610],"class_list":["post-51766","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming","tag-svelte-and-sveltekit","tag-why-sveltekit","tag-sveltekit","tag-svelte"],"featured_image_src":"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2023\/03\/Why-Svelte-SvelteKit-beidge-global-blog.jpg","author_info":{"display_name":"Jithu nair","author_link":"https:\/\/www.bridge-global.com\/blog\/author\/jithu\/"},"_links":{"self":[{"href":"https:\/\/www.bridge-global.com\/blog\/wp-json\/wp\/v2\/posts\/51766","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bridge-global.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bridge-global.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bridge-global.com\/blog\/wp-json\/wp\/v2\/users\/197"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bridge-global.com\/blog\/wp-json\/wp\/v2\/comments?post=51766"}],"version-history":[{"count":76,"href":"https:\/\/www.bridge-global.com\/blog\/wp-json\/wp\/v2\/posts\/51766\/revisions"}],"predecessor-version":[{"id":51854,"href":"https:\/\/www.bridge-global.com\/blog\/wp-json\/wp\/v2\/posts\/51766\/revisions\/51854"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bridge-global.com\/blog\/wp-json\/wp\/v2\/media\/51792"}],"wp:attachment":[{"href":"https:\/\/www.bridge-global.com\/blog\/wp-json\/wp\/v2\/media?parent=51766"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bridge-global.com\/blog\/wp-json\/wp\/v2\/categories?post=51766"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bridge-global.com\/blog\/wp-json\/wp\/v2\/tags?post=51766"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}