{"id":18091343,"url":"https://github.com/wildlyinaccurate/second","last_synced_at":"2025-06-20T14:35:37.914Z","repository":{"id":51696581,"uuid":"88263460","full_name":"wildlyinaccurate/second","owner":"wildlyinaccurate","description":"Framework for server-rendered React apps with declarative data fetching and opt-in client-side rendering.","archived":false,"fork":false,"pushed_at":"2023-05-22T01:07:06.000Z","size":354,"stargazers_count":41,"open_issues_count":5,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-11T15:52:13.737Z","etag":null,"topics":["browser","preact","react","second","server-rendering","universal","vdom-library"],"latest_commit_sha":null,"homepage":"https://wildlyinaccurate.com/introducing-second-a-framework-for-mostly-static-react-applications/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wildlyinaccurate.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-04-14T11:49:56.000Z","updated_at":"2023-07-27T12:02:13.000Z","dependencies_parsed_at":"2024-10-03T11:01:40.650Z","dependency_job_id":"16d4e4a3-ef5c-437f-b9f3-92e2061918bf","html_url":"https://github.com/wildlyinaccurate/second","commit_stats":{"total_commits":137,"total_committers":5,"mean_commits":27.4,"dds":0.07299270072992703,"last_synced_commit":"c2d88ce407608a3e81f9e0d5da0d10df25f7cc67"},"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"purl":"pkg:github/wildlyinaccurate/second","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wildlyinaccurate%2Fsecond","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wildlyinaccurate%2Fsecond/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wildlyinaccurate%2Fsecond/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wildlyinaccurate%2Fsecond/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wildlyinaccurate","download_url":"https://codeload.github.com/wildlyinaccurate/second/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wildlyinaccurate%2Fsecond/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260438984,"owners_count":23009269,"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":["browser","preact","react","second","server-rendering","universal","vdom-library"],"created_at":"2024-10-31T18:11:27.669Z","updated_at":"2025-06-20T14:35:32.900Z","avatar_url":"https://github.com/wildlyinaccurate.png","language":"JavaScript","readme":"# Second\n\n## ⚠️ This project is no longer maintained ⚠️\n\nMany of the features in Second are now available in the core React library, and as such Second will no longer be maintained. Thanks so much for your support!\n\n**[Read the blog post](https://wildlyinaccurate.com/introducing-second-a-framework-for-mostly-static-react-applications/)**\n\nSecond is a framework for building and rendering React components on the server. It provides a higher-order data component that enables UI components to declare their data dependencies. Second ensures that all data dependencies are met before completing a render cycle. Components that require interactivity in the browser can be dehydrated with their original props, and rehydrated in the browser.\n\n\u003e In traditional rock climbing, the second is the climber that ascends after the lead climber has placed protection on the route and created an anchor at the top. Seconding is typically much easier and safer than leading.\n\nSecond consists of several components:\n\n- [second-container](packages/second-container) - Higher-order component that enables UI components to declare their data dependencies. Integrates with second-fetcher to ensure components are only rendered once their data requirements have been met.\n- [second-fetcher](packages/second-fetcher) - Interprets and fulfils data requirements.\n- [second-renderer](packages/second-renderer) - A lightweight wrapper around any VDOM library that implements [`createElement()`](https://facebook.github.io/react/docs/react-api.html#createelement), [`renderToString()`](https://facebook.github.io/react/docs/react-dom-server.html#rendertostring), and optionally [`renderToStaticMarkup()`](https://facebook.github.io/react/docs/react-dom-server.html#rendertostaticmarkup). Can be integrated with second-fetcher to ensure all data requirements are met before completing the render cycle.\n- [second-dehydrator](packages/second-dehydrator) - Dehydrates a component's props and state so that it can be selectively rehydrated on the client.\n- [second-bundler](packages/second-bundler) - Experimental runtime stylesheet bundler.\n\n## Installation\n\n```\nnpm install --save second\n```\n\n## Getting started\n\nMake sure you first install a VDOM library with a React-compatible API. For example, install React with `npm install --save react react-dom`.\n\n```js\nconst VDom = require('react')\nconst VDomServer = require('react-dom/server')\nconst second = require('second')\n\nsecond.init({ VDom, VDomServer })\n\nconst Component = require('./your-react-component')\nconst props = {}\n\nsecond.render(Component, props).then(content =\u003e\n  console.log('Output:', content)\n)\n```\n\nUse the higher-order container component to declare data requirements:\n\n```js\n// your-react-component.js\nconst React = require('react')\nconst second = require('second')\n\nconst WrappedComponent = require('./other-component')\n\nmodule.exports = second.createContainer(WrappedComponent, {\n  data: (props) =\u003e ({\n    // Each key is provided to the wrapped component as a prop\n    repo: {\n      // Use props to programmatically fetch data\n      uri: `https://api.github.com/repos/${props.repoName}`,\n\n      // Optionally extract only the response properties that you need, to reduce\n      // the amount of data that is sent to the browser\n      pick: ['name', 'url', 'stargazers_count']\n    },\n\n    contributors: {\n      uri: `https://api.github.com/repos/${props.repoName}/contributors`\n    }\n  })\n})\n```\n\nDehydrate components to prepare them for rehydration on the client:\n\n```jsx\n// sub-component.js\nconst React = require('react')\nconst second = require('second')\n\nclass SubComponent extends React.Component {\n  render () {\n    // ...\n  }\n}\n\nmodule.exports = second.dehydrate(SubComponent)\n\n\n// main-component.js\nconst React = require('react')\nconst SubComponent = require('./sub-component')\n\nmodule.exports = class MainComponent extends React.Component {\n  render () {\n    return (\n      \u003cdiv\u003e\n        \u003cSubComponent prop1=\"foo\" prop2=\"bar\"\u003e\n          \u003cspan\u003eChildren will be dehydrated as well!\u003c/span\u003e\n        \u003c/SubComponent\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n```\n\n### Example application\n\nFor a more complete example of a Second application, see [example-simple-api](packages/example-simple-api).\n\n## Contributing\n\n### Setup\n\n```\ngit clone git@github.com:wildlyinaccurate/second.git\nnpm install\nnpm run lerna bootstrap\n```\n\n### Running the example application\n\nRun the [example API server](packages/example-simple-api) with\n\n```\nnpm start\n```\n\nSecond understands the `NODE_ENV` and [`DEBUG`](https://www.npmjs.com/package/debug) environment variables:\n\n```\nNODE_ENV=production DEBUG=second:* npm start\n```\n\n### Running the tests\n\nRun the tests during development with:\n\n```\nnpm run lerna run test\n```\n\nOr if you have [Lerna](https://github.com/lerna/lerna) installed globally:\n\n```\nlerna run test\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwildlyinaccurate%2Fsecond","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwildlyinaccurate%2Fsecond","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwildlyinaccurate%2Fsecond/lists"}