Site Options and Starter Kits
Learn about site options and available starter kits.
This section provides information on site options and starter kits to help you find a starting point to create your Front-End Site. You can build Front-End Sites on Pantheon using several methods. The Front-End Site option must be enabled before you can apply your own configuration or use a compatible starter kit.
Check out the Front-End Sites landing page to access all documentation for Front-End Sites.
Site Options
You can create an application from scratch by importing a repository or you can use the Pantheon starter kit templates to develop a Front-End Site. You can also create a site without a CMS by using the import repository feature during site creation.
Pantheon Front-End Sites can be created from server-side rendering (SSR) or a static site generator (SSG). The following options are available for Pantheon Front-End Site Early Access offering:
| Site Creation Option | Description | CMS Required | Starter Kit |
|---|---|---|---|
| Import Repository | Connect your Git provider and select an existing repository. The CMS is optional. Limited support is provided for this configuration. | Optional | ❌ |
| Create Your Site without a Starter Kit and/or CMS | You are not required to have a CMS when using this method. This option is does not use a pre-configured starter kit, and must be configured manually. | Optional | ❌ |
| Create Your Site with a Non-official Frontend Framework | Pantheon Front-End Sites Early Access (EA) program currently supports Gatsby and Next.js as frontend frameworks. The process for non-officially supported frontend frameworks requires manual configuration. | Optional | ❌ |
| WordPress and Gatsby Frontend | Create a Front-End Site using a base Gatsby.js frontend template with WordPress as the backend CMS. | ✔ | ✔ |
| Drupal and Next.js Frontend | Create a Front-End Site using a base Next.js frontend template with Drupal as the backend CMS. | ✔ | ✔ |
| WordPress and Next.js Frontend | Create a Front-End Site using a base Next.js frontend template with WordPress as the backend CMS. | ✔ | ✔ |
| Drupal Backend | Use the Drupal backend starter kit to streamline the creation of your Front-End Site on Pantheon. This option is pre-configured. | ✔ | ✔ |
| WordPress Backend | Use the WordPress backend starter kit to streamline the creation of your Front-End Site on Pantheon. This option is pre-configured. | ✔ | ✔ |
Currently, Pantheon Front-End Sites do not support SSR using Gatsby. Other permutations for site development using a Front-End Site can be used, but are not supported or recommended.
Pantheon Front-End Site Starter Kits
Pantheon offers recommended starter kit templates.
- Drupal Backend Starter
- WordPress Backend Starter
- Drupal + Next.js Frontend Starter
- WordPress + Next.js Frontend Starter
- WordPress + Gatsby Frontend Starter
All starter kits are pre-configured, and include the following:
- A set of recommended modules or plugins for creating Front-End Sites on Pantheon.
- An example content integration showing content from your CMS backend rendered in your frontend application.
- A live preview of content from your CMS backend rendered in your frontend application.
- A development environment that supports communication between backend and frontend services.
Compatibility
The table below provides compatibility information for Front-End Sites.
| Tooling | Version |
|---|---|
| Gatsby (Static Site Generation (SSG) only) | 4 or higher |
| Next.js | 12 or higher |
| Drupal | 9 or higher |
| WordPress | 5.9 or higher |
Terminus Plugin
The Terminus Decoupled Kit plugin allows you to create your backend project in Terminus with the option to select Drupal or WordPress.
Rendering Options
This section provides a comparison of static site generation (SSG), server side rendering (SSR), and incremental static regeneration (ISR) modes, and some common use cases for each.
Refer to Decoupled Architectures: What Computer Assembles the Websites for more information. You can also check out this Decoupled Architecture video for a demonstration of the different approaches each mode takes.
What Is Static Site Generation (SSG)?
SSG compiles and renders your entire website at build time. SSG output consists of:
- Static files: HTML
- Assets: JavaScript, CSS, etc.
Common SSG Use Cases
- Pages with content that is the same for all users.
- Pages that do not require back and forth processing with a runtime.
- Pages with infrequent content changes.
- Pages with critical uptime needs. Content dependencies are met at build time for SSG sites. This means that a failure by a dependent content source will only block a content update. In contrast, an SSR site cannot return a result if a CMS is down when an SSR site tries to render a page.
What Is Server Side Rendering (SSR)?
SSR uses a web server running Node.js to render individual pages on demand. This is different from SSG which renders the entire site at build time.
Common SSR Use Cases
- Pages that are user specific
- Pages that require authentication
- Pages that change frequently
- Pages that do not require back and forth processing with a runtime.
- Pages with regular content changes or edits benefit from SSR because the entire site is not compiled as it is with SSG.
What Is Incremental Static Regeneration (ISR)?
Pantheon does not support Incremental Static Regeneration (ISR).
ISR allows you to regenerate static pages during runtime without having to rebuild your entire site. Refer to Next.js ISR for more information.
Key Differences
- SSG compiles and renders your entire website at build time.
- SSR uses a web server to render individual webpages on demand as opposed to SSG which renders entire websites at build time.
- ISR is not supported on the Pantheon platform. Like SSR, ISR renders individual pages on demand. However, ISR stores the results in an internal cache. This is a less efficient solution than using a CDN. Pantheon provides Global CDN to all Pantheon sites. The combination of SSR and a CDN solves the same problem as ISR in a more robust way.