https://github.com/dmitrymyadzelets/svelte-server-client-rendering
Example of the server-side and client-side rendering in Svelte
https://github.com/dmitrymyadzelets/svelte-server-client-rendering
server-side-rendering ssr svelte
Last synced: 3 months ago
JSON representation
Example of the server-side and client-side rendering in Svelte
- Host: GitHub
- URL: https://github.com/dmitrymyadzelets/svelte-server-client-rendering
- Owner: DmitryMyadzelets
- License: mit
- Created: 2021-01-16T15:20:07.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-02-23T09:26:54.000Z (over 4 years ago)
- Last Synced: 2025-01-16T10:35:38.539Z (4 months ago)
- Topics: server-side-rendering, ssr, svelte
- Language: JavaScript
- Homepage:
- Size: 26.4 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# svelte-server-client-rendering
Example of the server-side, client-side and static rendering with
[Svelte](https://svelte.dev/). For self-learning.
```javascript
npm install
npm run build
npm start
```
## How it works
When you execute `npm run build` you compile and render **static** files. Here
we use the [Rollup](https://rollupjs.org) bundler. It's controlled by the
`rollup.config.js` file. We have two configurations there: the first compiles
[Client.svelte](Client.svelte) and creates the `public/client.js` file, the second compiles
[Static.svelte](Static.svelte) and outputs the rendering results to the `static.html` file.
With `npm start` command you start a primitive server written in the [index.js](index.js) file.
The **server-side rendering** occurs when the server is preparing a response to a client.
For the root `/` URL the server creates `html` rendered by the [Server.svelte](Server.svelte). During rendering it uses the `static.html` which was rendered as a static content.
For any other URL our server assumes that static files are requested from the [public](public) directory.
The **client-side rendering** happens when a browser loads and executes the `client.js` file.
In the browser you'll see results of the every rendering. It will help you with
understanding where and when it was done.