Ядро SvelteKit обеспечивает высококонфигурируемый механизм рендеринга. В этом разделе описаны некоторые термины, используемые при обсуждении рендеринга. Ссылки на настройку этих параметров приведены в документации выше.
Рендеринг на стороне клиента 'Client-Side Rendering' (CSR) - это генерация содержимого страницы в веб-браузере с помощью JavaScript.
В SvelteKit рендеринг на стороне клиента будет использоваться по умолчанию, но вы можете отключить JavaScript с помощью параметры страницы csr = false.
Компоненты Svelte хранят некоторое состояние и обновляют DOM, когда состояние обновляется. При получении данных во время SSR, по умолчанию SvelteKit будет хранить эти данные и передавать их клиенту вместе с HTML-файлом, отрендеренным сервером. Затем компоненты могут быть инициализированы на клиенте с этими данными без необходимости повторного вызова тех же конечных точек API. Затем Svelte проверит, что DOM находится в ожидаемом состоянии, и подключит слушателей событий в процессе, называемом гидратацией. Когда компоненты полностью гидратированы, они могут реагировать на изменения своих свойств так же, как и любой вновь созданный компонент Svelte.
В SvelteKit страницы будут гидратированы по умолчанию, но вы можете отключить JavaScript с помощью параметры страницы csr = false.
Пререндеринг означает вычисление содержимого страницы во время сборки и сохранение HTML для отображения. Этот подход имеет те же преимущества, что и традиционные страницы с серверным рендерингом, но позволяет избежать повторного вычисления страницы для каждого посетителя и поэтому практически бесплатно масштабируется при увеличении числа посетителей. Компромисс заключается в том, что процесс сборки является более дорогостоящим, а обновить предварительно отрендеренный контент можно только путем создания и развёртывания новой версии приложения.
Не все страницы могут быть пререндерены. Основное правило заключается в следующем: чтобы содержимое страницы могло быть пререндеренным, любые два пользователя, обратившиеся к ней напрямую, должны получить одинаковое содержимое с сервера, и страница не должна содержать действий. Обратите внимание, что вы все еще можете пререндерить содержимое, которое загружается на основе параметров страницы, если все пользователи будут видеть одно и то же пререндеренное содержимое.
Предварительно отрендеренные страницы не ограничиваются статическим содержимым. Вы можете создавать персонализированные страницы, если данные, специфичные для пользователя, будут получены и отображены на стороне клиента. Это возможно только с оговоркой, что вы будете испытывать недостатки, связанные с отсутствием SSR для этого контента, как обсуждалось выше.
В SvelteKit вы можете управлять пререндерингом с помощью параметра страницы prerender и конфигурацией prerender в svelte.config.js.
По умолчанию, когда вы переходите на новую страницу (щелкая по ссылке или используя кнопки браузера вперед или назад), SvelteKit перехватывает попытку навигации и обрабатывает ее вместо того, чтобы позволить браузеру отправить запрос на сервер для получения целевой страницы. Затем SvelteKit обновит отображаемое содержимое на клиенте путем рендеринга компонента для новой страницы, который, в свою очередь, может выполнять вызовы к необходимым конечным точкам API. Этот процесс обновления страницы на клиенте в ответ на попытку навигации называется маршрутизацией на стороне клиента.
В SvelteKit маршрутизация на стороне клиента будет использоваться по умолчанию, но вы можете пропустить ее с помощью data-sveltekit-reload.
Одностраничное приложение 'Single-Page Application' (SPA) - это приложение, в котором все запросы к серверу загружают один HTML-файл, который затем выполняет рендеринг запрашиваемого содержимого на стороне клиента на основе запрошенного URL. Вся навигация обрабатывается на стороне клиента в процессе, называемом маршрутизацией на стороне клиента, при этом содержимое каждой страницы обновляется, а общие элементы макета остаются практически неизменными. SPA не обеспечивают SSR, что имеет недостаток, описанный выше. Однако некоторые приложения не сильно страдают от этих недостатков, например, сложные бизнес-приложения доступные после ввода логина и пароля, где SEO не имеет большого значения, и известно, что пользователи будут обращаться к приложению из согласованной вычислительной среды (чаще всего локальной сети предприятия).
В SvelteKit вы можете построить SPA с adapter-static.
Генерация статических сайтов 'Static Site Generation' (SSG) - это термин, который относится к сайту, где каждая страница предварительно отрисована. SvelteKit был создан не только для генерации статических сайтов, как некоторые инструменты, и поэтому может не так хорошо масштабироваться для эффективного рендеринга большого количества страниц, как инструменты, созданные специально для этой цели. Однако, в отличие от большинства специально созданных SSG, SvelteKit позволяет смешивать и сочетать различные типы рендеринга на разных страницах. Одним из преимуществ полной предварительной визуализации сайта является то, что вам не нужно содержать или оплачивать серверы для выполнения SSR. После генерации сайт можно обслуживать из CDN, что приводит к отличной производительности "время до первого байта". Эту модель доставки часто называют JAMstack.
В SvelteKit вы можете сгенерировать статический сайт, используя adapter-static или настроить каждую страницу на пререндер с помощью параметра страницы prerender или конфигурации prerender в svelte.config.js.
Рендеринг на стороне сервера 'Server-Side Rendering' (SSR) - это генерация содержимого страницы на сервере. SSR обычно предпочтительнее для SEO. Хотя некоторые поисковые системы могут индексировать содержимое, которое динамически генерируется на стороне клиента, даже в этих случаях может потребоваться больше времени. Это также улучшает воспринимаемую производительность и делает ваше приложение доступным для пользователей, если JavaScript не работает или отключен (что случается чаще, чем вы думаете).
В SvelteKit страницы по умолчанию рендерятся на стороне сервера. Вы можете отключить SSR с помощью параметра страницы ssr.