tropical-islands
v2.0.0
Published
Simple islands architecture helpers for React
Downloads
17
Readme
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 tohydrateIslands
islandTag
(optional, default:'div'
) the HTML wrapper tagislandProps
(optional, default:{}
) props to pass toislandTag
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 thecomponentName
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.