Switch Sidebar to Client Component + useSearchParams?

[karlhorky]

Hi @chantastic ! First of all, thanks so much for providing the React Holiday content, really amazing to learn Next.js 13!

I wanted to follow up on issue 20: "I've made a huge mistake...", in which you detail that layouts do not receive searchParams.

It seems that this is true, and may be by design:

• RootLayout doesn't receive searchParams as props vercel/next.js#43863

However, there is a workaround - convert the sidebar (the <aside>) to a client component and use the useSearchParams hook from next/navigation in this client component, also explained here:

• RootLayout doesn't receive searchParams as props vercel/next.js#43863 (comment)

Would you consider refactoring your commit where you use new URLSearchParams() to use this client component + hook approach instead?

[Jbmanllr]

Ok but now what if i need the data of the sidebar fetched on the server...?

[karlhorky]

Not really related to my issue above I guess.

But as a note, data can be fetched on the server and passed to Client Components.

[Jbmanllr]

Not really related to my issue above I guess.

But as a note, data can be fetched on the server and passed to Client Components.

How can i fetch the right data if i need the path and searchParams that are not available in the server component (server component that arent inside the page, totally related to your case, its the whole point.) except that you choose to fetch data client side, thats not a solution as it defeat the whole purpose of next js.

[karlhorky]

For example, fetch the nav data in the Server Component (eg. layout.tsx) and pass to Client Component(s) (eg. HighlightLink.tsx) as props (eg. props.href).

Lots of different patterns to fetch + pass data from Server Components to Client Components, which is why I said that it's unrelated to usage of a hook.

[Jbmanllr]

For example, fetch the nav data in the Server Component (eg. layout.tsx) and pass to Client Component(s) (eg. HighlightLink.tsx) as props (eg. props.href).

Lots of different patterns to fetch + pass data from Server Components to Client Components, which is why I said that it's unrelated to usage of a hook.

I don't really know how to formulate it otherwise: i need the pathname and searchparams to fetch the data in the first place. The Layout doesnt have this, and doesn't allow for useParams or useSearchParams because its a server component.

[karlhorky]

i need the pathname and searchparams to fetch the data in the first place

Understood, I didn't get that point so far.

It's still not related to my issue above.

But there are options for this pattern too, including using nested layouts and route segments. The nested layout receives the route segment details. Reading through all of the comments in this issue may be helpful:

• [Next 13] Server Component + Layout.tsx - Can't access the URL / Pathname vercel/next.js#43704

[Jbmanllr]

Ok, well its totally related to your issue because its basically the same issue, the only difference is that you were good by just switching the sidebar to client component. Thanks for your link i will check into that. But in the meantime i found a solution to get the params and search params via middleware:

`// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

// the following code is taken from : https://nextjs.org/docs/advanced-features/middleware#setting-headers
export function middleware(request: NextRequest) {
// Clone the request headers and set a new header x-pathname
const requestHeaders = new Headers(request.headers);
requestHeaders.set('x-origin', request.nextUrl.origin);
requestHeaders.set('x-pathname', request.nextUrl.pathname);
requestHeaders.set('x-search', request.nextUrl.search);
requestHeaders.set('x-searchParams', request.nextUrl.searchParams);

return NextResponse.next({
request: {
// New request headers
headers: requestHeaders,
},
});
}

// the following code has been copied from https://nextjs.org/docs/advanced-features/middleware#matcher
export const config = {
matcher: [
/*
* Match all request paths except for the ones starting with:
* - api (API routes)
* - _next/static (static files)
* - _next/image (image optimization files)
* - favicon.ico (favicon file)
/
'/((?!api|_next/static|_next/image|favicon.ico).)',
],
};
`