I am creating a landing page that fetches data from two servers subsequently and loads an embedded application using this fetched data.
The challenge The webpage will be deployed with AWS Amplify and to make this work I cannot use things like useParams. The issue at hand: passing an id parameter from the URL (id = a JSON Web Token) to retrieve data from a server. In a nutshell: Can I read a route based an externally generated token (i.e. cannot be hard coded) on the server side?
Guidelines
- Next JS 13(.4.7)
- React App 18(.2)
- All components are server components
- As mentioned, the App is deployed in Amplify In my user system there is installation data of light networks of buildings. The click of a certain button should open up an embedded third party web application. There are a couple of steps involved:
- The landing page URL is suffixed with the JWT token
- The installation data is fetched in our server (first API call)
- The data from (2) is manipulated as preparation for (4)
- The now compatible data is uploaded to the third party server (second API call) which returns an uid
- The embedded app can be opened using the uid
Above mentioned approach falters at arguably the most trivial step (1). The following error is given when trying to use searchParams:
Page with dynamic = "error" couldn't be rendered statically because it used searchParams.id
API call 1 could be done on a client (although not ideal), but API call 2 is bound to be server side to prevent CORS errors and such. So somewhere in the riddle data (in described approach the URL) has to be passed from client towards a server component.
I have tried conventional things like passing from Props which causes an error that the server component is not dynamic. I tried using Store (Zustand, Redux) but those options seem to drop as well, as I could not manage to retrieve stored data within the server component. Older functions like getServerSideProps also did not work as it was part of Next 12.
