Overview

What is DSS Base Template?

The DSS Base Template is a Next.js application that acts as the frontend head for Visor Studio. It fetches content from Visor Studio via the DaaS (Data as a Service) API, resolves layouts and widgets from configuration, and renders the final HTML delivered to end users.

The template follows a config-driven rendering pattern:

A route resolves its page data and layout configuration from Visor.
The layout component renders its placeholder zones.
Each placeholder loops through and renders its assigned widgets.
Widget components are resolved dynamically by their collection name.
In draft/dev mode, client-side variants of widgets are loaded for live editing.

Project Structure

- layout.tsx
- page.tsx
- page.base.tsx
- page.ssr.tsx
- page.ssg.tsx
- page.isr.tsx

Rendering Modes

The template supports three rendering modes, switched via the NEXT_PUBLIC_BUILD_MODE environment variable and the scripts/switchPage.js script.

SSR

Server-Side Rendering (SSR) renders each page on every request. Content is always fresh — ideal for frequently updated content or personalised pages.

export const dynamic = "force-dynamic"
Page files: page.ssr.tsx, route.ssr.ts
Best for: live sites with frequently changing content

SSG

Static Site Generation (SSG) pre-renders all pages at build time. The output is a fully static site — fastest performance, but requires a rebuild to reflect content changes.

export const dynamic = "force-static"
export const revalidate = 1
Page files: page.ssg.tsx, route.ssg.ts
Best for: content-stable sites or full static deployments

ISR

Incremental Static Regeneration (ISR) combines static generation with periodic background revalidation. Pages are served statically but regenerated automatically at a set interval.

export const dynamic = "force-static"
export const revalidate = 60 (configurable)
Page files: page.isr.tsx, route.isr.ts
Best for: sites with moderate content update frequency that need performance without full rebuilds

Switching Modes

Run the prebuild script to switch modes before building:


# Set the mode in your environment
NEXT_PUBLIC_BUILD_MODE=ssg npm run build
 
# Or run the switch manually
npm run prebuild  # runs style generation + switchPage.js

scripts/switchPage.js copies the selected mode file (e.g. page.ssg.tsx) to the active entry (page.tsx) for every switchable route.

Always run npm run prebuild or ensure switchPage.js has been executed before npm run build. Building without switching will use whatever page.tsx currently exists.

Routing

Route	File	Purpose
`/` (home)	`app/page.tsx`	Resolves the home page (slug: `home`)
`/:slug/*`	`app/[...slug]/page.tsx`	Catch-all resolver for all other content pages

Both routes share a common page.base.tsx resolver that handles data fetching, layout resolution, and rendering — the mode-specific files (page.ssr.tsx, etc.) simply set the rendering strategy and delegate to page.base.tsx.

Data Sources

All page content, layout configuration, and site settings are fetched from Visor Studio’s DaaS (Data as a Service) API via lib/daas.ts. The DaaS client authenticates using a static bearer token and fetches data with a 15-second timeout and graceful fallback on connection errors.

The template connects to this API at runtime (SSR/ISR) or at build time (SSG) to retrieve:

Page content and widget parameters
Layout and placeholder configuration
Site settings and active theme

See Setup & Local Development for how to configure the DaaS endpoint and authentication token.