Documentation

Rendering

Choose the best rendering strategy for each page: SSR, SSG, or CSR.

Server-Side Rendering (SSR)

Pages are rendered on the server for each request. Use this for dynamic content that changes frequently:

app/posts/page.server.hook.ts

import type { ServerLoader } from "@lolyjs/core";

export const dynamic = "force-dynamic" as const;

export const getServerSideProps: ServerLoader = async (ctx) => {
  // Fetch fresh data on each request
  const posts = await fetchFreshPosts();
  
  return {
    props: { posts },
    metadata: {
      title: "Posts",
      description: "Latest posts",
    },
  };
};

Static Site Generation (SSG)

Pages are pre-rendered at build time. Use this for content that doesn't change often:

app/blog/[slug]/page.server.hook.ts

import type { ServerLoader, GenerateStaticParams } from "@lolyjs/core";

export const dynamic = "force-static" as const;

export const generateStaticParams: GenerateStaticParams = async () => {
  const posts = await getAllPosts();
  return posts.map((post) => ({ slug: post.slug }));
};

export const getServerSideProps: ServerLoader = async (ctx) => {
  const post = await getPost(ctx.params.slug);
  
  return {
    props: { post },
    metadata: {
      title: post.title,
      description: post.excerpt,
    },
  };
};

Client-Side Rendering (CSR)

Pages are rendered entirely on the client. Simply don't create a page.server.hook.ts file:

app/dashboard/page.tsx

import { useState, useEffect } from "react";

export default function Dashboard() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData().then(setData);
  }, []);

  if (!data) return <div>Loading...</div>;

  return <div>{/* Your UI */}</div>;
}

Choosing a Strategy

Use SSR when:

Content changes frequently
You need real-time data
SEO is important and content is dynamic

Use SSG when:

Content is static or changes infrequently
You want the best performance
You need SEO for static content

Use CSR when:

Content is user-specific and private
You need highly interactive UIs
SEO is not a concern