Рендеринг на стороне сервера с помощью viperHTML - PullRequest
Новая
       36

Рендеринг на стороне сервера с помощью viperHTML

0 голосов
/ 07 сентября 2018

Я работаю над приложением Symfony и только что получил SSR для JS, работающий с использованием https://github.com/spatie/server-side-rendering. До сих пор я работал только с "готовыми" решениями SSR для React, но в настоящее время я пытаюсь использовать hyperHTML / viperHTML и я столкнулся с несколькими проблемами, которые я до сих пор не смог решить, просмотрев доступные документы / примеры.

Мой текущий тестовый фрагмент: 

const viperHTML = require('viperhtml');

class Component extends viperHTML.Component {    
    constructor(props) {
        super();
        this.props = props;
    }

    render() {
        return this.html`
      <h1>Hello, ${this.props.name}</h1>`;
    }
}

console.log(new Component({ name: 'Joe' }).render().toString());

Дело в том, что без явного вызова render() я не получаю вывод. Глядя на некоторые официальные примеры, в этом нет необходимости, по крайней мере, с Component. Например, я уже пытался использовать setState() в конструкторе, но без разницы.

Кроме того, без использования обоих, console.log() и toString(), я тоже не получаю вывод. Что неожиданно. Я понимаю, что toString() здесь может быть необходимо (без него <buffer /> визуализируется), но console.log() кажется странным. Конечно, это может вообще не быть связано с viperHTML. Но создание экземпляра компонента - единственное, что, как я ожидал, понадобится.

Мне также пока не ясно, как я могу написать изоморфный / универсальный компонент, то есть один файл с разметкой, обработчиками событий и т. Д., Который визуализируется на сервере, а затем обрабатывается на клиенте. Когда я добавляю встроенный обработчик событий согласно документам (https://viperhtml.js.org/hyperhtml/documentation/#essentials-6)), он фактически вставляется в отображаемую разметку, а это не то, что мне нужно. Я проверил hypermorphic и приложение viperNews, но это мне пока не помогло.

1 Ответ

0 голосов
/ 10 сентября 2018

Если это поможет, вы можете прочитать тесты viperHTML , чтобы узнать, как можно использовать компоненты.

Дело в том, что без явного вызова render () я не получаю вывод.

Компоненты предназначены для визуализации макета на сервере или на стороне клиента. Это означает, что если вы передаете экземпляр компонента в представление hyper / viperHTML, вам не нужно беспокоиться о вызове, это сделано для вас. 

const {bind, Component} = require('viperhtml');

class Hello extends Component {    
  constructor(props) {
    super().props = props;
  }
  render() {
    return this.html`<h1>Hello, ${this.props.name}</h1>`;
  }
}

console.log(
  // you need a hyper/viperHTML literal to render components
  bind({any:'ref'})`${Hello.for({ name: 'Joe' })}`
    // by default you have a buffer to stream in NodeJS
    // if you want a string you need to use toString()
    .toString()
);

Поскольку NodeJS по умолчанию использует потоковые буферы, любая компоновка, созданная viperHTML, будет буферами и, как таковая, может передаваться в потоковом режиме, пока она составлена ​​(т.е. с Promises в качестве значений интерполяции).

Мне также пока не ясно, как я могу написать изоморфный / универсальный компонент, т. Е. Один файл с разметкой, обработчиками событий и т. Д., Который визуализируется на сервере, а затем обрабатывается на клиенте.

В оригинальной версии hyperHTML был метод под названием adopt(), целью которого было гидрировать живые узлы через одни и те же литералы шаблона.

В то время как viperHTML имеет переключатель viperhtml.adoptable = true для рендеринга приемлемого контента, функция hyperHTML adopt все еще еще не совсем там , так что в настоящее время вы можете легко обмениваться представлениями между SSR и FE, но вам нужно либо вступить во владение клиентом после того, как страница SSR приземлилась, либо среагировать, в первый раз, по-другому, и вступить во владение клиентом на расстоянии.

Это не оптимально, но я боюсь, что бит гидратации, сделанный правильно, занимает много времени, и я не нашел такого времени, чтобы завершить его и отправить его.

На данном этапе это может быть hyperHTML v3.

Надеюсь, этот ответ помог понять, как работает viperHTML и каков текущий статус.

...