Add react server components example #15
Open
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Hi team,
I was looking into this nextjs implementation example of yours and I thought it could be improved if it provides a React Server Components example of implementing a constructor.io API because one of the new paradigms in React and Next.js is using server components. So I've added a simple RSC example here. I'd appreciate it if you could review the changes.
Here are the updates included in the PR:
1. Next.js version upgrade
I've upgraded the nextjs version to the latest one (v14) to be able to use the app router, which allows the use of RSC.
Due to this upgrade, there were some changes:The new version doesn't allow the
Linkcomponent to wrap the<a />element so I removed it, and theImagecomponent's width and height value became a number type.2. Added RSC example
The
ServerComponentsExamplePagecomponent fetches data usingConstructorIONodefrom the Node.js client library. I tried to implement thefetchResultsServerSidefunction's behavior instead of using the function because it is designed to fit in thegetServerSidePropsfor the original nextjs page implementation.In the page component,
userParametersdata is collected according to the new nextjs 14 version. I've aimed to implement an example comparable to others, focusing on data fetching and UI rendering. If necessary, we can add a pagination here.3. Possible bug?
In the
fetchResultsServerSidefunction, I believe thecioNode.search.getSearchResultsmethod's second parameter is not a position for theuserParameters.The signature says:
So I passed the
userParametersas a third argument. I'm not sure this is correct in version "4.5.3" of the@constructor-io/constructorio-nodepackage as I couldn't find the documentation for the version. It would be great to confirm if this change is appropriate.I would appreciate your review of these changes. If you have any questions or need any adjustments, please let me know!