{"id":305,"date":"2026-03-10T14:59:50","date_gmt":"2026-03-10T13:59:50","guid":{"rendered":"https:\/\/craftcode.be\/svelte-vs-sveltekit\/"},"modified":"2026-06-08T12:55:39","modified_gmt":"2026-06-08T10:55:39","slug":"svelte-vs-sveltekit","status":"publish","type":"post","link":"https:\/\/craftcode.be\/nl\/svelte-vs-sveltekit\/","title":{"rendered":"Svelte VS Sveltekit"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"block-eaec04b6-e7e2-4a9a-96e0-3510abc15445\"><strong>SVELTE<\/strong><\/h2>\n\n<p class=\"wp-block-paragraph\"><strong><a href=\"https:\/\/svelte.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">Svelte<\/a><\/strong> (versie 3) is een <strong>component framework<\/strong> dat vergelijkbaar is met Vue.js of React.<br\/> <br\/>Wat Svelte onderscheidt van veel andere frameworks<a href=\"https:\/\/craftcode.be\/svelte-vs-sveltekit-2\/#exception\">[1]<\/a>, is dat de verwerking al tijdens de buildfase gebeurt in plaats van tijdens runtime. Daardoor werkt Svelte eigenlijk meer als een compiler dan als een klassiek framework.<br\/> <br\/>Tijdens het buildproces wordt Svelte-code omgezet naar sterk geoptimaliseerde vanilla JavaScript, zonder dat een grote runtime library meegeleverd moet worden.<br\/>Svelte is ontworpen om <strong>componenten<\/strong> te bouwen, maar kan evengoed gebruikt worden om volledige applicaties op te zetten.   <\/p>\n\n<h4 class=\"wp-block-heading\" id=\"block-e222861a-9977-4f8c-9396-335c6b0ceaf2\">De belangrijkste troeven van Svelte zijn:<\/h4>\n\n<ul id=\"block-3bafc7e2-2562-4945-8b8b-4ec0ffda4694\" class=\"wp-block-list\">\n<li>reactiviteit,<\/li>\n\n\n\n<li>componenten zonder overbodige boilerplate,<\/li>\n\n\n\n<li>kleine bundle sizes,<\/li>\n\n\n\n<li>en eenvoudige state management.<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\" id=\"block-4e625f17-41ea-4711-905b-8090ac84a1fc\"><strong>SVELTEKIT<\/strong><\/h2>\n\n<p class=\"wp-block-paragraph\" id=\"block-349eefa2-b5ff-467d-8bea-42835a34caf0\"><a href=\"https:\/\/kit.svelte.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">SvelteKit<\/a> (op het moment van schrijven nog in public beta) is een <strong>application framework<\/strong> dat eerder te vergelijken valt met Angular.<br\/> <br\/>Het maakt het bouwen van <strong>applicaties<\/strong> met Svelte een stuk eenvoudiger, omdat veel functionaliteiten standaard voorzien zijn. Je kan SvelteKit eigenlijk zien als:<br\/> <br\/>Svelte + handige ingebouwde features en dependencies <\/p>\n\n<p class=\"wp-block-paragraph\" id=\"block-5fbb3eb9-ea00-46de-b060-3dc0082d2983\">The provided file-based <em>router<\/em> is probably one of its biggest assets because that is a feature that most applications need in order to provide navigation. In \u201cplain\u201d Svelte you would need to include an external router<strong><a href=\"https:\/\/craftcode.be\/svelte-vs-sveltekit-2\/#exception\">[2]<\/a><\/strong>. <\/p>\n\n<p class=\"wp-block-paragraph\" id=\"block-ef4efd7e-b823-40c7-8c42-89f709159a24\"><em>Adapters<\/em> are also a big feature in SvelteKit. They allow you to \u201ctransform\u201d the compiled Svelte code into something platform specific. You could add a \u2018node adapter\u2019 to run your code on a NodeJS server or just run it completely on the client side by using the \u2018static adapter\u2019 which allows you to deploy the \u201cadapted code\u201d on a Nginx, Apache (HTTP server) \u2026.  <\/p>\n\n<p class=\"wp-block-paragraph\" id=\"block-7af0df3f-8e2a-47af-84d2-45fd2a9bb060\">It offers more features like Layouts and Endpoints, which you can checkout in the <a href=\"https:\/\/kit.svelte.dev\/docs\" target=\"_blank\" rel=\"noreferrer noopener\">documentation<\/a>.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"block-d7ae2202-c368-4600-afa5-a42dbcd00c82\"><strong>SAPPER<\/strong><\/h2>\n\n<p class=\"wp-block-paragraph\" id=\"block-7dfbb32b-d47d-4d66-b6c7-cf414e96e0f2\">Hoe past <a href=\"https:\/\/sapper.svelte.dev\/\" target=\"_blank\" rel=\"noopener\">Sapper<\/a> in dit verhaal?<br\/><br\/>Kort samengevat: <a href=\"https:\/\/sapper.svelte.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">Sapper <\/a>is de voorganger van SvelteKit en heeft nooit een offici\u00eble versie 1-release gekregen.<br\/><br\/>Dit staat momenteel op de offici\u00eble documentatiepagina van Sapper:  <\/p>\n\n<ul class=\"wp-block-list\">\n<li>\u201cSapper\u2019s successor, <a href=\"https:\/\/kit.svelte.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">SvelteKit<\/a>, is currently available for use. All development efforts moving forward will be focused on <a href=\"https:\/\/kit.svelte.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">SvelteKit<\/a>.\u201d <\/li>\n\n\n\n<li>Loop je ergens vast? Vraag gerust hulp in de <a href=\"https:\/\/svelte.dev\/chat\" target=\"_blank\" rel=\"noreferrer noopener\">Discord-chat<\/a>. Raadpleeg ook de <a href=\"https:\/\/sapper.svelte.dev\/migrating\" target=\"_blank\" rel=\"noreferrer noopener\">migratiehandleidingen<\/a> voor ondersteuning bij het upgraden van oudere versies. <\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">Wie vandaag met Svelte start, investeert dus best meteen in SvelteKit in plaats van tijd te steken in Sapper, aangezien dat framework waarschijnlijk geleidelijk zal verdwijnen.<\/p>\n\n<p class=\"wp-block-paragraph\" id=\"exception\"><strong>[1]: Andere frameworks en toolkits gebruiken een gelijkaardige aanpak.<\/strong><br\/><strong>[2]: Er bestaan uitstekende open-source routers voor Svelte.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ben je hier terechtgekomen om het verschil te ontdekken tussen Svelte (versie 3) en SvelteKit (op het moment van schrijven nog in public beta)? Dan zit je goed.<\/p>\n<p>In deze blog bekijken we kort de verschillen tussen beide frameworks en hoe Sapper daarin past. We gaan niet te diep in detail en vergelijken ze ook niet met andere frameworks.  <\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[55],"tags":[58,56],"class_list":["post-305","post","type-post","status-publish","format-standard","hentry","category-blog","tag-front-end","tag-technologie"],"acf":[],"_links":{"self":[{"href":"https:\/\/craftcode.be\/nl\/wp-json\/wp\/v2\/posts\/305","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/craftcode.be\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/craftcode.be\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/craftcode.be\/nl\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/craftcode.be\/nl\/wp-json\/wp\/v2\/comments?post=305"}],"version-history":[{"count":1,"href":"https:\/\/craftcode.be\/nl\/wp-json\/wp\/v2\/posts\/305\/revisions"}],"predecessor-version":[{"id":306,"href":"https:\/\/craftcode.be\/nl\/wp-json\/wp\/v2\/posts\/305\/revisions\/306"}],"wp:attachment":[{"href":"https:\/\/craftcode.be\/nl\/wp-json\/wp\/v2\/media?parent=305"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/craftcode.be\/nl\/wp-json\/wp\/v2\/categories?post=305"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/craftcode.be\/nl\/wp-json\/wp\/v2\/tags?post=305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}