This chapter covers:
- Reasons to use Sapper
- Creating a new Sapper app
- Redeveloping the shopping application with Sapper
As we learned in chapter 1, Sapper (sapper.svelte.dev/) is a framework built on top of Svelte. It is used to create more advanced web applications that take advantage of one or more of the features summarized below.
Sapper provides page routing which associates URLs with the “pages” in an app and defines how navigation between pages is described in markup. Having a unique URL for each page allows them to be bookmarked so users can begin subsequent sessions on different pages.
Sapper supports page layouts which define a common layout for sets of pages within an app. This can include common areas of a page such as headers, footers, and navigation.
Sapper provides server-side rendering (SSR) which allows generation of HTML for pages to occur on the server instead of in the browser. This can provide a better user experience for rendering the initial page. This is because it is typically faster to generate this HTML on the server rather than downloading the JavaScript required to render it in the browser and then doing so. JavaScript for rendering subsequent pages can then be downloaded in the background before the user navigates away from the initial page.