tropical-islands

2.0.0 • Public • Published

tropical-islands

Simple islands architecture helpers for React. Built for Tropical but usable wherever you use React.

npm install tropical-islands

Islands Architecture

Islands Architecture refers to the old-fashioned practice of selectively, progressively enhancing bits of server-rendered HTML with client-side JS.

The React community has taken a while to get here. Major frameworks defaulted to downloading and hydrating the entire page as a single root-level component, even if most components that make up the page needed no client-side enhancements.

Instead we can take a partial hydration approach, selectively hydrating the parts of the page that need it.

Usage

Server: <Island>

When composing server-rendered (SSR) pages, draw islands around pieces of the page that need to be hydrated with client-side JS.

import { Island } from 'tropical-islands'
import { InteractiveComponent } from './InteractiveComponent'
import { StaticComponent } from './StaticComponent'

export function MyPage () {
  <div>
    <StaticComponent />
    <Island componentName='InteractiveComponent'>
      <InteractiveComponent some='props' />
    </Island>
    <StaticComponent />
  </div>
}

<Island> renders your component inside a div with some data attributes that will be used for client-side hydration:

<div>
  <!-- StaticComponent server-rendered here -->
  <div
    data-tropical-hydration-component='InteractiveComponent'
    data-tropical-hydration-props='{"some": "props"}'
  >
    <!-- InteractiveComponent server-rendered here -->
  </div>
  <!-- StaticComponent server-rendered here -->
</div>

Props

  • componentName (required) the name of the component in the object passed to hydrateIslands
  • islandTag (optional, default: 'div') the HTML wrapper tag
  • islandProps (optional, default: {}) props to pass to islandTag for server-render

Client: hydrateIslands(components, Providers)

From your client-side JS, call hydrateIslands with an object listing all the components you wish to hydrate.

import { hydrateIslands } from 'tropical-islands'
import { InteractiveComponent } from './InteractiveComponent'
import { OtherInteractiveComponent } from './OtherInteractiveComponent'

hydrateIslands({
  InteractiveComponent,
  OtherInteractiveComponent
})

Arguments

  • components (required) an object containing components, keyed by the componentName passed to a server-side <Island>
  • Providers (optional, default: ({ children }) => children) a component that doesn't render any HTML but can be used to wrap your own component with context providers.

Readme

Keywords

Package Sidebar

Install

npm i tropical-islands

Weekly Downloads

5

Version

2.0.0

License

MIT

Unpacked Size

7.63 kB

Total Files

6

Last publish

Collaborators

  • bensmithett