react-streaming
Advanced tools
react-streaming - npm Package Compare versions
Comparing version 0.3.28 to 0.3.29
@@ -30,18 +30,13 @@ "use strict"; | ||
| function showWarning() { | ||
| const isVike = (0, utils_1.isVikeReactApp)(); | ||
| const link = isVike ? 'https://vike.dev/streaming' : 'https://github.com/brillout/react-streaming'; | ||
| const help = isVike | ||
| ? [ | ||
| picocolors_1.default.code('pageContext.userAgent'), | ||
| ' (typically with ', | ||
| picocolors_1.default.code("renderPage({ userAgent: req.headers['user-agent'] })"), | ||
| ', see https://vike.dev/renderPage)', | ||
| ].join('') | ||
| const isVikeReact = (0, utils_1.isVikeReactApp)(); | ||
| const link = isVikeReact ? 'https://vike.dev/streaming' : 'https://github.com/brillout/react-streaming'; | ||
| const help = isVikeReact | ||
| ? `the HTTP request headers with ${picocolors_1.default.code('renderPage({ headersOriginal })')}` | ||
| : picocolors_1.default.code('options.userAgent'); | ||
| const errMsg = [ | ||
| `HTML streaming (${link}) disabled because User Agent is unknown: make sure to provide`, | ||
| help, | ||
| '(so that HTML streaming can be disabled for bots such as Google Bot).', | ||
| `HTML streaming (${link}) disabled because the User-Agent request header is unknown: make sure to provide`, | ||
| `${help}.`, | ||
| 'The HTTP User-Agent request header is needed so that HTML streaming can automatically be disabled for bots and crawlers, see https://github.com/brillout/react-streaming#Bots for more information.', | ||
| ]; | ||
| if (!isVike) { | ||
| if (!isVikeReact) { | ||
| errMsg.push(`Or set ${picocolors_1.default.code('options.disable')} to ${picocolors_1.default.code('true')} to suppress this warning.`); | ||
@@ -48,0 +43,0 @@ } |
@@ -5,3 +5,3 @@ "use strict"; | ||
| const getGlobalObject_1 = require("./getGlobalObject"); | ||
| const PROJECT_VERSION = '0.3.28'; | ||
| const PROJECT_VERSION = '0.3.29'; | ||
| const projectInfo = { | ||
@@ -8,0 +8,0 @@ projectName: 'react-streaming', |
@@ -24,18 +24,13 @@ export { resolveSeoStrategy }; | ||
| function showWarning() { | ||
| const isVike = isVikeReactApp(); | ||
| const link = isVike ? 'https://vike.dev/streaming' : 'https://github.com/brillout/react-streaming'; | ||
| const help = isVike | ||
| ? [ | ||
| pc.code('pageContext.userAgent'), | ||
| ' (typically with ', | ||
| pc.code("renderPage({ userAgent: req.headers['user-agent'] })"), | ||
| ', see https://vike.dev/renderPage)', | ||
| ].join('') | ||
| const isVikeReact = isVikeReactApp(); | ||
| const link = isVikeReact ? 'https://vike.dev/streaming' : 'https://github.com/brillout/react-streaming'; | ||
| const help = isVikeReact | ||
| ? `the HTTP request headers with ${pc.code('renderPage({ headersOriginal })')}` | ||
| : pc.code('options.userAgent'); | ||
| const errMsg = [ | ||
| `HTML streaming (${link}) disabled because User Agent is unknown: make sure to provide`, | ||
| help, | ||
| '(so that HTML streaming can be disabled for bots such as Google Bot).', | ||
| `HTML streaming (${link}) disabled because the User-Agent request header is unknown: make sure to provide`, | ||
| `${help}.`, | ||
| 'The HTTP User-Agent request header is needed so that HTML streaming can automatically be disabled for bots and crawlers, see https://github.com/brillout/react-streaming#Bots for more information.', | ||
| ]; | ||
| if (!isVike) { | ||
| if (!isVikeReact) { | ||
| errMsg.push(`Or set ${pc.code('options.disable')} to ${pc.code('true')} to suppress this warning.`); | ||
@@ -42,0 +37,0 @@ } |
| export { projectInfo }; | ||
| import { getGlobalObject } from './getGlobalObject'; | ||
| const PROJECT_VERSION = '0.3.28'; | ||
| const PROJECT_VERSION = '0.3.29'; | ||
| const projectInfo = { | ||
@@ -5,0 +5,0 @@ projectName: 'react-streaming', |
| { | ||
| "name": "react-streaming", | ||
| "description": "React 18 Streaming. Full-fledged & Easy.", | ||
| "version": "0.3.28", | ||
| "version": "0.3.29", | ||
| "peerDependencies": { | ||
@@ -69,3 +69,3 @@ "react": ">=18", | ||
| "@brillout/part-regex": "^0.1.2", | ||
| "@brillout/release-me": "^0.2.2", | ||
| "@brillout/release-me": "^0.3.8", | ||
| "@types/node": "^15.12.2", | ||
@@ -80,3 +80,2 @@ "@types/react": "^18.0.9", | ||
| }, | ||
| "packageManager": "pnpm@8.15.4", | ||
| "files": [ | ||
@@ -83,0 +82,0 @@ "dist/", |
@@ -22,7 +22,10 @@ <p align="center"> | ||
| - [Why Streaming](#why-streaming) | ||
| - [Get Started](#get-started) | ||
| - Usage | ||
| - [Get Started](#get-started) | ||
| - [Options](#options) | ||
| - [Bots](#Bots) | ||
| - [Error Handling](#error-handling) | ||
| - [`useAsync()`](#useasync) | ||
| - [Get Started (Library Authors)](#get-started-library-authors) | ||
| - Usage (Library Authors) | ||
| - [Overview](#overview) | ||
| - [`useAsync()` (Library Authors)](#useasync-library-authors) | ||
@@ -52,3 +55,3 @@ - [`injectToStream()`](#injecttostream) | ||
| pipe, // Node.js (Vercel, AWS EC2, ...) | ||
| readable // Edge (Coudflare Workers, Deno Deploy, Netlify Edge, Vercel Edge, ...) | ||
| readable // Edge (Cloudflare Workers, Deno Deploy, Netlify Edge, Vercel Edge, ...) | ||
| } = await renderToStream(<Page />) | ||
@@ -77,4 +80,6 @@ ``` | ||
| ## Get Started | ||
| ## Usage | ||
| ### Get Started | ||
| 1. Install | ||
@@ -92,3 +97,3 @@ | ||
| pipe, // Defined if running in Node.js, otherwise `null` | ||
| readable // Defined if running on the Edge (.e.g. Coudflare Workers), otherwise `null` | ||
| readable // Defined if running on Edge (e.g. Cloudflare Workers), otherwise `null` | ||
| } = await renderToStream(<Page />) | ||
@@ -114,4 +119,4 @@ ``` | ||
| - `google-speed`: Don't disable streaming for the Google Bot. | ||
| - Pro: Google ranks your website higher because the initial HTTP response is faster. (To be researched.) | ||
| - Con: Google will likely not wait for the whole HTML, and therefore not see it. (To be tested.) | ||
| - Pro: Google may ([to be researched](https://github.com/brillout/react-streaming/issues/39)) rank your website higher because the initial HTTP response is faster. | ||
| - Con: Google may ([to be researched](https://github.com/brillout/react-streaming/issues/39)) not await the HTML stream (see [Bots](#Bots)). | ||
| - Custom SEO strategy: use `options.disable`. For example: | ||
@@ -131,3 +136,3 @@ | ||
| - `options.userAgent?: string`: The HTTP User-Agent request header. (Needed for `options.seoStrategy`.) | ||
| - `options.userAgent?: string`: The HTTP [User-Agent request header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent). (Needed for `options.seoStrategy`.) | ||
| - `options.webStream?: boolean`: In Node.js, use a Web Stream instead of a Node.js Stream. ([Node.js 18 released Web Streams support](https://nodejs.org/en/blog/announcements/v18-release-announce/#web-streams-api-experimental).) | ||
@@ -153,2 +158,20 @@ - `options.streamOptions`: Options passed to React's [`renderToReadableStream()`](https://react.dev/reference/react-dom/server/renderToReadableStream#parameters) and [`renderToPipeableStream()`](https://react.dev/reference/react-dom/server/renderToPipeableStream#parameters). Use this to pass `nonce`, bootstrap scripts, etc. It excludes error handling options, use [Error Handling](#error-handling) instead. | ||
| ### Bots | ||
| By default, `react-streaming` disables streaming for bots and crawlers, such as: | ||
| - The [Google Bot](https://developers.google.com/search/docs/crawling-indexing/googlebot), which crawls the HTML of your pages to be able to show a preview of your website on Google's result pages. | ||
| - The bot of social sites (Twitter/Instagram/WhatsApp...), which crawl the HTML of your pages to be able to show a preview of your website when it's shared on Twitter/Instagram/WhatsApp/... | ||
| > [!NOTE] | ||
| > These bots explore your website by navigating the HTML of your pages. It isn't clear what bots do when they encounter an HTML stream ([to be researched](https://github.com/brillout/react-streaming/issues/39)); it's therefore safer to provide bots with a fully rendered HTML at once that contains all the content of your page (i.e. disable HTML streaming) instead of hoping that bots will await the HTML stream. | ||
| For `react-streaming` to be able to determine whether a request comes from a bot or a real user, you need to provide <a href="https://github.com/brillout/react-streaming#:~:text=disable%20%7D)-,options.userAgent,-%3F%3A%20string%3A%20The%20HTTP">`options.userAgent`</a>. | ||
| > [!NOTE] | ||
| > If you use [Vike](https://vike.dev) with [`vike-react`](https://github.com/vikejs/vike-react), you can simply set [`renderPage({ headersOriginal })`](https://vike.dev/renderPage#:~:text=the%20HTTP%20Headers-,headersOriginal,-%3A%20req.headers%2C) instead. (The [User-Agent request header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent) will then automatically be passed to `react-streaming`). | ||
| You can implement a custom strategy, see <a href="https://github.com/brillout/react-streaming#:~:text=%3CSupsense%3E.)-,options.seoStrategy,-%3F%3A%20%27conservative%27%20%7C%20%27google%2Dspeed">`options.seoStrategy`</a>. | ||
| ### Error Handling | ||
@@ -210,4 +233,4 @@ | ||
| // This component is isomorphic: it works on both the client-side and server-side. | ||
| // The data fetched while SSR is automatically passed and re-used on the client for hydration. | ||
| // This component is isomorphic: it works on both the client-side and server-side. The | ||
| // data fetched during SSR is automatically passed and re-used on the client-side. | ||
| function Movie({ id }) { | ||
@@ -237,11 +260,13 @@ const key = [ | ||
| ## Get Started (Library Authors) | ||
| ## Usage (Library Authors) | ||
| `react-streaming` enables you to suspend React rendering and await something to happen. (Usually data fetching.) | ||
| ### Overview | ||
| `react-streaming` enables you to suspend the React rendering and await for something to happen. (Usually data fetching.) | ||
| The novelty here is that it's isomorphic: | ||
| - It works on the client-side, as well as on the server-side (while Serve-Side Rendering). | ||
| - It works on the client-side as well as on the server-side (while Serve-Side Rendering). | ||
| - For hydration, data is passed from the server to the client. (So that data isn't loaded twice.) | ||
| You have the choice between three methods: | ||
| You have the choice between: | ||
@@ -265,3 +290,3 @@ - `useAsync()`: High-level and easy. | ||
| const key = ['some', 'invalidating', 'values'] | ||
| // `useAsync()` suspends rendering until the promise returned by `someAsyncFunc()` resolves. | ||
| // useAsync() suspends rendering until the promise returned by someAsyncFunc() resolves | ||
| const value = useAsync(key, someAsyncFunc) | ||
@@ -268,0 +293,0 @@ assert(value === 'someData') |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.44%
141856
- Number of lines in readme file
- increased by7.91%
341
Worsened metrics
- Lines of code
- decreased by-0.33%
3003
No dependency changes