Next.js on Tilda

Tilda supports 100% of Next.js features without any additional changes to your Next.js projects, including advanced caching and revalidation capabilities.

Prerequisites

You'll need to create a "Project" and a "Site" in Tilda dashboard before you can deploy your Next.js project. Use "slugs" for those values in the deployment command as shown in the Deployment section below.

Please follow the getting started with Tilda guide to understand how to begin.

Partial Prerendering (PPR) Support

Tilda provides edge-accelerated Partial Prerendering support for Next.js 15 canary and newer versions. This feature allows you to:

• Serve static content shells instantly from our global edge network
• Progressively load dynamic, personalized content
• Reduce server load and improve performance for users worldwide

Enabling PPR

To enable edge-accelerated PPR for your Next.js application, add the --ppr flag to your build command:

tilda build nextjs --ppr=15-canary-v1

After building with PPR enabled, deploy normally:

tilda deploy --project myproject --site mysite

Requirements

To use PPR on Tilda, you need:

• Next.js 15 canary or newer
• Latest version of Tilda CLI (npm install -g @tildacloud/cli@latest)
• Next.js project with PPR-enabled components

How It Works

Unlike standard PPR implementations that run entirely on the origin server, Tilda's edge-accelerated PPR:

1. Serves static shell content directly from our global edge network
2. Only routes dynamic content requests to your application server
3. Integrates with our global cache invalidation system

This provides the same performance benefits as Next.js PPR on Vercel. For comprehensive information about PPR support, including architecture details and business benefits, see our Edge-Accelerated Next.js PPR blog post.

Next.js PPR is powered by Tilda's Progressive Rendering Format, which is an open specification that can be implemented by any web framework to achieve similar edge-accelerated rendering capabilities.

Deployment

Deploying a Next.js project on Tilda is as simple as running the following commands:

tilda build nextjs
tilda deploy --project myproject --site mysite

Caching and Revalidation

Tilda fully supports Next.js's cache tags and revalidation features in the App Router and path-based revalidation in the Pages Router.

Using Cache Tags in App Router

You can use cache tags with fetch requests:

export default async function ProductsPage() {
  const products = await fetch('https://api.example.com/products', {
    next: { tags: ['products'] }  // Add cache tags to fetch request
  })
  const data = await products.json()
  return <ProductList products={data} />
}

For more granular control, use the cacheTag function:

import { unstable_cacheTag as cacheTag } from 'next/cache'

export async function getProducts() {
  'use cache'  // Enable caching for this function
  cacheTag('products')  // Tag this data for later invalidation
  
  const products = await db.query('SELECT * FROM products')
  products.forEach(product => {
    cacheTag(`product-${product.id}`)
  })
  
  return products
}

Cache Invalidation

Next.js provides several methods for cache invalidation, all fully supported by Tilda:

1. Tag-based Invalidation

Use revalidateTag() to invalidate content with specific cache tags:

import { revalidateTag } from 'next/cache'

export async function invalidateProducts() {
  revalidateTag('products')  // Invalidate all content tagged with 'products'
  revalidateTag(`product-123`)  // Invalidate a specific product
}

2. Path-based Invalidation

Use revalidatePath() to invalidate cached content under specific paths:

import { revalidatePath } from 'next/cache'

export async function invalidateProductPages() {
  revalidatePath('/products/123')  // Invalidate a specific product page
  revalidatePath('/products/[id]', 'layout')  // Or invalidate all product pages
}

3. On-Demand Revalidation (Pages Router)

For Pages Router applications, use res.revalidate() in API routes:

import type { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  try {
    await res.revalidate('/products/123')
    return res.json({ revalidated: true })
  } catch (err) {
    return res.status(500).send('Error revalidating')
  }
}

You can also manage cache invalidation through the Tilda Dashboard, where you can monitor application performance and manually invalidate cache when needed.