{"id":15646742,"url":"https://github.com/jonaskuske/thesis","last_synced_at":"2025-09-01T16:37:06.952Z","repository":{"id":239798111,"uuid":"533546974","full_name":"jonaskuske/thesis","owner":"jonaskuske","description":"⚡ Accelerating Multi-Page App Rendering Through Service Workers","archived":false,"fork":false,"pushed_at":"2025-04-22T17:23:20.000Z","size":350373,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-23T09:55:55.361Z","etag":null,"topics":["app-shell","isomorphic","mpa","service-worker","spa","stream"],"latest_commit_sha":null,"homepage":"https://thesis.joku.co","language":"Vue","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/jonaskuske.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-09-07T00:35:01.000Z","updated_at":"2025-04-22T17:23:23.000Z","dependencies_parsed_at":"2024-05-15T12:39:37.949Z","dependency_job_id":"cf4cf158-de4a-4d44-bd73-bc2ad9b7157b","html_url":"https://github.com/jonaskuske/thesis","commit_stats":null,"previous_names":["jonaskuske/thesis"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonaskuske%2Fthesis","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonaskuske%2Fthesis/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonaskuske%2Fthesis/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonaskuske%2Fthesis/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jonaskuske","download_url":"https://codeload.github.com/jonaskuske/thesis/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250412532,"owners_count":21426285,"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":["app-shell","isomorphic","mpa","service-worker","spa","stream"],"created_at":"2024-10-03T12:14:27.125Z","updated_at":"2025-04-23T09:56:00.672Z","avatar_url":"https://github.com/jonaskuske.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=center\u003e\n\u003ch1 align=center\u003eStream Stitching and the App Shell Model\u003c/h1\u003e\n\n\u003cp align=center\u003e⚡ Accelerating Multi-Page App Rendering Through Service Workers\u003c/p\u003e\n\n\u003cp align=center\u003e\u003cimg width=600 src=https://user-images.githubusercontent.com/30421456/191315428-b6c14329-9528-47c8-a3d4-26e8c468e39d.png\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n## Usage\n\n#### Installation\n\nThis project requires Node.js version 20 or higher. Once Node is installed, make sure to run `corepack enable` at least once to enable built-in support for package managers like yarn or pnpm.\n\n`yarn install` - Install dependencies\n\n#### Development\n\nYou can start a development server with features like hot module reload. The application variant to start is [configurable through environment variables](#configuration-through-environment-variables).\n\n`yarn dev` - Starts development server on port [`:3000`](http://localhost:3000)\n\n#### Production\n\nTo deploy the application, you first need to compile it with the build command. Then, you can start the server in production mode. The application variant to build and serve is [configurable through environment variables](#configuration-through-environment-variables).\n\n`yarn build` - Build for production\n\n`yarn server:prod` - Serve built application in production mode on port [`:3000`](http://localhost:3000)\n\n## Configuration through environment variables\n\nThe variant to start/build can be configured through two environment variables:\n\n**`PUBLIC_ENV__APP_SHELL`**: `true | false`\n\n**`PUBLIC_ENV__MODE`**: `MPA | SPA | ISOMORPHIC`\n\nThe variables can be prefixed to a command:\n\n```bash\nPUBLIC_ENV__MODE=MPA PUBLIC_ENV__APP_SHELL=true yarn dev\n```\n\nor with PowerShell:\n\n```powershell\n$env:PUBLIC_ENV__MODE=\"MPA\"; $env:PUBLIC_ENV__APP_SHELL=\"true\"; yarn dev\n```\n\n## Deployed variants\n\n#### Version selector — [thesis.joku.co](https://thesis.joku.co)\n\nOverview and interactive selection of the deployed versions listed below.\n\n#### Multi-Page Application — [thesis-mpa.joku.co](https://thesis-mpa.joku.co)\n\nA \"classic\" website, pages are fully server-rendered. After clicking a link, the browser performs a full navigation, loading a new document in a fresh context. Interactions are handled through `\u003cform\u003e` navigations.\n\n#### Multi-Page Application with Stream-Stitched App Shell — [thesis-mpa-shell.joku.co](https://thesis-mpa-shell.joku.co)\n\nFully server-rendered upon first visit. After the page is loaded, an HTML Shell consisting of the `\u003chead\u003e` portion and common `\u003cbody\u003e` elements is added to the browser cache. After clicking a link, the browser performs a full navigation, but now a Service Worker immediately sends the cached App Shell in a Response Stream. It simultaneously requests just the `\u003cbody\u003e` portion of the loaded page from the server and \"stitches\" the response into the Response Stream, after the Shell.\n\n#### Single-Page Application (SPA) — [thesis-spa.joku.co](https://thesis-spa.joku.co)\n\nNo matter which page is requested, the server always responds with the same plain HTML document that contains no content. Once loaded, client-side JavaScript will populate the document with content and handle all subsequent navigations and interactions.\n\n#### Single-Page Application with App Shell — [thesis-spa-shell.joku.co](https://thesis-spa-shell.joku.co)\n\nLike a regular Single-Page Application, but required assets and the plain HTML document are served from the local cache once the Service Worker is installed. [^1]\n\n#### Isomorphic Application — [thesis-isomorphic.joku.co](https://thesis-isomorphic.joku.co)\n\nUpon first visit the server responds with the fully-rendered HTML document for the requested page. Once loaded in the browser, client-side JavaScript will take over in a process called hydration and handle all subsequent navigations and interactions.\n\n#### Isomorphic Application with Stream-Stitched App Shell — [thesis-isomorphic-shell.joku.co](https://thesis-isomorphic-shell.joku.co)\n\nInitial load works the same way as the _MPA with stream-stitched App Shell_ variant: the server only responds with the HTML partial that contains the content, which is combined with the cached App Shell by the Service Worker. After load, JavaScript hydrates the page and handles all further navigations and interactions.\n\n[^1]: Stream Stitching is used for the SPA, too, but this is merely an implementation detail caused by architectural constraints specific to this codebase: App Shell architecture for SPAs can be implemented without Stream Stitching.\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n---\n\n\u003cbr\u003e\n\nJonas Kuske, 2024\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonaskuske%2Fthesis","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjonaskuske%2Fthesis","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonaskuske%2Fthesis/lists"}