Классический Single Page App (SPA), который генерирует наш фреймворк, — это один
index.html с .css и .js .Т.е. когда пользователь откроет адрес
…/about-us — мы ему отдадим наш index.html, который загрузит .js, который уже отрендерит about-us страничку. Ещё хуже обстоят дела когда нам нужно отрисовать, например, список постов, которые нужно взять на сервере: index.html → main.js → xhr:/api/posts → Render . Это особенно нехорошо, если нам нужно чтобы сайт попадал в google. А юзер, посмотря секунду на наш fancy loading indicator, может устать и уйти на другой сайт.Как решить эти проблемы? Конечно сделать фреймворки фреймворков (ну, или "компиляторы компиляторов")!
В зависимости от типа приложения, есть два основных подхода: SSR и SSG. Рассмотрим их по отдельности:
SSR (server side rendering) — означает что в ответ на запрос определённой страницы, мы на сервере отрисуем и отдадим полностью готовый
.html, который браузер сразу же готов отрисовать. Обычно, после того как у клиента отрисовалась страница, мы подгружаем наше .js, оживляем отрисованный html (hydration) и переводим сайт в режим CSR'а (client side rendering) — так для навигации по страницам сайта клиенту уже не нужно будет ждать ответ сервера. SSR предполагает наличие рантайм движка на сервере (вроде nodejs) и может генерировать страницы с контекстом пользователя (например, ваш wish list на e-commerce сайте). Некоторые фреймворки (по крайней мере, Next и Nuxt) разрешают написать функцию, которая получит данные для нашей компоненты, но будет выполнена только на сервере и вообще не будет загружаться на клиента. Например, получит список товаров из нашего внутреннего API — клиент эту функцию загружать не будет, а просто получит список товаров.SSG (server side generation) — похоже на SSR, только мы заранее генерируем
.html файлы на сервере и просто отдаём их как статику. Для этого мы должны заранее знать какие страницы пользователь может запросить. Например, мы можем сгенерировать все страницы со статьями для нашего блога. SSG для работы должен знать список URL, которые ему нужно отрендерить. Некоторые фреймворки предоставляют краулер, который запустит наш сайт и сам соберёт все доступные URL, для которых нужно сгенерировать .html. SSG хорошо работает с CDN, которые могут сильно сократить время начальной загрузки.Такие фреймворки размывают границу между front-end и back-end, расширяют границы где наши приложения могут и должны запускаться.
В целом, SSR и SSG — это набор инструментов и API над нашими "клиентскими" JS фреймворками.
Оставляйте свои комментарии и подключайтесь к math.random коммьюнити — мы любим говорить о технологиях.
———
Для почитать: jamstack.org
Для поковыряться:
React: Next, Gatsby, Blitz, React Server Components
Vue: Nuxt, Gridsome
Svelte: SvelteKit
Angular: Scully
Ещё: Astro — он для всех.
#thematicweek #frameworksweek