Day 4: Server-Side Rendering | Svelte in 5 Days

SSR vs SSG vs CSR

SSR (Server-Side Rendering): HTML generated on each request. Fresh data every time. Good for personalized or frequently updated content.

SSG (Static Site Generation): HTML generated at build time. Blazing fast. Good for content that rarely changes — docs, blogs, marketing pages.

CSR (Client-Side Rendering): HTML built in the browser after JavaScript loads. Slower initial paint, no SEO. Good for dashboards behind login.

+page.js — Choose your rendering mode

// Default: SSR (runs on server per request)
export async function load({ fetch }) { ... }

// Static: SSG (pre-rendered at build time)
export const prerender = true;

// Client-only: CSR (skip server entirely)
export const ssr = false;

Form Actions

SvelteKit form actions let you handle form submissions on the server — no JavaScript required. They work even with JS disabled.

src/routes/contact/+page.server.js

import { fail, redirect } from '@sveltejs/kit';

export const actions = {
  default: async ({ request }) => {
    const data = await request.formData();
    const name = data.get('name');
    const email = data.get('email');

    if (!name || !email) {
      return fail(400, { name, email, missing: true });
    }

    // Save to DB, send email, etc.
    await saveContact({ name, email });

    throw redirect(303, '/contact/thanks');
  }
};

src/routes/contact/+page.svelte




  {#if form?.missing}All fields required.{/if}

ℹ️

Form actions are progressive enhancement at its best. The form works without JavaScript (plain HTML POST). When JS is available, SvelteKit intercepts the submission and handles it without a page reload.

📝 Day 4 Exercise

Build an SSR Blog with a Contact Form

Set export const prerender = true on your blog listing page. Run npm run build and confirm it generates static HTML.
Add a /contact route with a form action that validates name and email server-side.
Show validation errors back in the form using the form prop.
On success, redirect to a /contact/thanks page.
Use the SvelteKit $app/environment store to show different content in dev vs prod.

Day 4 Summary

prerender = true generates static HTML at build time — zero server needed at runtime.
ssr = false skips server rendering — use for dashboards with user-specific data.
Form actions in +page.server.js handle submissions on the server, working without JavaScript.
fail(status, data) returns validation errors back to the form. redirect() sends the user elsewhere.

→

← Previous

Day 3: SvelteKit Routing

Day 5: Deploy to Production

→