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

Next.JS compatibility #51

Merged
merged 9 commits into from
Mar 27, 2024
Merged

Next.JS compatibility #51

merged 9 commits into from
Mar 27, 2024

Conversation

laliconfigcat
Copy link
Member

@laliconfigcat laliconfigcat commented Mar 21, 2024

Describe the purpose of your pull request

Using the SDK in Next.JS had issues on the server side - XMLHttpRequest is not defined (#40, #7).

It turned out that simply switching to axios instead of XMLHttpRequest would only hide the original issue but it won't fix the problem.
I added 'use client' to the entry points to indicate that the SDK is intented to be used only on client side.
However it wasn't enough for Next.JS as it prerendered our code on the server side even if I specified the 'use client'.
That would not be a problem by default but we initialized the configcatclient in the ConfigCatProvider's constructor. So when Next.JS prerendered the ConfigCatProvider, it started the polling on the server side as well.
I refactored the code to only initialize the client in componentDidMount. componentDidMount is not running on the server side during the prerendering, so the client will not be initialized on the server side.

Unfortunately I had to introduce a breaking changes to be able to achieve this functionality: from now, the useConfigCatClient hook can return undefined until the Provider is not mounted.

I also created a sample Next.JS app that can use our React SDK.

Related issues (only if applicable)

#40
#7

Requirement checklist (only if applicable)

  • I have covered the applied changes with automated tests.
  • I have executed the full automated test set against my changes.
  • I have validated my changes against all supported platform versions.
  • I have read and accepted the contribution agreement.

@laliconfigcat laliconfigcat requested a review from a team as a code owner March 21, 2024 15:48
Copy link

Quality Gate Passed Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

@adams85 adams85 merged commit 4f495a1 into main Mar 27, 2024
4 checks passed
@adams85 adams85 deleted the nextjscompatibility branch March 27, 2024 11:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
4 participants