Как написать свой SSR?

Question

[mletov]

Традиционно контент перегенерился либо на сервере с полной перезагрузкой страницы (можно было увидеть новый код через просмотр исходников страницы), либо через ajax с частично перезагрузкой (увидеть изменения можно было только через инспектор браузера, исходный код страницы оставался тем же).

Несколько лет назад появился SSR, а потом и гибридный режим, и я не очень понимаю как это работает.
Т е вроде бы часть страницы перегружается асинхронно, но при этом изменения видны не только в инспекторе, но и в исходном коде страницы ("Просмотр кода страницы"). Смотрел на примере Blazor, но, думаю, фреймворков достаточно.

Статей про SSR много, но все они ориентированы на тот или иной фреймворк.

Хотел спросить, нет ли примеров статей, где рассматривается пример, как самому реализовать SSR с асинхронной перезагрузкой страницы. А то не очень хочется использовать фреймворк без понимания того, как это работает "под капотом".

Answer 1

[Сергей Соловьев]

SSR - это когда сервер отдает уже готовый HTML без необходимости дополнительной загрузки скриптов и прочего. Т.е. статическая страница с формами.
Как это работает:
- Есть изначальная страница
- Клиент тыкает на кнопку
- Отправляется запрос на сервер
- Сервер отдает HTML страницу с уже данными и другой информацией

Что такое заполненные данные:
- Если это постраничный вывод списка, то уже готовая страница списка - при нажатии на "Следующая страница" сервер отдает HTML где есть эта следующая страница с захардожеными числами
- Если это таблица (tr/td/td), то полностью заполненная таблица

Нет здесь никакой магии.
P.S. js может быть, но смысл в том, что клиенту отдается уже готовая страница с заполненными данными.

Это может быть полезно в случаях:
- Когда выполнение js запрещено (безопасность)
- Когда конечные пк (пользователей) слабые для js
- Когда проще сделать так (например, ты не знаешь js)

Comments

[VolgaVolga]

Это может быть полезно в случаях:

- Когда необходимо SEO.

[mletov]

- Есть изначальная страница
- Клиент тыкает на кнопку
- Отправляется запрос на сервер
- Сервер отдает HTML страницу с уже данными и другой информацией

Когда кликает на кнопочку и обращается к серверу, либо submit для формы вызывает и происходит полная перезагрузка страницы, либо вызывает ajax.

У меня главное непонимание в том, как удается перегенерить исходники страницы без полной перезагрузки страницы.


Например, вот скрин. По консоли видно, что асинхронно подтягивается новый html с сервера.


Но если посмотреть исходный код страницы, то видно, что html код изменился на актуальный, согласно текущей странице. Хотя обычно такое только при полной перезагрузке

[Сергей Соловьев]

mletov, весь html генерируется на стороне сервера. Например, таблица полностью заполняется данными и отдается готовый tr/td, который просто нужно заменить.
Это можно сделать и на своей стороне - на все динамические элементы навесь id, когда пользователь жмает кнопку посылаешь запрос на сервер и он отдает готовый HTML - ты просто заменяешь содержимое страницы на то, что отдал сервер (ищешь по id).
Вот и все.

[Василий Банников]

без необходимости дополнительной загрузки скриптов и прочего

Не обязательно. Просто эти скрипты не участвуют в рендере изначального вида страницы.

[mletov]

Сергей Соловьев, хорошо, вот такой пример: по нажатию на кнопке вызвали

let response = await fetch('/ssr.html');
let text = await response.text();
document.write(text);

Допустим, у нас уже есть сгенеренная на сервере html страница ssr.html. Мы ее подтянули и заменили ее содержимым содержимое текущей страницы.

Но если мы посмотрим исходный код текущей страницы после изменений, то мы все равно увидим старое содержимое, которое было до вызова скрипта.

А Blazor и другие SSR фреймворки умудряются подменить и исходный код страницы тоже на полученный.
Поэтому он и хорош для SEO. И вот я пытаюсь понять как.

[Сергей delphinpro]

mletov, внешне все очень просто

• при первом запросе сервер генерирует полную html страницу с данными
  
• когда страница прилетает в браузер, начинают работать скрипты, при необходимости выполняется гидрация.
  
• при последующих кликах, на сервер отправляются ajax запросы, которые возвращают чистые данные, которые потом шаблонизируются прямо в браузере
  
• Когда сервер получает ajax запрос, он не делает полный рендер, а только достает данные и отправляет их клиенту.
  

[mletov]

при последующих кликах, на сервер отправляются ajax запросы, которые возвращают чистые данные, которые потом шаблонизируются прямо в браузере

Когда сервер получает ajax запрос, он не делает полный рендер, а только достает данные и отправляет их клиенту.

Сергей delphinpro,
Вот этот момент наиболее интересный.

Вот я, допустим, отправил ajax запрос со страницы test.html на сервер.
На сервере сделал что-то типа

string path = @".../test.html";
            string appendText = "This is extra text";
            System.IO.File.AppendAllText(path, appendText);

Как только браузер обнаруживает, что текст файла изменился, он производит полную перезагрузку страницу, а не частичную.