Data fetching with SSR #38
Comments
|
Hi @scottbedard! It might be that an asynchronous streaming renderer makes this easier in the future, but for now I think you are best off using some React/Redux-like SSR setup. You get the data on the server and render the topmost Svelte component with the data. You then render this same data as a global variable for the topmost front end JavaScript file to read and give to the topmost Svelte component in the browser as well. You could then e.g. supply this data to the entire app through context in the topmost component. Example // server.js
const app = require("./public/App.js");
const server = express();
server.use(express.static(path.join(__dirname, "public")));
server.get("*", async (req, res) => {
const preloadedState = await getStateForUrl(req.url);
preloadedState.url = req.url;
const { html } = app.render(preloadedState);
res.write(`
<!DOCTYPE html>
<div id="app">${html}</div>
<script>
window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(
/</g,
'\\u003c'
)};
</script>
<script src="/public/bundle.js"></script>
`);
res.end();
});<!-- App.svelte -->
<script>
import { setContext } from "svelte";
import { writable } from "svelte/store";
import { Router } from "svelte-routing";
export let url;
export let foo;
export let bar;
const appStore = writable({ foo, bar });
setContext('appStore', appStore);
</script>
<Router {url}>
<!-- ... -->
</Router>// main.js
import App from "./App.svelte";
new App({
target: document.getElementById("app"),
hydrate: true,
props: window.__PRELOADED_STATE__
});I think it should be fairly straight-forward to modify the example in this repository with this functionality. |
|
Dang, that's sort of what I thought. This will work, but it means any page that requires initial state needs to to two things instead of one to get that state.
Maybe in the future this will be possible, but until then I guess it's not the end of the world. Thanks for the info! |
What is the best way to fetch data that is part of a route? For example, imagine a
/blog/:slugroute. Ideally, SSR would produce the full page, including the blog content, so that upon hydration no additional XHRs are necessary.I found this issue that looks like it might solve my problem, but it looks sort of old, so I'm not sure if there is a better way to achieve what I'm talking about.
Any advice here would be appreciated, thanks!
The text was updated successfully, but these errors were encountered: