Overview

The view package provides server-side HTML rendering using Go’s built-in html/template engine. It adds a thin layer on top for layout support, custom functions, and development-friendly features like hot reloading.

What is Server-Side Rendering?

When a user visits your website, the server generates the complete HTML page and sends it to their browser. This is called server-side rendering (SSR).

User Request       Server              Browser
    |                |                    |
    |  GET /users    |                    |
    |--------------->|                    |
    |                |                    |
    |                | 1. Fetch data      |
    |                | 2. Render template |
    |                | 3. Return HTML     |
    |                |                    |
    |   <html>...    |                    |
    |<---------------|                    |
    |                |                    |
    |                |    Display page    |
    |                |------------------->|

Benefits of SSR:

Fast initial page load (browser displays content immediately)
SEO-friendly (search engines can read your content)
Works without JavaScript
Simple mental model (one language, one place)

What the View Package Provides

Feature	Description
Template Engine	Wraps Go’s `html/template` with convenience methods
Layouts	Wrap page content in a consistent structure
Custom Functions	Add your own template helpers
Hot Reload	Templates reload automatically during development
Embedded Files	Bundle templates in your binary for production

How It Works

The view package follows a simple flow:

                     Engine
┌─────────────────────────────────────────────────────────┐
|                                                         |
|  Config         Templates            Output             |
|  ┌─────────┐    ┌─────────────┐     ┌─────────────┐    |
|  | Dir     |    | pages/      |     |             |    |
|  | FS      |--->| layouts/    |---->| <html>...   |    |
|  | Funcs   |    |             |     |             |    |
|  | Layout  |    └─────────────┘     └─────────────┘    |
|  └─────────┘                                           |
|                                                         |
└─────────────────────────────────────────────────────────┘

Configure - Tell the engine where templates are and how to process them
Load - Engine parses and caches your template files
Render - Pass data to a template, get HTML back

Directory Structure

The view package expects templates organized in subdirectories:

views/
├── layouts/
│   └── default.html    # Layout templates
└── pages/
    ├── home.html       # Page templates
    └── about.html

layouts/ - Templates that wrap around page content (HTML shell, navigation, footer)
pages/ - Individual page templates that define content

Quick Example

Here’s a minimal example showing the view package in action: Directory structure:

myapp/
├── main.go
└── views/
    ├── layouts/
    │   └── default.html
    └── pages/
        └── home.html

views/layouts/default.html:

<!DOCTYPE html>
<html>
<head>
    <title>{{.Data.Title}}</title>
</head>
<body>
    {{.Content}}
</body>
</html>

views/pages/home.html:

<h1>Welcome, {{.Data.Name}}!</h1>
<p>You have {{.Data.Count}} messages.</p>

main.go:

package main

import (
    "github.com/go-mizu/mizu"
    "github.com/go-mizu/mizu/view"
)

func main() {
    // Create the template engine
    engine := view.New(view.Config{
        Dir:         "./views",
        Development: true,
    })

    // Create the app
    app := mizu.New()

    // Add engine to app (makes it available in handlers)
    app.Use(engine.Middleware())

    // Define a route
    app.Get("/", func(c *mizu.Ctx) error {
        return view.Render(c, "home", view.Data{
            "Title": "My App",
            "Name":  "Alice",
            "Count": 5,
        })
    })

    app.Listen(":8080")
}

When you visit http://localhost:8080, you’ll see:

<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
</head>
<body>
    <h1>Welcome, Alice!</h1>
    <p>You have 5 messages.</p>
</body>
</html>

Template Data

When you render a template, your data is wrapped in a structure that provides additional context:

// What you pass:
view.Render(c, "home", view.Data{
    "Title": "My App",
    "User":  currentUser,
})

// What templates receive:
// .Page.Name   - Template name ("home")
// .Page.Layout - Layout name ("default")
// .Data        - Your data (access .Data.Title, .Data.User)
// .Content     - Rendered page content (only in layouts)

In page templates:

<h1>{{.Data.Title}}</h1>
<p>Welcome, {{.Data.User.Name}}</p>

In layout templates:

<head>
    <title>{{.Data.Title}}</title>
</head>
<body>
    {{.Content}}  <!-- Rendered page content goes here -->
</body>

When to Use View

Use the view package when:

Building traditional server-rendered websites
Creating admin dashboards
Building email templates
Generating any HTML from Go

Consider alternatives when:

Building single-page applications (SPAs) with React/Vue/etc.
Building APIs that return JSON
Using a separate frontend framework

What’s Next?

Quick Start - Build your first page step by step
Engine - All configuration options explained
Templates - Go template syntax guide
Layouts - Page structure and inheritance
Functions - Built-in and custom helpers
Production - Deployment best practices

View Engine

Live (Realtime)

Sync (State)

What is Server-Side Rendering?

What the View Package Provides

How It Works

Directory Structure

Quick Example

Template Data

When to Use View

What’s Next?

​What is Server-Side Rendering?

​What the View Package Provides

​How It Works

​Directory Structure

​Quick Example

​Template Data

​When to Use View

​What’s Next?

What is Server-Side Rendering?

What the View Package Provides

How It Works

Directory Structure

Quick Example

Template Data

When to Use View

What’s Next?