🚀 How to Rank #1 on Google with This New Ultrafast Web Framework

Borane — Sat, 12 Jul 2025 18:33:31 +0000

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.

DEV Community: Borane