@JeanPaulBelmondo

Правильно ли рендерить вёрстку на сервере?

Сразу уточню - полного доступа к фронту нет, к витрине магазина подключается отдельный скрипт - который уже делает апи запросы и тд (это script tag у shopify).

Мне нужно отрисовать виджет, варианта это сделать два:
1) При получении апи запроса, на основе настроек рендерится html и css, которые возвращаются и вставляются в dom-дерево.
После вставки уже на нативном js найти нужные элементы и повесить на них функционал, клики и тд.
2) C сервера возвращать только параметры, на фронте же рендерить виджет через реакт.

в 1м случае мы получаем более тяжёлые запросы, но меньший размер бандла js, так как там нет react и в целом по минимуму зависимостей.

во 2м, максимально лёгкие запросы, но более тяжёлые виджеты, так как каждый виджет будет тащить с собой реакт (всего виджетов 6-7, каждый это отдельный скрипт).

какой вариант будет правильней, и что в итоге будет предпочтительней пользователю? на ваш взгляд конечно же.
  • Вопрос задан
  • 257 просмотров
Решения вопроса 1
@Kirill-Gorelov
С ума с IT
Я бы ответил так.

Можно применить оба решения, и рендерить и возвращать сразу верстку, кстати, если ты посмотришь какой либо маркетплейс, то там они возвращают готовую верстку, просто вставляют ее в нужное место. И так же сделать через JS, отрисовывать нужный тебе виджет. У обоих решений есть и плюсы и минусы, нужно уметь в них разбираться и понимать какой из способов лучше подойдет именно тебе здесь и сейчас.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
gzhegow
@gzhegow
aka "ОбнимиБизнесмена"
Позвольте поправить.

Это не "правильно", это "возможно".

Использование API уменьшает число данных в одном запросе, но заставляет вас делать авторизацию, делать всевозможные защиты. Если у вас есть фронтенд, который так и так делает запросы асинхронные (fetch/$.ajax), то разумнее конечно возвращать данные.

С другой стороны, если ваш фронтенд не умеет в виртуальное дом-дерево (у вас не фреймворк, а нативный яваскрипт) - то при первой отдаче страницы в конце html вы можете отправить
<template id="mytemplate"><div>{{data}}</div></template>
, чтобы его схватить яваскриптом и генерировать верстку на основе него.

Делать апи запрос, который возвращает html - это возможно, но это не то что "неправильно", это вы соединяете две задачи, каждая из которых может в будущем быть дополнена, в одну - и усложняете доработку в итоге. Если они по отдельности - доделать это проще. Апи запрос может быть использован где-то еще, если с версткой - то нет. Верстка же может быть изменена под новую тему оформления, если вместе - то сложнее.

Считается, что доделывать должно быть легко, поэтому это "неправильно".

Но вернуть верстку первым запросом когда человек только на сайт вошел - это нормальная практика и так было, пока было мало фронтенд фреймворков, в которых верстка вшивается в код самого фронтенда. Пока люди использовали handlebars/jquery это было нормально и вполне работало, а главное - не требовался специалист, который знает конкретный фреймворк, т.к. верстку знает большинство.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы