{"id":15677847,"url":"https://github.com/dgp1130/html-fragments-demo","last_synced_at":"2025-05-07T01:44:50.329Z","repository":{"id":53582255,"uuid":"420893844","full_name":"dgp1130/html-fragments-demo","owner":"dgp1130","description":"Proof of concept demo for using HTML fragments as a transfer format between the client and server.","archived":false,"fork":false,"pushed_at":"2023-01-24T07:04:56.000Z","size":46,"stargazers_count":20,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-31T05:04:03.704Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/dgp1130.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":"2021-10-25T05:47:38.000Z","updated_at":"2025-02-18T01:31:50.000Z","dependencies_parsed_at":"2023-02-13T18:46:02.479Z","dependency_job_id":null,"html_url":"https://github.com/dgp1130/html-fragments-demo","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgp1130%2Fhtml-fragments-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgp1130%2Fhtml-fragments-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgp1130%2Fhtml-fragments-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgp1130%2Fhtml-fragments-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dgp1130","download_url":"https://codeload.github.com/dgp1130/html-fragments-demo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252798654,"owners_count":21805877,"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":[],"created_at":"2024-10-03T16:12:58.484Z","updated_at":"2025-05-07T01:44:50.310Z","avatar_url":"https://github.com/dgp1130.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# HTML Fragments Demo\n\nThis is a proof concept demo for using HTML document fragments as a transfer\nformat between client and server.\n\nSee [the associated blog post](https://dwac.dev/posts/html-fragments/) for more\ncontext about the motivation, goals, and design.\n\nAlso check out the\n[follow-up sequel post on _streaming_ HTML fragments](https://dwac.dev/posts/streaming-html-fragments/)\nor the\n[three-quel post on _routing_ with HTML fragments](https://blog.dwac.dev/posts/html-fragments-routing/)\nand its associated [demo](https://github.com/dgp1130/html-fragments-routing-demo/).\n\nThis is a _very_ simple Twitter clone which displays tweets to the user in a\nlist. Each tweet is requested dynamically, but rendered on the server and\ninserted into the document at the appropriate place. There are three key features:\n\n1.  \"Load more\" demos an endless scroll feature. Each time it is clicked, the\n    client requests a random tweet and appends it to the list.\n1.  \"Edit\" demos an editing feature whereby the user provides some new content\n    and sends it to the server. The server would update any associated\n    databases, and more importantly here, return the newly rendered tweet to the\n    client to be updated in place.\n1.  \"Stream 5 tweets\" demos a streaming parse where the server returns 5 tweets\n    in a single HTTP response. The tweets are appended to the DOM as they are\n    received, without waiting for the entire response.\n\nThe interesting aspect of the approach here is that it demonstrates two use\ncases where client-side rendering would traditionally be required, either\nnecessitating:\n\n1.  Developer support of CSR and SSR of the same component (a tweet).\n1.  Committing to a fully CSR'd app.\n1.  Refreshing the page to receive new SSR'd changes.\n\nHere, the same functionality is supported, yet tweets are **always** server-side\nrendered and include CSS and JS which get loaded by the browser when first\nrequested. Each time a tweet is loaded, it is simply appended to the document at\nthe relevant position, with no additional client-side logic required. This is\nsimple enough to not really require a comprehensive CSR framework while still\nproviding some dynamic features.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdgp1130%2Fhtml-fragments-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdgp1130%2Fhtml-fragments-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdgp1130%2Fhtml-fragments-demo/lists"}