Для тех, кто новичок в сериале, вы можете прочитать Части первыеВ дваи три первый.
В конце моего последнего поста я упоминал, что у меня есть еще две идеи для изучения:
-
- Сделать некоторые чисто содержание визуального строителя
- Делать все это динамически, а не статически.
Давайте сделаем это.
От статического до серверного рендеринга (SSR)
Я начал новая версия на стороне сервера демонстрационного сайта, который основан на все, что добавлено в Статическая версия сайтаПолем Это означает, что изменения контента в CMS теперь появляются в версии веб -сайта SSR почти мгновенно, не требуя запуска новой сборки на Vercel. Для сайтов с большим количеством изменений контента это будет гораздо более подходящим подходом по сравнению с процессом WebHook, который мы использовали со статической версией сайта.
Основное изменение изменилось Astro.config.mjs От статического вывода до `output: ‘server’. Это изменение говорит Astro остановить предварительное строительство всех страниц в HTML-файлы и вместо этого отображает каждую страницу на сервере, когда пользователь запрашивает его.
Мне также пришлось установить соответствующий Серверный адаптерв этом случае `@Astrojs/Vercel`, так как эта демонстрация работает на Vercel.
Это отлично подходит для сайтов с тяжелыми контентами, где обновления часты, изменения отражаются, как только они индексируются на графике.
Машинопись
В последнем посте я упомянул, что интеграция GraphQL может быть улучшена путем автоматического создания типов типографии. Я думал, что, учитывая, что я вношу больше изменений в новой версии, я мог бы также добавить это тоже.
Установив пакет `@@graphql-codegen/cli` и настройка codegen.ts Файл конфигурации, теперь мы можем запустить одну команду: `npm запустить Codegen`.
Эта команда подключается к нашей конечной точке с оптимизированным графом, сканирует наши запросы в Apollo-client.tsи автоматически генерирует типы типографии для них. При развитии это означает:
-
Полный тип безопасности: Больше не нужно угадать, какие поля доступны на элементе контента.
-
Интеллектуальное автозаполнение: Редактор кода знает нашу схему, которая делает написание запросов и использует данные намного быстрее и менее подверженным ошибкам.
Я обновил все макеты страниц и компонентов, чтобы использовать импорт из наших сгенерированных типов, например,
import type { StartPage, ArticlePage as ArticlePageType } from '../gql/graphql';Это хорошее улучшение для опыта разработчика и того, что вы хотели бы в любом реальном проекте.
Добавление опыта и визуального строителя
Версия SSR теперь правильно поддерживает визуальное строитель Optimizely с опытом.
Я включил три, чтобы начать:
-
Experiencehero: Простой, многоразовый баннер героя полной ширины с фоновым изображением и наложением текста.
-
ExperienceCarouseel: Для создания отзывчивых сетей изображения.
-
Experiencerte: Стандартный богатый текстовый редактор для отображения любого вида форматированного текстового содержимого.
Вы можете найти их в папке компонентов в репо, например, https://github.com/jacobpretorius/opti.saas.astro.demo/blob/main/ssr/src/components/experiencehero.astro
Редакторы контента теперь могут составить их с типом страницы опыта внутри CMS и их видят отображается на страницеПолем
Визуальный строитель уже прошел долгий путь.
Кэширование
Ответы на графики кажутся относительно быстрыми, но, как вы можете ожидать, страница, отображаемая на стороне сервера, которая должна загружать содержание страницы с внешнего источника для каждого запроса, не будет такой же исполнительской, как статический сайт, который может мгновенно начать потоковую передачу HTML.
К счастью, кэширование в памяти на сервере все еще возможно. Поэтому я добавил 2-минутный кэш для всех нормальных загрузок страниц (режим не подвига). Только первый новый запрос на график будет выходить на график каждые 2 минуты. Вы можете увидеть и изменить конфигурацию кэша на ваши потребности в Apollo-client.tsПолем
Заключение
Эта новая версия SSR является гораздо более надежной и динамичной основой для построения с Astro и Optimizely SaaS CMS. Это выводит силу мгновенных обновлений контента и истинный опыт визуального редактирования на передний план, при этом процесс разработки более эффективным с генерацией типа.
Это обновляет мой пример из простого блога (как мой) во что-то, что вы могли бы использовать для более сложного и богатого контентом корпоративного сайта.
В следующий раз я посмотрю на интеграцию новый бета-оптимизированный контент-JS-SDKПолем
Проверьте живую демонстрацию и код для себя
Увидимся в следующий раз 😉
21 июля 2025 года
Читайте также
