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

Convert Balancer and Provider to server components #36

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

awndrw
Copy link

@awndrw awndrw commented Jan 23, 2023

Fixes #23
A large part of react-wrap-balancer can run on the server. I've moved all code that strictly needs to run on the client to client.ts. This allowed both Balancer and Provider to be converted to server components. There are a few significant changes:

  • RelayoutScript is also rendered on the server and uses a local variable to determine if the relayout function has already been rendered at a global level
  • React Context was removed entirely and the Provider component only renders the relayout script
  • All code that must run on the client was moved to ClientBalancer (effects, relayout) and the rest stayed in Balancer to be rendered on the server

@vercel
Copy link

vercel bot commented Jan 23, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated
react-wrap-balancer ✅ Ready (Inspect) Visit Preview 💬 Add your feedback Jan 23, 2023 at 0:19AM (UTC)

- `ScriptElement` renders the script only if it has not been rendered onto the DOM already. It does this by using  the prop `isGlobal` and a serverside variable. This removes the need for React Context entirely
- `Balancer` is now partially serverside, rendering its script and `ClientBalancer`. Any code that doesn't explicitly have to run on the client was moved to the server
@awndrw
Copy link
Author

awndrw commented Jan 23, 2023

Should Balancer continue to be a client component so it can continue to be used in other client components (see this doc)? I chose to make it a server component so we could remove React Context and render the relayout script and provider on the server, but there might be a better way of doing this.

@CodeWithShreyans
Copy link

Any progress on this? Will be really helpful

@HofmannZ
Copy link

Cannot set a CSP nonce the server script, that should probably be added.

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

Successfully merging this pull request may close these issues.

Make Provider a server component
3 participants