Что такое изоморфные приложения?
t.me/qa_chillout
Изоморфные приложения — это такой подход, который позволяет делать веб-приложения быстрее, удобнее и более масштабируемыми, комбинируя преимущества как работы с сервером, так и с браузером.
Когда вы заходите на какой-либо сайт, например, новостной, браузер должен показать вам страницу с текстом, картинками и другими элементами. С помощью SSR (серверной обработки), сервер сразу готовит всю страницу и отправляет её вам. Это как если бы кто-то заранее собрал всю информацию и просто отдал вам готовый лист с новостями. Благодаря этому сайт быстро становится доступен и виден, потому что он уже готов, на момент его открытия.
Но как только вы начинаете прокручивать страницу вниз или выбираете фильтры для новостей (например, по категориям), всё происходит уже на клиенте, то есть в браузере. Это CSR (клиентская обработка). В этом случае с сервера не загружается вся страница заново, а браузер просто обновляет нужные данные, не перезагружая страницу полностью. Это делает приложение быстрее и удобнее, потому что вам не нужно ждать загрузки всей страницы снова, когда вы хотите посмотреть другие новости.
SSR (Server-Side Rendering) — это подход в веб-разработке, при котором страницы веб-приложения генерируются на сервере. Когда пользователь заходит на сайт, сервер обрабатывает запрос, генерирует HTML-код страницы и отправляет его в браузер. Браузер просто отображает готовую страницу, что ускоряет первый рендеринг и улучшает индексацию в поисковых системах.
CSR (Client-Side Rendering) — это подход, при котором веб-страница загружается в виде пустого HTML-шаблона, а весь контент (текст, изображения, данные) генерируется и рендерится в браузере пользователя с помощью JavaScript. Сервер отправляет минимальные данные, а весь процесс формирования страницы происходит на стороне клиента, что позволяет сделать веб-приложение более динамичным, но может замедлить начальную загрузку страницы.
Реализация SSR
Когда вы заходите на сайт, ваш браузер отправляет запрос на сервер. Сервер обрабатывает этот запрос, собирает все необходимые данные (например, текст, изображения, информацию о пользователе и другие элементы) и генерирует полную HTML-страницу. Это можно разбить на несколько этапов:
1. Получение запроса
Сервер получает запрос от вашего браузера, который включает информацию о том, какую именно страницу вы хотите увидеть (например, главная страница или конкретная статья).
2. Извлечение данных
Сервер обращается к различным источникам данных, чтобы собрать всю нужную информацию для страницы. Это могут быть:
- База данных, из которой сервер забирает текст статьи, заголовки, дату публикации и другие данные.
- Файлы и изображения, которые хранятся на сервере и которые нужно вставить в HTML (например, картинки или стили).
3. Генерация HTML
На основе собранных данных сервер начинает создавать HTML-код страницы. На этом шаге сервер вставляет все элементы (тексты, изображения, стили, скрипты) в заранее подготовленный шаблон страницы. Это важный момент, потому что HTML уже будет содержать все нужные данные и оформление.
4. Отправка готовой страницы
Когда HTML-страница готова, сервер отправляет её в браузер пользователя. Браузер сразу отображает страницу с полным контентом (текстами, изображениями и стилями), так как вся обработка страницы происходит на сервере.
Реализация CSR
При CSR, когда вы заходите на сайт, сервер отправляет базовую HTML-страницу, которая может быть пустой или с минимальными данными, включая контейнер для контента и ссылки на JavaScript-файлы.
Браузер загружает эти файлы, которые затем запрашивают данные с сервера (например, текст или изображения). Здесь можно выделить несколько этапов:
1. Непосредственно сама загрузка JavaScript
После получения базовой HTML-страницы, браузер видит ссылки на JavaScript-файлы, обычно это отдельные .js файлы, которые содержат логику приложения. Браузер начинает их загружать.
2. Выполнение JavaScript
Когда JavaScript-файлы загружены, браузер выполняет этот код. Код в файлах может включать инструкции для работы с данными, отображения элементов и взаимодействия с сервером. Например, код может содержать функции отправки запросов на сервер для получения данных.
3. Запрос данных с сервера
После того как JavaScript начинает выполняться, он может отправить запросы на сервер, чтобы получить недостающие данные для страницы. Обычно эти запросы выполняются через AJAX (Asynchronous JavaScript and XML) или Fetch API, что позволяет браузеру отправлять запросы и получать данные без перезагрузки страницы.
4. Получение данных
Сервер обрабатывает запросы и отправляет данные обратно. Эти данные часто приходят в формате JSON (структура данных, похожая на текст), который легко может быть обработан JavaScript. Например, это могут быть тексты статей, ссылки на изображения, данные о пользователях и т. д.
5. Обновление страницы
Как только данные получены, JavaScript обрабатывает их, вставляет в HTML-структуру страницы и обновляет визуальный контент в браузере. Это позволяет динамически обновлять страницы, добавляя новый текст, изображения или элементы интерфейса, не перезагружая всю страницу.
Как только страница обновлена, она становится интерактивной, и вы можете взаимодействовать с сайтом, например, прокручивать или фильтровать информацию, без необходимости перезагружать страницу.
Ключевые задачи
Изоморфные приложения решают несколько важных задач:
Ускорение загрузки страниц
- Сервер может отдать пользователю полностью сгенерированную страницу (через SSR), что сокращает время ожидания. Это особенно важно для поисковых систем, так как они могут сразу видеть контент страницы и индексировать его.
Интерактивность
- После первой загрузки страницы с помощью SSR, приложение может продолжить работать на клиенте (с использованием CSR), обеспечивая динамичность и плавность взаимодействия. Это дает пользователю ощущение, что приложение работает быстро и без задержек.
Улучшение SEO
- Поисковые системы часто хуже справляются с индексацией JavaScript-контента, который генерируется клиентом. SSR помогает решить эту проблему, потому что страница уже содержит все данные, когда поисковик её сканирует.
Снижение нагрузки на сервер
- Изоморфные приложения позволяют разгрузить сервер, выполняя часть логики на клиенте. После того как сервер отдал начальную страницу, дальнейшее взаимодействие происходит на клиенте, что снижает нагрузку на сервер.
В каких проектах используют изоморфные приложения?
Сайты с высоким трафиком
Если сайт должен быстро загружаться и быть видимым в поисковых системах (например, новостные сайты, блоги или интернет-магазины), использование изоморфного подхода с SSR для начальной загрузки и CSR для динамических действий будет полезным.
Приложения с высокой интерактивностью
Если сайт требует сложных взаимодействий с пользователем (например, динамические формы, фильтры, живые обновления данных), вы можете использовать CSR для обработки этих действий на клиенте, но при этом всё равно использовать SSR для начальной загрузки.
Приложения с частыми обновлениями контента
В некоторых случаях, если контент постоянно обновляется, важно, чтобы пользователи получали актуальную информацию быстро. Использование изоморфных приложений позволяет быстро передать изменённый контент через сервер, а потом поддерживать взаимодействие через клиентскую часть.
Итого
SSR (Server-Side Rendering) и CSR (Client-Side Rendering) — это два разных подхода к рендерингу веб-страниц. Однако SSR и CSR могут быть объединены в одном проекте, используя изоморфный рендеринг. В этом случае, начальная загрузка страницы происходит с использованием SSR, что позволяет быстро отобразить контент и улучшить SEO. Сервер генерирует и отправляет готовую HTML-страницу, обеспечивая быстрый первый рендеринг.
После этого, когда страница загружена, включается CSR. JavaScript отвечает за динамическую загрузку данных и обновление контента без необходимости перезагружать страницу. Это делает сайт интерактивным и быстрым в работе после первой загрузки, позволяя пользователю взаимодействовать с сайтом без ожидания.
Таким образом, комбинированный подход позволяет использовать преимущества обоих методов: SSR для быстрого отображения контента и улучшения SEO, и CSR для динамичного взаимодействия с пользователем и плавности работы сайта. Это идеально подходит для проектов, где важно и быстрое начало работы, и высокая интерактивность в дальнейшем.
Обсудить статью, узнать больше можно в телеграм канале «Тестировщики нужны».