A practical guide to building a blazing-fast, SEO-optimized website using a modern, minimal, server-side rendered framework: Slick Server.
🧠 The Problem: Why Isn't My Website Ranking on Google?
It’s one of the most common issues developers and indie creators face:
"My site looks great. It works perfectly. But I’m nowhere to be found on Google."
If that sounds familiar, the likely culprits are:
- Poor performance
- Client-side rendering only
- Unoptimized metadata & structure
To rank on Google in 2025, a website must be fast, crawlable, and cleanly structured. That means server-side rendering (SSR), semantic HTML, and lightning-fast load times.
Enter: Slick Server.
🧬 What is Slick Server?
Slick Server is a minimal, ultrafast framework built on top of Web Standards and running on Deno. It's designed for server-side rendering, with automatic asset optimization, and built-in SEO-first architecture.
Key Features
- ⚡ SSR by default (great for SEO)
- 🔎 Metadata and
<head>optimization - 🧹 Automatic minification of all assets (CSS, JS, TS)
- 🧱 Semantic project structure
- 🗂️ Static file serving
- 💡 Optional SPA client with
@webtools/slick-client
🎯 Goal of this Tutorial
We'll build a website that:
- Loads in under 1 second
- Renders all content server-side
- Follows SEO best practices
- Is easy to maintain and extend
Ideal for freelancers, indie hackers, and developers who want performance without complexity.
📦 Step 1 — Install Slick Server
First, create a new Deno project:
deno add jsr:@webtools/slick-server
Create the basic directory structure:
mkdir pages templates static
mkdir -p static/styles/app static/scripts/app static/assets
touch index.ts pages/index.tsx templates/app.tsx
🧪 Step 2 — Setup Your Main Server
// index.ts
import { Slick } from "@webtools/slick-server";
const slick = new Slick(import.meta.dirname!, {
env: {
API_URL: "https://api.example.com",
},
lang: "en",
port: 3000,
r404: "/",
client: true, // enables SPA helpers
});
await slick.start();
Run your server with:
deno run -A index.ts
📄 Step 3 — Create a Server-Rendered Homepage
// pages/index.tsx
import * as Slick from "@webtools/slick-server";
export default {
url: "/",
template: "app",
title: "Freelance Web Developer – High Performance Sites",
styles: ["/styles/app/index.css"],
scripts: ["/scripts/app/index.ts"],
head: (
<>
<title>Freelance Web Developer – SEO & Speed Expert</title>
<meta name="description" content="Building modern, SEO-optimized, high-performance websites with Deno and Slick Server." />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://example.com/" />
</>
),
body: (
<>
<h1>Welcome to My Portfolio</h1>
<p>I build fast, SEO-ready websites using modern technologies.</p>
</>
),
onpost: null,
onrequest: null,
} satisfies Slick.Page;
This page will be fully rendered on the server before it reaches the browser — making it immediately readable by search engines.
🧱 Step 4 — Define a Global Template
// templates/app.tsx
import * as Slick from "@webtools/slick-server";
export default {
name: "app",
favicon: "/favicon.ico",
styles: ["/styles/reset.css", "/styles/app.css"],
scripts: ["/scripts/app.ts"],
head: <meta name="viewport" content="width=device-width, initial-scale=1.0" />,
body: (
<>
<header>
<h2>My Site</h2>
</header>
<main>{/* Page content is injected here */}</main>
<footer>© 2025 All rights reserved</footer>
</>
),
onrequest: null,
} satisfies Slick.Template;
This template wraps all your pages with shared layout, styles, and scripts.
🧭 Step 5 — Add SEO Essentials: Sitemap & robots.txt
Create these files inside /static/ so they're publicly accessible.
# static/robots.txt
User-agent: *
Allow: /
Sitemap: https://example.com/sitemap.xml
<!-- static/sitemap.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://example.com/</loc>
<lastmod>2025-07-12</lastmod>
<priority>1.0</priority>
</url>
</urlset>
Googlebot will find and index your site faster and more accurately.
🧪 Step 6 — Run SEO Audit with Lighthouse
Head over to Google PageSpeed Insights or run a Lighthouse audit.
With Slick Server, you should easily score:
- ✅ Performance: 100
- ✅ SEO: 100
- ✅ Accessibility: 100
- ✅ Best Practices: 100
That’s the power of SSR + optimized structure + zero config minification.
💡 Bonus: Dynamic Metadata with onrequest
If you're building a blog or dynamic site, you can update metadata dynamically at request time:
onrequest: async (req) => {
const post = await fetch("https://api.example.com/post/123").then(res => res.json());
req.data.title = post.title;
}
This ensures every page has SEO-ready titles, even with dynamic content.
✅ Summary
Slick Server helps you check all the SEO boxes out of the box:
- ✅ Fast initial load time
- ✅ Server-rendered content
- ✅ Proper meta tags and structure
- ✅ Clean URLs and sitemap
- ✅ Simple setup with modern standards
Whether you're a freelancer, solo dev, or working on a side project, Slick Server gives you the SEO boost you need without the bloat.
📚 Resources
🙋 Got Questions?
Feel free to leave a comment or fork the example on GitHub to start experimenting.
Top comments (0)