mirror of
https://github.com/sveltejs/svelte.git
synced 2024-11-25 09:09:35 +01:00
993b40201c
* New FAQ, new renderer * Push blog stuff * Fix blog posts * Add tutorial to be rendered * Update documentation/content/blog/2023-03-09-zero-config-type-safety.md Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> * Update documentation/content/blog/2023-03-09-zero-config-type-safety.md Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> * Revamp a lot of renderer, make it (soft) compatible with sveltekit * Remove markdown types * Clean up faq +page * Document stuff * Make the options more explicity * chore(site-2): Restructure docs pt 2 (#8604) * Push * Update readme * Push * inor accessibility fix * minr stuff * Add prepare * Run prettier * Remove test script * pnpm update * Update sites/svelte.dev/src/routes/examples/[slug]/+page.svelte Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> * Update sites/svelte.dev/package.json Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> --------- Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> --------- Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
51 lines
1.7 KiB
Markdown
51 lines
1.7 KiB
Markdown
---
|
|
title: 'Server-side component API'
|
|
---
|
|
|
|
```js
|
|
// @noErrors
|
|
const result = Component.render(...)
|
|
```
|
|
|
|
Unlike client-side components, server-side components don't have a lifespan after you render them — their whole job is to create some HTML and CSS. For that reason, the API is somewhat different.
|
|
|
|
A server-side component exposes a `render` method that can be called with optional props. It returns an object with `head`, `html`, and `css` properties, where `head` contains the contents of any `<svelte:head>` elements encountered.
|
|
|
|
You can import a Svelte component directly into Node using [`svelte/register`](/docs/svelte-register).
|
|
|
|
```js
|
|
// @noErrors
|
|
require('svelte/register');
|
|
|
|
const App = require('./App.svelte').default;
|
|
|
|
const { head, html, css } = App.render({
|
|
answer: 42
|
|
});
|
|
```
|
|
|
|
The `.render()` method accepts the following parameters:
|
|
|
|
| parameter | default | description |
|
|
| --------- | ------- | -------------------------------------------------- |
|
|
| `props` | `{}` | An object of properties to supply to the component |
|
|
| `options` | `{}` | An object of options |
|
|
|
|
The `options` object takes in the following options:
|
|
|
|
| option | default | description |
|
|
| --------- | ----------- | ------------------------------------------------------------------------ |
|
|
| `context` | `new Map()` | A `Map` of root-level context key-value pairs to supply to the component |
|
|
|
|
```js
|
|
// @noErrors
|
|
const { head, html, css } = App.render(
|
|
// props
|
|
{ answer: 42 },
|
|
// options
|
|
{
|
|
context: new Map([['context-key', 'context-value']])
|
|
}
|
|
);
|
|
```
|