Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Server side rendering SvelteKit example does not work #34

Open
khromov opened this issue Jul 4, 2022 · 0 comments
Open

Server side rendering SvelteKit example does not work #34

khromov opened this issue Jul 4, 2022 · 0 comments

Comments

@khromov
Copy link
Contributor

khromov commented Jul 4, 2022

The current SSR example from the readme does not work. I have submitted a working SSR example in #32 and I think that is the only way to have working SSR. ("Working" in this case means the rendered data is present in the HTML response from the server.)

Demo

You can see that "undefined" flashes on the screen before the data loads:
Animation

Repro (code from readme)

<script lang="ts" context="module">
  import type { Load } from '@sveltejs/kit';

  const url = 'https://jsonplaceholder.typicode.com/posts';

  export const load: Load = async ({ fetch }) => {
    const response = await fetch(url);

    return {
      props: {
        initialData: await response.json()
      }
    };
  };
</script>

<script lang="ts">
  import { useSWR } from 'sswr';

  interface Post {
    id: number;
    title: string;
    body: string;
  }

  export let initialData: Post[];

  const { data: posts } = useSWR<Post[]>(url, {
    initialData,
    revalidateOnStart: false
  });
</script>

<pre>{JSON.stringify($posts)}</pre>

Misc

I have also tried an alternative approach with data fetching through a Page Endpoint but that has the same problem where the value is undefined at the start.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant