Задать вопрос
  • Как реализовать SSR без использования глобального хранилища (на примере Vue 3)?

    @allsilaevex Автор вопроса
    Стефан, не совсем понял Ваш вопрос... постараюсь описать.

    Можно считать, что у меня простейшее API, которое может только сохранять состав корзины и выдавать его. Страничка, на которой выводится список продуктов в корзине.
    Соотв. я получаю состав корзины; формат, надеюсь, не имеет значения... например
    {items: [{count: 3, product: "Product 1"}, {count: 1, product: "Product 2"}, {count: 4, product: "Product 3"}]}

    Подобные данные я получаю на сервере и рендерю страницу. Далее, если не производить корректной гидрации, клиент посылает такой же запрос к API и получает ровно такие же данные. (мне же хочется избежать повторного запроса)
  • Как реализовать SSR без использования глобального хранилища (на примере Vue 3)?

    @allsilaevex Автор вопроса
    Стефан,

    зачем вам гидрировать на стороне клиента, если вы можете собрать готовый html на сервере и вернуть его?

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

    ваш vue-server-renderer, берет просто template готовый, и отдает его, типо не голый body, а с какой то разметкой, по факту он ничего не рендерит на стороне сервера

    отнюдь, как раз таки на сервере из (код для примера)

    <div>
      <h3>Cart:</h3>
      <div>
        <div v-for="(item, idx) in items">
          {{ item.product.name }}
        </div>
      </div>
    </div>


    получится

    <div><h3>Cart:</h3><div><div>Product 1</div><div>Product 2</div><div>Product 3</div></div></div>


    что и пойдет на клиент. А дальше надо как-то оживить эту статику не делая доп. запросов к апи (данные то уже есть).
  • Как реализовать SSR без использования глобального хранилища (на примере Vue 3)?

    @allsilaevex Автор вопроса
    Стефан, в том, что я переслал, описывается как раз таки сценарий SSR: (далее по докам)

    Поскольку сервер уже отобразил разметку, мы, очевидно, не хотели бы её выбрасывать и заново создавать все элементы DOM. Вместо этого мы хотим «гидрировать» статическую разметку и сделать её интерактивной.


    Т.е. как Вы и описываете: сервер отдает не пустой html, а наполненный контентом. Только контент этот - статический, и приложение на клиенте не будет иметь состояния.

    Если кратко, то, Vue по дефолту, занимается всем на клиенте, но когда такое не возможно, (типо JS не работает), вступает в игру SSR.

    SSR, который реализован средствами vue (см. vue-server-renderer)

    Вы сами то знаете для чего вам SSR?

    Да, я прекрасно понимаю для чего мне нужен SSR. Так же, я вроде понимаю, как он работает. А у Вас такая уверенность есть? :)
  • Как реализовать SSR без использования глобального хранилища (на примере Vue 3)?

    @allsilaevex Автор вопроса
    Стефан, в официальной документации vue написано несколько иначе:

    Гидратация относится к процессу на стороне клиента, в течение которого Vue берёт статический HTML, отправленный сервером, и превращает его в динамический DOM, который может реагировать на изменения данных на стороне клиента.


    можете, пожалуйста, уточнить где я ошибаюсь?
  • Как реализовать SSR без использования глобального хранилища (на примере Vue 3)?

    @allsilaevex Автор вопроса
    Спасибо за рекомендацию, но Nuxt меня не интересует (+ он использует Vuex).

    А причем у вас Vuex и SSR?

    Возможно мне не удалось донести основной вопрос, постараюсь пояснить на примере.
    У меня есть страничка с корзиной и продуктами. Состав корзины и сами продукты я получаю из апи.
    Получается, при SSR у меня на сервере рендерится страничка (уходят запросы к апи, строится html) и после уходит на клиент. Далее, на клиенте должна произойти гидрация приложения. Но на клиенте нет данных, которые были получены на сервере и из-за этого на апи уходят повторные запросы. С помощью Vuex я могу решить это проблему: на сервере внедрять стейт хранилища в страницу, а на клиенте подтягивать сохраненный стейт. Т.о. запросы к апи уйдут только один раз.
    А как решить эту проблему без глобального хранилища?
  • Как гарантировать наличие метода в наследнике без привязки к аргументам?

    @allsilaevex Автор вопроса
    Евгений Ромашкан, а каким образом это меня избавит от копипасты кода? То, что в моем примере в базовом классе, надо будет описывать в каждом отдельном классе без общего родителя.
    Перед классами стоят разные задачи, верно, но "сервисный функционал" (логи, вывод, etc.) у этих задач будет идентичный.
  • Как гарантировать наличие метода в наследнике без привязки к аргументам?

    @allsilaevex Автор вопроса
    Евгений Ромашкан, я понимаю, что это вряд ли хороший подход, но интересно как сделать более грамотно.

    Пусть это будут разные контакты и всё.

    можете пожалуйста чуть подробнее пояснить, что под этим подразумевается?
  • Как гарантировать наличие метода в наследнике без привязки к аргументам?

    @allsilaevex Автор вопроса
    Спасибо за ответ. Речи о переменном кол. аргументов и не идет, не хочется терять нативную возможность проверки типов аргументов.
    Классы для логгирования, вывода инфы и т.д. именно в конструкторе (по заветам di) и передаются. Я же имею ввиду аргументы, которые могут понадобится конкретной задаче, например: задача выбора данных из бд с некой обработкой; аргументы - название таблицы и функция обработчик (уточню, пример надуманный).
    С радостью бы хотел изменить архитектуру, но не приходит в голову как грамотно оформить такой функционал иначе
    abstract class MyBase
    {
        protected $dependencies = [];
    
        public function __construct(ConsoleOutput $consoleOutput, Logger $logger)
        {
            $this->logger        = $logger;
            $this->consoleOutput = $consoleOutput;
        }
    
        public function runMyMethod(array $params = [])
        {
            $this->consoleOutput->print('start at ' . microtime(true));
    
            $result = $this->myMethod(...$params);
    
            $this->consoleOutput->print('end at ' . microtime(true));
    
            return $result;
        }
    
        public function __call(string $name, array $arguments)
        {
            $class = $this->dependencies[$name];
    
            /**
             * @var MyBase $base
             */
            $base = new $class($this->consoleOutput, $this->logger);
    
            return $base->runMyMethod($arguments);
        }
    
        // abstract protected function myMethod();
    }
    
    class Foo extends MyBase
    {
        protected $dependencies = [
            'bar' => Bar::class,
        ];
    
        protected function myMethod()
        {
            $this->logger->log('Foo myMethod');
    
            return $this->bar('str', 5);
        }
    }
    
    class Bar extends MyBase
    {
        protected function myMethod(string $s, int $i)
        {
            $this->logger->log('Bar myMethod');
    
            return $s . ', ' . $i;
        }
    }
  • Понадобится ли 8+8-pin питание процессора для разгона Ryzen 1700x?

    @allsilaevex Автор вопроса
    hint000, katzen, спасибо большое за ответы! Буду пробовать.