{"id":26182643,"url":"https://github.com/grassator/react-stasis","last_synced_at":"2025-06-12T12:36:04.593Z","repository":{"id":57345257,"uuid":"68242893","full_name":"grassator/react-stasis","owner":"grassator","description":"Universally (isomorphically) render parts of your react tree only on backend","archived":false,"fork":false,"pushed_at":"2016-10-12T18:01:04.000Z","size":9,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-05-15T00:56:17.010Z","etag":null,"topics":["isomorphic","partial","react"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/grassator.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-14T21:00:10.000Z","updated_at":"2021-03-18T21:46:53.000Z","dependencies_parsed_at":"2022-08-28T03:51:11.794Z","dependency_job_id":null,"html_url":"https://github.com/grassator/react-stasis","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/grassator/react-stasis","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grassator%2Freact-stasis","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grassator%2Freact-stasis/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grassator%2Freact-stasis/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grassator%2Freact-stasis/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/grassator","download_url":"https://codeload.github.com/grassator/react-stasis/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grassator%2Freact-stasis/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259465804,"owners_count":22862185,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["isomorphic","partial","react"],"created_at":"2025-03-11T22:23:36.392Z","updated_at":"2025-06-12T12:36:04.549Z","avatar_url":"https://github.com/grassator.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-stasis\n\nUniversal (isomorphic) rendering is one of the benefits of using React. Often times, however, a large portion of the page is static, so ideally you would want to to render it on the server, but not worry about it on the client side.\n\nUnfortunately when React checks if the markup can be reused on the client side, it's currently impossible to tell it to ignore a certain subtree. That means that if you are unable to replicate DOM *exactly*, reconciliation will fail.\n\nThis is where `react-stasis` comes in. This package allows to you to only render part of the React tree on the server thus possibly reducing data sent to the client and the app initialization time.\n\nIn case you want some dynamic elements somewhere deep inside your static tree, `react-stasis` has you covered with a [portal functionality](#portals)\n\n## Basics\n\n`react-stasis` provides a wrapper around `react-dom` APIs, so usually on the server side you just need to install `react-stasis` NPM package and then change `react-dom/server` import to `react-stasis/server`.\n\nOn the client side you also need change the import of `react-dom` to `react-stasis`.\n\nIn the React application itself, the only thing you need to do is to wrap a static subtree in a `Static` component provided by `react-stasis` and only include it's children on the server-side:\n\n```jsx\nconst {Component} = require('react');\nconst {Static, render} = require('react-stasis');\n\nclass MyApp extends Component {\n    render() {\n        return \u003cdiv\u003e\n            \u003cdiv\u003eSome dynamic part of your app\u003c/div\u003e\n            \u003cStatic\u003e\n                {this.renderStatic()}\n            \u003c/Static\u003e\n        \u003c/div\u003e\n    }\n    renderStatic() {\n        // this can be used for example by webpack\n        // to exclude the statis part from the bundle\n        // if you use https://webpack.github.io/docs/list-of-plugins.html#defineplugin\n        if (process.env.TARGET === 'browser') {\n            return null;\n        } else {\n            const MyStaticComponent = require('./my-static-component');\n            return \u003cMyStaticComponent someFoo=\"bar\"/\u003e;\n        }\n    }\n}\n```\n\n## Portals\n\nPortals allow you to have some dynamic React components inside your sub tree. A good example would be a slider with images in a long page of text. Here's how it will roughly look like:\n\n\n```jsx\nconst {Component} = require('react');\nconst {Static, Portal, render} = require('react-stasis');\n\nclass MyApp extends Component {\n    render() {\n        return \u003cdiv\u003e\n            \u003cdiv\u003eSome dynamic part of your app\u003c/div\u003e\n            \u003cStatic\u003e\n                {this.renderStatic(\n                    \u003cMySlider /\u003e\n                )}\n            \u003c/Static\u003e\n        \u003c/div\u003e\n    }\n    renderStatic(slider) {\n        // this can be used for example by webpack\n        // to exclude the statis part from the bundle\n        // if you use https://webpack.github.io/docs/list-of-plugins.html#defineplugin\n        const portal =\n            \u003cPortal name=\"slider\"\u003e\n                \u003cMySlider /\u003e\n            \u003c/Portal\u003e\n        if (process.env.TARGET === 'browser') {\n            return portal;\n        } else {\n            const MyStaticComponent = require('./my-static-component');\n            return \u003cMyStaticComponent someFoo=\"bar\"\u003e\n                {portal}\n            \u003c/MyStaticComponent\u003e;\n        }\n    }\n}\n```\n\nThe example above only assumes that `MyStaticComponent` can accept Slider as a child and knows where to place it in the content.\n\n## Fully Working Example\n\nTo see a fully-working example, but which is really bare bones (without a server-side framework or a bundler) you can take a look at the [example folder](https://github.com/grassator/react-stasis/tree/master/example).\n\nYou can also clone this repo and then run:\n\n```bash\nnpm install\nnpm run example\n```\n\nand see how it works out in the browser.\n\n\u003e You shouldn't use this example as a starting point for your React app — look at [react-create-app](https://github.com/facebookincubator/create-react-app) instead.\n\n## Known issues\n\n* Using `react-stasis` just in the browser will result in an error.\n\n* Nested `Static` components are not supported at the moment and will result in an error in the browser. \n\n* Due to a difference in reported markup between browser-generated `innerHTML` and what `ReactDOM.renderToStaticMarkup` generates, `react-stasis` has to go a global replace `/\u003e` to `\u003e`, so if you have some html markup as text (static data) in your app, it might be affected. If you don't need to render, it's recommended to escape this markup beforehand.\n\n## `Static` component props\n\n* `component: React.Component | string`\n* `props: object`","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrassator%2Freact-stasis","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgrassator%2Freact-stasis","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrassator%2Freact-stasis/lists"}