Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

use-sse

Package Overview
Dependencies
Maintainers
1
Versions
18
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

use-sse

useSSE - use server-side effect

  • 2.0.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
4.9K
decreased by-13.97%
Maintainers
1
Weekly downloads
 
Created
Source

useSSE

useSSE npm version Node.js CI

useSSE is abbreviation for use server-side effect. It is a custom React hook to perform asynchronous effects both on client and serve side.

npm i use-sse

Usage

Use useSSE to fetch data in component:

import React from "react";
import { useSSE } from "use-sse";

const MyComponent = () => {
  const [data, error] = useSSE(() => {
    return fetch("https://myapi.example.com").then((res) => res.json());
  }, []);

  return <div>{data.title}</div>;
};

All effects will be resolved on server side during rendering.

This is a part of server side render phase. Se an example for the whole code.

const { ServerDataContext, resolveData } = createServerContext();

// We need to render app twice.
// First - render App to reqister all effects
renderToString(
  <ServerDataContext>
    <App />
  </ServerDataContext>
);

// Wait for all effects to finish
const data = await resolveData();

// Inject into html initial data
res.write(data.toHtml());

// Render App for the second time
// This time data form effects will be avaliable in components
const htmlStream = renderToNodeStream(
  <ServerDataContext>
    <App />
  </ServerDataContext>
);

On client side of application use BroswerDataContext:

// This will create context will all data fetched during server side rendering
const BroswerDataContext = createBroswerContext();

hydrate(
  <BroswerDataContext>
    <App />
  </BroswerDataContext>,
  document.getElementById("app")
);

API

useSSE

const [data, error] = useSSE(effect, dependencies);
Params
paramtyperequireddescriptionexample
effect() => Promise<any>trueeffect function returning promise which resolves to data() => fetch('example.com').then(res=>res.json())
dependenciesany[]falselist of dependencies like in useEffect[]
Returns

Returns an array with two elements [data, error].

  • data - resolved response from effect
  • error - an error if effect rejected or if timeout happend.

createServerContext()

Creates server side context.

const { ServerDataContext, resolveData } = createServerContext();
Returns

ServerDataContext - React context provider component.

<ServerDataContext>
  <App />
</ServerDataContext>

resolveData - function to resolve all effects.

const data = await resolveData(timeout);
paramtyperequireddefault valuedescription
timeoutnumberfalseundefinedmax number of ms to wait for effects to resolve

data is an object containing value of context.

Calling data.toHtml(variableName) will return a html script tak with stringified data:

paramtyperequireddefault valuedescription
variableNamestringfalse_initialDataContextname of global variable
data.toHtml();
// "<script>window._initialDataContext = { context data };</script>"

Both should be used in server side render function.


createBroswerContext()

Creates client side context.

createBroswerContext(variableName);
params
paramtyperequireddefault valuedescription
variableNamestringfalse_initialDataContextname of global variable
returns

BroswerDataContext - React context provider for client side application

<BroswerDataContext>
  <App />
</BroswerDataContext>

Examples

See example directory for React with SSR and useSSE.

The same example is avaliable on CodeSandbox.

Keywords

FAQs

Package last updated on 04 Dec 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc