{"id":23452284,"url":"https://github.com/maxam2017/react-18-ssr","last_synced_at":"2025-10-06T23:08:41.114Z","repository":{"id":47791813,"uuid":"492362615","full_name":"maxam2017/react-18-ssr","owner":"maxam2017","description":"Build react 18 + SSR from scratch 💪","archived":false,"fork":false,"pushed_at":"2024-07-24T11:23:43.000Z","size":1207,"stargazers_count":104,"open_issues_count":0,"forks_count":11,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-13T12:51:18.225Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/maxam2017.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-05-15T01:42:22.000Z","updated_at":"2025-03-17T11:25:03.000Z","dependencies_parsed_at":"2025-04-13T12:51:53.558Z","dependency_job_id":"79ace335-68bf-4f4c-a9f1-9ee26bec9c6c","html_url":"https://github.com/maxam2017/react-18-ssr","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/maxam2017/react-18-ssr","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxam2017%2Freact-18-ssr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxam2017%2Freact-18-ssr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxam2017%2Freact-18-ssr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxam2017%2Freact-18-ssr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maxam2017","download_url":"https://codeload.github.com/maxam2017/react-18-ssr/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxam2017%2Freact-18-ssr/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278692948,"owners_count":26029408,"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","status":"online","status_checked_at":"2025-10-06T02:00:05.630Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-12-24T01:14:30.076Z","updated_at":"2025-10-06T23:08:41.084Z","avatar_url":"https://github.com/maxam2017.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React 18 + SSR 💪\n\nAfter React v18 is published, I think it's time to build React app with server-side rendering (SSR) once with those new APIs. Before that, I always use Next.js when it comes to SSR.\n\n## Caveat ⚠️\n\nThis code isn't production-ready. Use with caution.\n\n## What's new\n\nReact v18 introduces new SSR Architecture. Thanks to the new Suspense API, the process of SSR isn't waterfall-like anymore. Below are two major unlocked SSR features:\n\n✅ Streaming HTML\n\n✅ Selective Hydration\n\nWant to know more? See https://github.com/reactwg/react-18/discussions/37 for details.\n\n## Concept\n\nWhy do we need SSR? It's an important and very common question in the interview.\n\nIn the past, the web app was always rendered on the server in the form of HTML, which someone called Multiple Page Application (MPA). When the user clicked a link, the browser made an HTTP request to the server and waits for receiving the HTML of the next page.\n\nHowever, when some modern frontend library like React.js comes up, the web app becomes Single Page Application (SPA). What does this mean? It becomes static! We can route between different pages without making requests to the server because everything is bootstrapped on client side.\n\nAlthough SPA has a better user experience, it doesn't SEO-friendly and also makes the first painting longer. To solve those problems, the concept of Universal App (Hybrid) comes up, it combines the benefit of MPA and SPA, using server side rendering and making client routing works. Sounds great right? Moreover, most famous frameworks, like Next.js (React.js framework), Nuxt.js (Vue.js framework), and Svelte Kit (Svelte.js framework) already use this way to implement web apps.\n\n## Implementation\n\nWe need a node server to render dehydrated React elements and use ReactDOM.hydrate to make our DOM interactive. There're some steps listed below:\n\n- setup a koa server (for rendering)\n- use ReactDOMServer to dehydrate\n  - renderToString\n  - renderToPipeableStream (new in React v18 ✨)\n- use ReactDOM.hydrate\n\nTo here, we have already built the React app with the easiest SSR.\n\nMore Features:\n\n- Routing\n  - react-router-dom (BrowserRoutes \u0026 StaticRoutes)\n  - https://reactrouter.com/docs/en/v6/guides/ssr\n- Code Splitting\n  - the most basic way is using dynamic import because common bundler support chunking according this.\n  - React.Suspense + React.lazy (`renderToPipeableStream` is required!)\n  - https://reactjs.org/docs/code-splitting.html#code-splitting\n- Fetch data\n  - WIP...\n\n## Links\n\n- https://github.com/reactwg/react-18/discussions/22\n- https://github.com/reactwg/react-18/discussions/114\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxam2017%2Freact-18-ssr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaxam2017%2Freact-18-ssr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxam2017%2Freact-18-ssr/lists"}