Accessing the URL in Server Components

[poorscousertommy8]

Hi,

my application is connected to a CMS.
The data is loaded in page.js via the current URL.
Example URL: /summer/sports/golf

On some (server) components I need access to the data again. Fetching the data again would not be a problem, since Next.js solves this intelligently (deduping).
But I don't have access to the current URL(and params) in (sub)components.
I have a catch all route for this ( [...pagename] ).
What's the best way to solve this? I am currently passing on the data via props ("props drilling").

Example:

<Page> - page.js -> Fetch the data
   <Header>
      <SocialMedia>
   </Header>
</Page>

In <SocialMedia/> I only have access to the data if I loop through the data from page.js via props, since I have no opportunity to access the current URL in <SocialMedia/>.

How can I solve this?

[icyJoseph]

Mmm my spontaneous take, would be, prop drilling yeah, but you can try (not always possible) to switch to composition, by identifying which components actually consume the data, and allow their containers to use {children} slot placeholders.

I'd post some snippet, but this video explains the technique well: https://www.youtube.com/watch?v=3XaXKiXtNjw

Snippet

This is a silly example of course, made to work. It might not be always easy/possible to do:

Say you have:

import { useState } from "react";

type User = {
  name: string;
};

export function Dashboard() {
  const [user, setUser] = useState<User | null>(null);

  return (
    <div>
      {user ? (
        <UserProfile user={user} />
      ) : (
        <LoginForm onLogin={() => setUser({ name: "joseph" })} />
      )}
    </div>
  );
}

const UserProfile = ({ user }: { user: User }) => {
  return (
    <div>
      <h2>Profile</h2>

      <Nav />

      <ProfileCard user={user} />
    </div>
  );
};

const LoginForm = ({ onLogin }: { onLogin: () => void }) => {
  return <button onClick={onLogin}>Login</button>;
};

/**
 * Dashboard blocks
 */

const Nav = () => (
  <nav>
    <ul>
      <li>
        <a href="/">Home</a>
      </li>
    </ul>
  </nav>
);

const ProfileCard = ({ user }: { user: User }) => {
  return (
    <article>
      <h3>Welcome</h3>

      <UserName user={user} />
    </article>
  );
};

const UserName = ({ user }: { user: User }) => {
  return <h4>{user.name}</h4>;
};

You could refactor, with "composition" into:

import { useState, type ReactNode } from "react";

type User = {
  name: string;
};

export function Dashboard() {
  const [user, setUser] = useState<User | null>(null);

  return (
    <div>
      {user ? (
        <UserProfile>
          <ProfileCard>
            <UserName user={user} />
          </ProfileCard>
        </UserProfile>
      ) : (
        <LoginForm onLogin={() => setUser({ name: "joseph" })} />
      )}
    </div>
  );
}

const UserProfile = ({ children }: { children: ReactNode }) => {
  return (
    <div>
      <h2>Profile</h2>

      <Nav />

      {children}
    </div>
  );
};

const LoginForm = ({ onLogin }: { onLogin: () => void }) => {
  return <button onClick={onLogin}>Login</button>;
};

/**
 * Dashboard blocks
 */

const Nav = () => (
  <nav>
    <ul>
      <li>
        <a href="/">Home</a>
      </li>
    </ul>
  </nav>
);

const ProfileCard = ({ children }: { children: ReactNode }) => {
  return (
    <article>
      <h3>Welcome</h3>

      {children}
    </article>
  );
};

const UserName = ({ user }: { user: User }) => {
  return <h4>{user.name}</h4>;
};

[poorscousertommy8]

Thanks for your answer. Interesting approach, but for slightly more complex applications, like in my case (the example above was just a simple illustration), I don't think I'll get away with it.

Different approach:
there is also no way to establish a connection between middleware and components?

[icyJoseph]

Yeah I don't know. Most things that come to mind are hacks. Placing a cookie or header in the middleware, and then use cookies or header functions at component level.

Otherwise the top level entry point, page.tsx is the only place where you can naturally capture this data.

Alternatively, if you create a global store, like a Singleton and store there the currently rendering path... I mean it's JS on the server after all, it might just work...

[icyJoseph]

So I tried it out, I am not sure... though... It feels super hacky... 🙄 but here it goes, it seems to work, somewhat...

Apologies if this is buggy, broken, undesirable, and totally useless, but I had to try it out

utils

// A Naive Store
const globalStore = () => {
  const memory = new Map();

  return {
    get pathname() {
      return memory.get("pathname");
    },
    set pathname(path: string) {
      memory.set("pathname", path);
    },
  };
};

export const store = globalStore();

And a way to resolve paths, such as those with dynamic parameters:

// Route handling

function removeTrailingSlash(path: string) {
  return path.endsWith("/") && path.length > 1 ? path.slice(0, -1) : path;
}

function getRouteAsPath(
  pathname: string,
  query: Record<string, string | number | string[] | number[]>,
  hash?: string | null | undefined
) {
  const remainingQuery = { ...query };

  // Replace slugs, and remove them from the `query`
  let asPath = pathname.replace(/\[{1,2}(.+?)]{1,2}/g, ($0, slug: string) => {
    if (slug.startsWith("...")) slug = slug.replace("...", "");

    const value = remainingQuery[slug]!;
    delete remainingQuery[slug];
    if (Array.isArray(value)) {
      return value.map((v) => encodeURIComponent(v)).join("/");
    }
    return value !== undefined ? encodeURIComponent(String(value)) : "";
  });

  // Remove any trailing slashes; this can occur if there is no match for a catch-all slug ([[...slug]])
  asPath = removeTrailingSlash(asPath);

  // Ensure query values are strings
  const record = Object.entries(remainingQuery).reduce<Record<string, string>>(
    (prev, [key, value]) => {
      prev[key] = [value].join("");
      return prev;
    },
    {}
  );

  // Append remaining query as a querystring, if needed:
  const qs = new URLSearchParams(record).toString();

  if (qs) asPath += `?${qs}`;
  if (hash) asPath += hash;

  return asPath;
}

export const fromMetaUrlToPath = (
  metaUrl: string,
  query?: Record<string, string | number | string[] | number[]>
) => {
  const path = metaUrl.split("://")[1];

  return getRouteAsPath(
    removeTrailingSlash(
      path
        .replace(process.cwd(), "")
        .replace("/src/app", "")
        .replace("page.tsx", "")
    ),
    query ?? {}
  );
};

At every page level component

/

import { RenderUrl } from "@/components/RenderURL";
import { fromMetaUrlToPath, store } from "@/utils";

export default function Page() {
  store.pathname = fromMetaUrlToPath(import.meta.url);

  return (
    <div>
      Foo
      <RenderUrl />
    </div>
  );
}

/bar/[slug]

import { RenderUrl } from "@/components/RenderURL";
import { fromMetaUrlToPath, store } from "@/utils";

export default function Page({ params }: { params: { slug: string } }) {
  store.pathname = fromMetaUrlToPath(import.meta.url, params);

  return (
    <div>
      [slug]
      <RenderUrl />
    </div>
  );
}

RenderUrl component

import { store } from "@/utils";

export const RenderUrl = () => {
  const currentPath = store.pathname;
  return <div>{currentPath}</div>;
};

Assumption

That per page rendering is an isolated process, so the store as a singleton is ok... as it says here: https://nextjs.org/docs/getting-started/react-essentials#sharing-data-between-server-components

Since Server Components are not interactive and therefore do not read from React state, you don't need React context to share data. Instead, you can use native JavaScript patterns for common data that multiple Server Components need to access. For example, a module can be used to share a database connection across multiple components

In a production build it seems to work, terrifyingly...

Screen.Recording.2023-05-26.at.23.41.44.mov

Could you give it a go? See if we have hit something here 😅

[poorscousertommy8]

Hey mate!
Thanks very much.
That solves my problem :)
The cool thing is that I can also use this in the Layout.jsx. The html lang attribute has to be set there, which I haven't been able to set dynamically so far (depending on the language of the content - which I only know after a fetch, but how should I fetch if I can't call up the URL in Layout.jsx ...).

Somehow the innovations of 13.4. not quite mature yet. Functionally not yet complete, it seems to me.

[poorscousertommy8]

Hi @icyJoseph,

I have some feedback and real-time usage now. Unfortunately it doesn't work as it should, with simultaneous access I get the URLs of other users :/
Unfortunately a heavy blow

[icyJoseph]

Ah that's sad to hear. I guess one could still try to place a Cookie to track each session, but given the use case, anything other than a framework native solution, will be just a disappointment.

[poorscousertommy8]

now i use https://www.npmjs.com/package/server-only-context this.
so far it seems to be working. hopefully it stays that way, otherwise I would like a solution from Next.js or at least an approach. Prop drilling can't be the solution :/

[MurzNN]

@poorscousertommy8, do you still use the server-only-context package, or find a better solution? I see that the package have not been updated for 3 years, so it looks like feature-rich or abandoned, not sure what is right 😉

[MurzNN]

Seems like using https://github.com/rexfordessilfie/nextwrappers and specifically https://www.npmjs.com/package/@nextwrappers/async-local-storage is a more straightforward solution now?

But the same issue - no updates for the last 3 years 🤔