Ara Framework

Ara Framework

  • Docs
  • Blog
  • GitHub

›Nova Bindings

Getting Started

  • Nova architecture (Universal Rendering)
  • Nova architecture (Client-Side Rendering)
  • Quick Start
  • Render views on page

Tools

  • Nova Proxy
  • Nova Cluster

Nova Directives

  • Handlebars
  • Jinja2
  • Laravel Blade

Nova Bridge

  • What is it?
  • React
  • Vue.js

Nova Bindings

  • React
  • Vue.js
  • Angular
  • Svelte
  • Preact
Edit

Nova Preact

Preact bindings for Hypernova.

Install package

npm install hypernova-preact

Usage

The bindings for hypernova render the Nova views on the server and hydrate them on the browser to make them interactive. It's also know as Univeral Rendering.

Server Side

On the server, wraps the component in a function to render it to a HTML string given its props.

import hypernova from 'hypernova/server';
import { renderPreact } from 'nova-preact';

import Example from './components/Example';

hypernova({
  getComponent(name) {
    if (name === 'Example') {
      return renderPreact(name, Example);
    }

    return null;
  }
});

Client Side

On the client, it scans the DOM for any server-side rendered instances of it. It then hydrate those components using the server-specified props.

import { renderReact } from 'nova-preact';

import Example from './components/Example';

renderPreact('Example', Example);

Generate Nova Service using Preact

Run new:nova command using the CLI

ara new:nova -t preact nova

Run it

Run Nova service on http://localhost:3000

yarn dev

Integrate it in your website using Nova Proxy, see details on page Render views on page.

← Svelte
  • Install package
  • Usage
    • Server Side
    • Client Side
  • Generate Nova Service using Preact
    • Run it
Ara Framework
Docs
Getting Started
Community
Stack OverflowTwitter
More
BlogGitHub
Follow @AraFramework
Copyright © 2020 Ara Framework