SSR

[tosinek]

Hi, have you managed to make SSR work? I am just exploring options and whether I could replace prerender.io with SSR.

[Sergeant61]

Hi, have you managed to make SSR work? I am just exploring options and whether I could replace prerender.io with SSR.

Yes I had SSR enabled but I am using tinro as my router and it does not support ssr. It can be done with a router that supports SSR. Here is the task I opened: AlexxNB/tinro#104

[Sergeant61]

I didn't go too far, but if you are successful, could you please share your sample repo with me?

[Sergeant61]

I think this might work for you, but I haven't tried it. https://github.com/EmilTholin/svelte-routing

[tosinek]

There is so many gotchas along the way... svelte-routing is the first one I made working.

A big gotcha to prevent SyntaxError: Unexpected token '<' at wrapSafe (internal/modules/cjs/loader.js:1001:16) is to include recompile in the package.json

"meteor": { "nodeModules": { "recompile": { "svelte-routing": [ "client", "server" ] } } }

// client main.js
import { onPageLoad } from "meteor/server-render";
import App from "/components/App.svelte";
onPageLoad(() => {
  new App({
    target: document.querySelector("#main"),
    hydrate: true,
  });
});

// App.svelte
<script>
  import { Router, Route } from "svelte-routing";
  import Links from "./Links.svelte";
  import Message from "./Message.svelte";
  export let url = "";
</script>

<Router {url}>
  <div class="main">
    <Route path="/links"><Links /></Route>
    <Route path="/"><Message /></Route>
  </div>
</Router>

// server main.js
import { onPageLoad } from "meteor/server-render";
import C from "/components/App.svelte";

onPageLoad((sink) => {
  const { url } = sink.request;
  const { html, css } = C.render({ url: url.path });
  sink.appendToHead(`<style>${css.code}</style>`);
  sink.renderIntoElementById("main", html);
});

Tinro doesn't seem to work as it contains references to browser methods. I tried to patch some but it is too difficult.