Server Side Rendering

When To Use SSR (Server Side Rendering)

Use server-side rendering when your docs need request-time behavior, such as Auth or other server-only data fetching:

SvelDocs already uses server load functions for the docs routes, so the main SSR change is your adapter and deployment target.

Configuration

The adapter is configured in svelte.config.js. The static adapter is the default, so replace it with the adapter that matches your host.

import adapter from '@sveltejs/adapter-auto';
import adapterStatic from '@sveltejs/adapter-static';
 
const config = {
	...
	kit: {
		adapter: adapterStatic({
			fallback: '404.html'
		}),
		adapter: adapter()
		...
	}
};

Common choices:

• @sveltejs/adapter-auto for platforms SvelteKit can detect automatically
• @sveltejs/adapter-node for your own Node server
• @sveltejs/adapter-vercel for Vercel
• @sveltejs/adapter-netlify for Netlify functions
• @sveltejs/adapter-cloudflare for Cloudflare

Auth

SvelDocs does not implement auth directly because auth implementation is opinionated. However, SvelDocs includes role-based access control hooks for docs when you run SSR.

1. 1

   Mark Tabs, Groups, Or Pages As Private

Use private on tabs, groups, or pages for the docNavigationConfig. private supports boolean | string | string[]. It is recommended to update the type Roles for type safety and auto complete.

import { defineDocNavigation } from './define-doc-navigation';
 
type Roles =  'member' | 'proMember';
 
const docNavigationConfig = defineDocNavigation<Roles>({
	tabs: [
		{
			title: 'Member Documentation',
			private: true, // only logged in users can access this tab
			groups: [
				{
					title: 'Every Logged in User',
					pages: 'auto' // pages inherit tab `private`
				},
				{
					title: 'Only Paid Members',
					private: ['member', 'proMember'], // only paid members can access this group (overrides tab `private`)
					pages: [
						{ title: 'Member Info' }, // page inherits group `private`
						{ title: 'Pro Member Info', private: 'proMember' } // only pro members can access this page (overrides group `private`)
					]
				}
			]
		}
	]
});
 
export default docNavigationConfig;

.ts

2. 2

   Add User Auth State To event.locals

Create (or update) src/hooks.server.ts and set a boolean or role on locals.

import type { Handle } from '@sveltejs/kit';
 
export const handle: Handle = async ({ event, resolve }) => {
	// Replace this with your real session lookup
	const session = await event.locals.auth?.();
 
	// false = unauthenticated, otherwise a role string
	event.locals.userRole = session?.user?.role ?? false;
 
	return resolve(event);
};

.ts

3. 3

   Update The Docs Route Server Functions

Update all docs server loaders/endpoints so they call canAccessDoc(...) with your locals value.

export const load: LayoutServerLoad = async ({ locals }) => {
	...
 
	const { navigation, searchGroups } = getDocLayoutData((doc) => canAccessDoc(locals.userRole, doc.private));
 
	...
};

.ts

export const load: PageServerLoad = async ({ locals, params }) => {
	...
 
	if (!canAccessDoc(locals.userRole, docData.private)) {
		throw error(404, 'Document not found');
	}
 
	...
};

.ts

export const GET: RequestHandler = async ({ locals, params }) => {
	...
 
	if (!canAccessDoc(locals.userRole, docData.private)) {
		throw error(404, 'Document not found');
	}
 
	...
};

.ts