---
layout: article
title: Server Side Rendering
description: Learn how to host SSR web apps on Appwrite Sites.
---

Server Side Rendering (SSR) apps generate HTML content dynamically on the server for each request and send fully rendered pages to the browser. This approach improves performance for the initial load and enhances SEO since search engines can easily index the content. While SSR can be slightly slower than static apps due to server-side processing, it provides a good balance between performance and interactivity.

Since Appwrite's [CDN](/docs/products/network/cdn) supports dynamic content delivery, any server-side processing implemented in your site will be executed at your user's nearest edge location. The CDN also uses advanced compression algorithms to reduce data transfer sizes and improve delivery times of your site content. Any data relevant to other Appwrite products that you have integrated in your site, such as Auth, Databases, Storage, Functions, and Messaging, will be served from your project's pre-selected [region](/docs/products/network/regions).

# Configuring your Appwrite Site to use SSR

When Appwrite builds your site for the first time, it scans your project's configuration files to determine whether the website should be rendered as static pages or using SSR.

If you need to manually update these settings, here are the steps to do so:

1. Navigate to your site in the Appwrite Console and head to the **Settings** tab > **Build settings** section
2. Select the **Server side rendering** checkbox (you may need to update your project codebase depending on your framework option)
3. Confirm that the appropriate install command, build command, and output directory are set
4. Click on the **Update** button and redeploy your site

{% only_dark %}
![Rendering strategy](/images/docs/sites/dark/build-settings-rendering-ssr.avif)
{% /only_dark %}
{% only_light %}
![Rendering strategy](/images/docs/sites/build-settings-rendering-ssr.avif)
{% /only_light %}

## Enabling SSR builds on your web app

To enable SSR builds for your web app, you may need to make some additional updates in case of the following frameworks:

{% tabs %}

{% tabsitem #analog title="Analog" %}
Set `ssr: true` in `analog` plugin in the `vite.config.ts` file.
{% /tabsitem %}

{% tabsitem #angular title="Angular" %}
Ensure the `src/server.ts` file uses `@angular/ssr/node` package.
{% /tabsitem %}

{% tabsitem #nextjs title="Next.js" %}
The following output modes are supported:

- **Default mode**: No `output` configuration needed in `next.config.js`.
- **Standalone mode**: Set `output` to `standalone` in `next.config.js` for smaller build sizes, lesser build times and cold start times.
{% /tabsitem %}

{% tabsitem #nuxt title="Nuxt" %}
Set build command to `npm run build` in site settings.
{% /tabsitem %}

{% tabsitem #sveltekit title="SvelteKit" %}
Use `@sveltejs/adapter-node` adapter in the `svelte.config.js` file.
{% /tabsitem %}

{% tabsitem #astro title="Astro" %}
Use `@astrojs/node` adapter in the `astro.config.mjs` file.
{% /tabsitem %}

{% tabsitem #remix title="Remix" %}
Ensure the `entry.server.tsx` file uses `@remix-run/node` package.
{% /tabsitem %}

{% tabsitem #tanstack-start title="TanStack Start" %}
No additional configuration is needed as SSR is enabled by default.
{% /tabsitem %}

{% /tabs %}

# Appwrite-specific environment variables

You can [access several environment variables](/docs/products/sites/develop#accessing-environment-variables) pertaining to your Appwrite project in SSR apps.

| Variable                        | Description                                             | Available at Build and/or Run Time |
| ------------------------------- | ------------------------------------------------------- | ---------------------------------- |
| `APPWRITE_SITE_API_ENDPOINT`    | The API endpoint of the running site                    | Both                               |
| `APPWRITE_SITE_NAME`            | The name of the running site.                           | Both                               |
| `APPWRITE_SITE_DEPLOYMENT`      | The deployment ID of the running sites.                 | Both                               |
| `APPWRITE_SITE_PROJECT_ID`      | The project ID of the running site.                     | Both                               |
| `APPWRITE_SITE_RUNTIME_NAME`    | The runtime name of the running site.                   | Both                               |
| `APPWRITE_SITE_RUNTIME_VERSION` | The runtime version of the running site.                | Both                               |
| `APPWRITE_SITE_CPUS`            | The CPU (runtime) specification of the running site.    | Both                               |
| `APPWRITE_SITE_MEMORY`          | The memory (runtime) specification of the running site. | Both                               |