SSR, CSR และ Prerendering

Next.js ให้ React developer ใช้ rendering mode สามแบบที่แยกกันชัดเจน — getServerSideProps (SSR), getStaticProps (SSG), และ client-only component — แต่ละแบบต้องการ API และโมเดลความคิดต่างกัน SvelteKit รวมทั้งสามแบบด้วย page options ชุดเล็ก ๆ: exported constant ที่คุณวางไว้ในไฟล์ +page.js หรือ +page.server.js ทุก page มีค่า default เป็น SSR; คุณ opt in ไปยัง mode อื่นด้วยโค้ดแค่หนึ่งหรือสองบรรทัด

รันตัวอย่างนี้ในโปรเจกต์ SvelteKit (npx sv create)

ตั้งค่า rendering mode

Next.js ใช้ export API ต่างกันตาม rendering mode SvelteKit ใช้ไฟล์เดียวกันแต่ export boolean ต่างกัน

React

// Next.js App Router — rendering config via segment options

// Force dynamic SSR (equivalent to getServerSideProps)
export const dynamic = 'force-dynamic';

// Force static generation (equivalent to getStaticProps)
export const dynamic = 'force-static';

// CSR-only: mark the component client-side
'use client';
// Then avoid any server data fetching

Svelte

// +page.js or +page.server.js

// Static prerendering — HTML built at build time (like getStaticProps)
export const prerender = true;

// Client-side only — no SSR, hydrated in the browser (like 'use client' + no server data)
export const ssr = false;

// Pure server HTML — no JavaScript sent to the browser at all
export const csr = false;

// Default: ssr=true, csr=true, prerender=false (full SSR + hydration)
// export const trailingSlash = 'never'; // 'always' | 'never' | 'ignore'

Options เหล่านี้ใส่ไว้ใน +page.js, +page.server.js, หรือแม้แต่ +layout.js เพื่อให้มีผลกับทั้งไดเรกทอรีของ route ก็ได้

Prerendering: static HTML ตอน build time

src/routes/about/+page.js

export const prerender = true;

// Optional: define which paths to prerender for dynamic routes
export function entries() {
  return [{ slug: 'hello' }, { slug: 'world' }];
}

เมื่อ prerender = true SvelteKit จะ render page เป็น HTML ตอน build time แล้ว serve เป็น static file — เทียบเท่ากับ getStaticProps / generateStaticParams ของ Next.js ใช้กับ page ที่เนื้อหาไม่เปลี่ยนต่อ request: marketing page, เอกสาร, blog post

CSR-only: client-side rendering เท่านั้น

src/routes/dashboard/+page.js

export const ssr = false;

ssr = false ข้าม server-side rendering ทั้งหมด page จะถูก serve เป็น empty shell แล้ว hydrate ใน browser — เหมือนกับ Create React App หรือ Vite SPA เป๊ะ ๆ ใช้กับ page ที่ต้องการ browser API ตอนโหลด หรือ section ที่อยู่หลัง authentication ทั้งหมดและไม่ได้ประโยชน์จาก SSR

ไม่มี JavaScript: pure server HTML

src/routes/simple-page/+page.js

export const csr = false;

csr = false บอก SvelteKit ไม่ต้องส่ง JavaScript bundle สำหรับ page นี้เลย HTML render บน server และไม่มี hydration เกิดขึ้น ใช้กับ page ข้อมูลล้วน ๆ ที่ไม่ต้องการ interactivity — page โหลดเร็วที่สุดเท่าที่จะเป็นไปได้

รวม options เข้าด้วยกัน

Options compose กันได้ +layout.js ตั้งค่า prerender = true ให้ทั้ง section ได้ และแต่ละ page override ได้:

src/routes/blog/+layout.js

export const prerender = true; // all blog routes prerendered by default

// src/routes/blog/[slug]/+page.js
// inherits prerender = true from layout — no override needed

// src/routes/blog/drafts/+page.js
export const prerender = false; // override: this page is SSR only
export const ssr = true;

คุณผสม mode ต่อ route ได้ทั่วทั้ง tree:

flowchart TB
  routes(["src/routes/"])
  routes --> rootLayout["+layout.js → ssr: true (default)"]
  routes --> rootPage["+page.svelte → SSR (home page)"]
  routes --> about["about/"]
  about --> aboutConfig["+page.js → prerender: true"]
  about --> aboutPage["+page.svelte → static (prerendered)"]
  routes --> dashboard["dashboard/"]
  dashboard --> dashConfig["+layout.js → ssr: false"]
  dashboard --> dashPage["+page.svelte → CSR only (protected page)"]

Mixing rendering modes per route

Adapters

SvelteKit สร้าง build output แบบ generic Adapters แปลง output นั้นให้เป็นรูปแบบที่ deployment target ของคุณต้องการ ตั้งค่า adapter ใน svelte.config.js:

svelte.config.js

import adapter from '@sveltejs/adapter-auto';

export default {
  kit: {
    adapter: adapter(),
  },
};

Adapter	Target	หมายเหตุ
@sveltejs/adapter-auto	Vercel, Netlify, Cloudflare	ตรวจจับ platform อัตโนมัติ — default ที่ดี
@sveltejs/adapter-node	Node.js server	สร้าง standalone Node server (node build)
@sveltejs/adapter-static	static host ใดก็ได้	Pure SSG — ทุก page ต้อง prerender ได้
@sveltejs/adapter-cloudflare	Cloudflare Workers/Pages	Edge runtime ใช้ Workers API
@sveltejs/adapter-vercel	Vercel	adapter เฉพาะ Vercel พร้อม config Edge Function

การเปลี่ยน deployment target คือการแก้โค้ดบรรทัดเดียวใน svelte.config.js — ไม่ต้องแก้โค้ด application เลย

ประเด็นสำคัญ

• SvelteKit มีค่า default เป็น SSR สำหรับทุก page — ไม่ต้อง opt-in
• prerender = true สร้าง static HTML ตอน build time เหมือน getStaticProps ของ Next.js
• ssr = false ทำให้ page เป็น client-side เท่านั้น เหมือน route แบบ CRA/Vite SPA
• csr = false ส่ง JavaScript ไปยัง browser ศูนย์ไบต์ — pure server HTML
• Options เหล่านี้ตั้งค่าได้ทั้งต่อ page หรือต่อ layout และ compose กันผ่าน layout tree
• Adapters แปลง build output ไปยัง deployment platform — สลับได้ใน svelte.config.js
• Partial prerendering ทำได้: บาง route prerender ได้ ขณะที่ route อื่นยังเป็น SSR ในแอปเดียวกัน

🔀 Next.js rendering modes → SvelteKit page options

• Next.js SSR ใช้ getServerSideProps (Pages Router) หรือ RSC กับ dynamic = 'force-dynamic' (App Router) SvelteKit SSR คือ default — ไม่ต้องตั้งค่าอะไร
• Next.js SSG ใช้ getStaticProps / generateStaticParams SvelteKit ใช้ export const prerender = true ใน +page.js
• Next.js CSR ทำได้ด้วยการเพิ่ม 'use client' และเลี่ยง server data SvelteKit ใช้ export const ssr = false
• Next.js ไม่มี equivalent ตรงกับ csr = false — การส่ง JS เป็นศูนย์ต้องใช้ third-party setup SvelteKit รองรับแบบ native
• การเปลี่ยน rendering mode ของ Next.js ต้องการ export API ต่างกันและบางครั้ง file convention ต่างกัน SvelteKit ใช้ไฟล์ +page.js เดียวกันพร้อม boolean override เล็ก ๆ
• ทั้งคู่รองรับ adapters/deployment target Next.js ผูกแน่นกับ Vercel; SvelteKit adapter-auto รองรับ Vercel, Netlify, และ Cloudflare พร้อม adapter อย่างเป็นทางการสำหรับ Node และ static hosting

Rendering mode เริ่มต้นของ SvelteKit page คืออะไร?

Client-side rendering (CSR เท่านั้น) Static prerendering (SSG) Server-side rendering (SSR) ไม่มี rendering — ต้อง opt in เอง

Page option ตัวไหนทำให้ SvelteKit สร้าง static HTML ตอน build time?

export const ssr = false export const prerender = true export const csr = false export const static = true

คุณต้องการ deploy ไปยัง Node.js server ควรใช้ adapter ตัวไหน?

@sveltejs/adapter-auto @sveltejs/adapter-static @sveltejs/adapter-node @sveltejs/adapter-cloudflare

Submit

Mark as complete