Hello Everyone
TLDR;
- How can I dynamically layout root based on searchParams ?

Scenario
- I have subdomain.domain.com which will load landing page. If I scan a QR code which returns the url as subdomain.domain.com?id=123 then browser should load a fairly different UI than the landing page, except for same Header and Footer.
- I want to keep both of them as SSR.
How can I achieve this ?

-------------------

My Background
I am completely new to web developement roughly 3 weeks, in fact I have never done a single web page :P. To sum up my 11 years career roadmap, it was always mobile development (Java Android -> Kotlin Android -> Swift iOS -> JS React Native -> Flutter -> Typescript Expo). Recently I got a chance to enthusiastically work on Web with no necessary predefined Tech Stack. Ideally the use case is to scan a QR -> extract id -> fetch is id registered and booked -> give client interaction based on response. After researching the Modern Frontend Web stack I felt like its bloated with options trying to fix problems of bundling/parsing/transpiling/hydration strategies/esm-or-cjs etc that initally Node and us Developers created in the name of DX. In my use case, I really wanted to go with HTMX+tailwind, but because of my other team members I sticked with something similar to React but "blazingly fast". So I opted into NextJS for SSR

Any ideas, any suggestions, any advice, anything tha helps the end user UX will be welcomed.

Thanks in advance.