Sveltekit - Page Options

---

---

The Page Option chapter in SvelteKit provides a brief knowledge about various page options provided by Sveltekit that allow developers to control how their applications are rendered and behave. The SvelteKit provides options such as Server-side rendering, Client-side rendering, prerendering, and trailing slash handling.

Server Side Rendering

SvelteKit has the default ability to generate HTML on the server before sending it to the client which is called server-side rendering. Server-side rendering enhances the performance of applications and helps in search engine optimization.

Benefits Of SSR

Server-side rendering has the following key benefits:

• Manual HTML Reduction: It reduces the complexity of manually writing HTML Code.
• Improved SEO: Content is readily available for search engine indexing, enhancing visibility.
• Better Performance: It Reduces client-side processing, resulting in a smoother user experience.

Disabling SSR

To disable SSR for a specific layout, you can include the following line in your +layout.server.js file:

export const ssr = false;

Client Side Rendering

Client-side rendering (CSR) in SvelteKit is a method that makes web pages interactive by running JavaScript in the user's browser. This means that users can see updates and interact with the page without having to reload the entire page.

Benefits Of CSR

Client-side rendering has the following key benefits:

• Reduces Server load: Client-side rendering transfers some work to the clients device that reduces from the server.
• Saves Money: It reduces hosting costs for the server by only sending small amounts of HTML and static files.
• Quicker Responses: It allows users to see updates and get feedback almost instantly when they interact with the page, without needing to reload it.

Disabling CSR

To disable CSR for a specific layout, you can include the following line in your +layout.server.js file:

export const csr = false;

Prerendering

Prerendering in SvelteKit is a method where the HTML for a page is created in the build time. This helps developers provide static content quickly, which can improve performance and lessen the workload on the server.

Benefits of Prerendering

Prerendering has the following key benefits:

• Quick Loading: It provides static pages very fast, making the experience better for users.
• Reduces Server Load: It utilizes fewer server resources and reduces its load by delivering pre-made HTML.
• Better SEO: It helps search engines easily find and index the content because it is available as static HTML.

Disabling Prerendering

To disable prerendering for a specific layout, you can include the following line in your +layout.server.js file:

export const prerendering = false;

TrailingSlash

Trailing slash in SvelteKit are important for managing URLs, and they can affect how users experience the site and how well it performs in search engine rankings (SEO).

Benefits of trailingSlash

TrailingSlash has the following key benefits:

• Consistent URL Structure: It keeps the URL format same, so there is no confusion between /url and /url/.
• Improved Linking: It makes it easy to handle links and prevents navigation problems.

Customization Options

If you want to customize the behaviour of trailing slashes in your application by exporting the trailingSlash option in your route files:

• Always: For making trailing to be present always, you can set it as below:

export const trailingSlash = 'always';

Ignore: If you want to ignore trailing you can set it as shown below:

export const trailingSlash = 'ignore';

Never: The default setting is:

export const trailingSlash = 'never';