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

feat: add support for client only lazy loading with dynamic #331

Merged
merged 11 commits into from
Jan 16, 2025

Conversation

Valerioageno
Copy link
Member

@Valerioageno Valerioageno commented Jan 13, 2025

Context & Description

Closes: #258

This PR extends the usage of the dynamic function, making its usage the same as Next.js

Quick takeaways:

  1. The tuono-lazy-fn-vite-plugin gets completely dropped
  2. dynamic takes an obj as second argument { ssr: boolean, loading: JSX.Element }
  3. The whole implementation is heavily inspired by the Next.js implementation

Good to know:
using ssr: true we get the following console error
Screenshot 2025-01-13 211436
This is expected because what is rendered on the server doesn't match the client.

After investigating how Next.js fixed this issue, I found that they have an error boundary that enhances and filters the console errors triggered by React. Basically, every dynamic hydration error gets labeled by next/dynamic so they automatically remove it at runtime!

I'd propose to address the ErrorBoundary after this and release the dynamic with the console error (which is fine since it is not blocking for the users)

@Valerioageno Valerioageno self-assigned this Jan 13, 2025
@github-actions github-actions bot added the typescript Requires typescript knowledge label Jan 13, 2025
@Valerioageno Valerioageno force-pushed the remove-lazy-vite-plugin branch from 3bb62cb to ac82a8a Compare January 14, 2025 18:25
@Valerioageno Valerioageno marked this pull request as ready for review January 14, 2025 20:01
Copy link
Member

@marcalexiei marcalexiei left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Few additional considerations:

  • It would be useful to add some unit tests about this component for both client and ssr case (we should be able to mock window via vitest).

  • About

    release the dynamic with the console error (which is fine since it is not blocking for the users)

    We should add the documentation about dynamic() usage alongside a warning about the expected error (informing that it will be fixed in the next release)

  • Maybe this could be also added to the tutorial but I think is better to do it after we fixed the ssr error

@marcalexiei marcalexiei merged commit 1a82318 into main Jan 16, 2025
9 checks passed
@marcalexiei marcalexiei deleted the remove-lazy-vite-plugin branch January 16, 2025 11:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
typescript Requires typescript knowledge
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Feature request]: Add ssr option to dynamic
2 participants