question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Date changes datatype in SSR und CSR

See original GitHub issue

Describe the bug

When returning a JSDate from an endpoint. The datatype is preserved during SSR, but then on clientside load the type is the expected string.

Reproduction

The reproduction repo can be found here: https://github.com/tylkomat/sveltekit-date-ssr

The setup is very simple:

index.svelte

<script lang="ts">
  export let now: string;

  console.log(now.toString(), (now as any) instanceof Date,typeof now === 'string');
</script>

index.ts

export async function GET() {
  return {
    body: {
      now: new Date()
    }
  }
}

Logs

Server Log: `Wed Aug 10 2022 16:15:55 GMT+0200 (Mitteleuropäische Sommerzeit) true false`
Browser Log: `2022-08-10T14:15:55.959Z false true`

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
    Memory: 2.64 GB / 15.93 GB
  Binaries:
    Node: 18.7.0 - ~\AppData\Local\Volta\tools\image\node\18.7.0\node.EXE
    npm: 8.15.0 - ~\AppData\Local\Volta\tools\image\node\18.7.0\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (104.0.1293.47)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.64
    @sveltejs/kit: next => 1.0.0-next.405
    svelte: ^3.44.0 => 3.49.0
    vite: ^3.0.0 => 3.0.5

Severity

annoyance

Additional Information

No response

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
CaptainCodemancommented, Aug 11, 2022

Providing some way to hook into the deserialization on the client would make it easier to convert ISO date strings back to JS Objects (i.e. as a reviver option to the JSON.parse method).

I hit this all the time (pretty much ever chunk of data always has a date in it) and it’s a new-user foot-gun because the error you end up with isn’t obvious as to the cause.

2reactions
Conduitrycommented, Aug 10, 2022

I’d be in favor of testing for serializability in dev mode only, and just passing along the object as-is in prod mode for SSR.

Read more comments on GitHub >

github_iconTop Results From Across the Web

What does CSR, SSR, SSG and ISR means and why should ...
Data type and stability is the ultimate determining factor when it comes to page building strategies. Understanding how your data can change is ......
Read more >
Format Date using CSR (dd.MM.yyyy)
Tested with an custom list, one title column (single line of text) and one column called date (date and time, shown only date...
Read more >
SSRS datetime filed is not refreshed event after the data type ...
In the Report Data pane, right-click the dataset, and then click Query. ... query runs and returns the current field collection and any...
Read more >
Understanding Next.js Data Fetching (CSR, SSR, SSG, ISR)
This code example will fetch a date-time from an API using axios, then render it on the page. It is useful to see...
Read more >
Using the Date/Time Extended data type - Microsoft Support
The Date/Time Extended data type stores date and time information and is similar to the Date/Time data type, but it provides a larger...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found