Docs: How To: Server Component with Read Query Params, Set Cookie, Client with sessionStorage.setItem

[techpanga]

What is the improvement or update you wish to see?

NextJS13: Provide the How To:s for most common usecases.

I could not find a usecase from current documetation.

1. If app/ folder having server components and client compoents, what is the use of pages/ folder?
2. What is correlation between /app folder and /pages folder for a route.
3. How to do POST methods on a route initiated as callback pages from other sites.
4. Any examples with a Server Component read query, body on POST/GET request URL and set Cookie, then forward to Client Component to render the data in sessionStorage on browser?

Is there any context that might help us understand?

Server Component read query, body on POST/GET request URL and set Cookie, then forward to Client Component to render the data in sessionStorage on browser?

Does the docs page already exist? Please link to it.

No

[amirmahdizare]

1. The "pages/" directory is related to the older version of Next.js, and ultimately, all developers should use the "app" directory.
2. They can be used together, but I recommend focusing on the "app" directory because it has more features and is more structured.
3. POST methods on a route initiated as callback pages from other sites can be handled using server-side code to handle the incoming request and send a response back to the external site.
4. You cannot access anything that relates to the window and browser in server components. Therefore, you should use cookies() and extract the access token from them, and then fetch data with fetch. It is up to you and your business to choose where to use CC or SC.

You can also check the Next.js documentation to learn more about fetching data: https://nextjs.org/docs/app/building-your-application/data-fetching/fetching

If you want to talk more, you can get in touch with me.

[techpanga]

Thanks @amirmahdizare for the answers to the questions.

Re: #4 _

You cannot access anything that relates to the window and browser in server components. Therefore, you should use cookies() and extract the access token from them, and then fetch data with fetch. It is up to you and your business to choose where to use CC or SC.

_

The scenario is the redirect_uri and callback implementation in NextJS. The redirect_uri comes with code and state and need to read these using request.query and fetch the access_token and send to client via setCookie. Then client component to store this token in session storage.

Flow is like:: Read req.query.code, req.query.state in server component >> Fetch Access Token from Authorization Server >> Set token in the Cookie in the response >> Forward to Client Component Props >> Client component reads props and store in browser sessionStorage.

Trying to find a way to read Query String/Params in the server component. Looks like useSearchParams works only in client component (https://nextjs.org/docs/app/api-reference/functions/use-search-params) as documented. useSearchParams would be best useful on server side component, to read the req.query, url on the server component.

If a form submitted to the route via POST method, need a way to read req.query and req.body and process some server side code and then forward to client.

The earlier getServerProps supports reading req.body, req.query and forward an object to the View (JSX component)

(Referring to documentation: https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#server-side-rendering-getserversideprops ) This documentation is not mentioned about the above scenario.

Looks like I am missing some understanding.

[balazsorban44]

Hi, thanks for the feedback! https://github.com/vercel/next.js/issues/50845#issuecomment-1578938698 gives a good explanation for the mentioned points, for the 4th one, you would want to use Route Handlers, the API Route equivalent of App Router: https://nextjs.org/docs/app/building-your-application/routing/router-handlers

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.