Feature Request: Svelte equivalent to React's renderToString()
#14928
-
Describe the problemI am trying to do SSR in a non-JS environment (which is hard). I am using an embedded JS engine. In React, a simple way to do SSR is (Thanks @K-Sato1995):
import React from 'react';
import { renderToString } from "react-dom/server";
import App from './App'; // Adjust the import path as necessary
function renderApp(props) {
return renderToString(<App {...props} />);
}
globalThis.renderApp = renderApp;
Such a method can be used for Svelte too. Describe the proposed solutionWhat is required is a function that will generate a string representation of the actual DOM structure used for hydration. Importancei cannot use svelte without it (for SSR in a non-JS environment) |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 6 replies
-
|
I suggest to first compile your app using your toolchain (using a plugin to compile Svelte files to JS), and then use the output as an input for your JS runtime, in combination with render from import { render } from 'svelte/server';
import App from './App.svelte'; // Adjust the import path as necessary
function renderApp(props) {
const result = render(App, { props });
// if this needs to create fully qualified HTML, then add `<html>` etc, this assumes you're interested in the body HTML only
return result.body;
}
globalThis.renderApp = renderApp; |
Beta Was this translation helpful? Give feedback.
-
|
Say the html file is: <html>
<body>
<div id="app">
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>Normally Svelte "manages" the import { mount } from 'svelte'
import App from './App.svelte'
const app = mount(App, {
target: document.getElementById('app')!,
})
export default appIn your |
Beta Was this translation helpful? Give feedback.
-
|
@dummdidumm I'm currently getting an error: I am simply building an unchanged sample template Svelte app from npm create vite@latest -> Svelte -> Typescript Is there a setting I can change here to avoid that (such as format or platform): Why is the generated bundled js referencing document for server side code? |
Beta Was this translation helpful? Give feedback.
-
|
When I look at the generated code for different combinations of format and platform, there is ample references to |
Beta Was this translation helpful? Give feedback.
-
|
Can you provide a repository? Hard to say what the problem is without seeing the whole picture. Some shots in the dark:
|
Beta Was this translation helpful? Give feedback.
-
|
@dummdidumm Thanks |
Beta Was this translation helpful? Give feedback.
-
|
@dummdidumm i got it work. There is another issue though in terms of trying to get SSR page match the CSR page.
The other is below: |
Beta Was this translation helpful? Give feedback.
Can you provide a repository? Hard to say what the problem is without seeing the whole picture. Some shots in the dark:
generate: 'server'compiler option)import { onMount } from 'svelte'somewhere it should resolve to the server version of that import via the export map)