Prerender landing page in SPA mode

[pietz]

I host my Sveltekit project as a static app using adapter-static. Most of the project is an interactive web application that wouldn't benefit from SSR anyway and hosting a static app is more straight forward. The one exception is the landing page. It doesn't need SSR either but prerendering it would be great to reduce the initial load. It doesnt have any dynamic or user specific elements.

In want to prerender the landing page and treat all other pages as a CSR SPA. However, I fail to do so.

I set prerender=true and ssr=false in the root +layout.js. In the /app +layout.js i set prerender=false. The build fails because it cannot find the root page for prerender (?) but adding "/" to prerender entries in the svelte.config.js lets the build complete.

The problem is that the resulting index.html file is very clearly not prerendered. It looks just like before.

Can someone help me? Am I making a fundamental mistake?

Thanks

[geoffrich]

If you only want to prerender your landing page, then I suggest:

• ssr=false in your root +layout.js (disable SSR for the whole site)
• prerender=true and ssr=true in your root +page.js (corresponding to the landing page). This will only prerender (and SSR) the landing page. Note that you do need ssr enabled if you want the prerendered page to contain the page's HTML - without enabling SSR, prerendering the page will output an empty shell.

In SvelteKit terms, prerender only controls whether an HTML file is created for the page at build time. You also need to enable ssr if you want that HTML file to contain the +page.svelte's corresponding HTML. Since the page is prerendered, ssr means the server-side rendering of the page happens at build time, not request time.

[ChandanMahapatra]

Hi Geoff, just wanted to say thanks for your comment above. Luckily I came across your comment but I feel like this kind of information should be clearer in the docs (or maybe I am missing something)

[eltigerchino]

Official documentation: https://svelte.dev/docs/kit/page-options

If you set ssr to false, it renders an empty ‘shell’ page instead.

If you add export const ssr = false to your root +layout.js, your entire app will only be rendered on the client — which essentially means you turn your app into an SPA.

https://svelte.dev/docs/kit/page-options#ssr