使用viperHTML进行服务器端渲染

Question

我正在研究一个Symfony应用程序，并且正在使用https://github.com/spatie/server-side-rendering为JS工作获得SSR。到目前为止，我只使用React的“现成的”SSR解决方案，但目前我正在尝试使用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应用程序，但到目前为止这对我没有帮助。

Answer 1

如果它有帮助，你可以read viperHTML tests看看如何使用组件。

这里的事情是没有显式调用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功能仍然是not quite there yet，因此，目前，您可以轻松地在SSR和FE之间共享视图，但是您需要在SSR页面上接管客户端已经第一次登陆或做出反应，并以不同的方式接管客户。

这不是最佳选择，但我担心水合作用是正确的，耗费时间，而且我还没有找到时间来完成它并运送它。

那时可能是hyperHTML v3。

我希望这个答案有助于理解viperHTML的工作原理以及当前状态。