SolidJS•2w ago

A question about server side rendering an <a> tag based on requestEvent.

I am looking for a way to pre-render variants og the route as <a> tag based on requestEvent. I post my implementation down bellow.

4 Replies

Jason.jsonOP•2w ago

My code implementation

import { createSignal, For, Show, onMount, createResource } from "solid-js";
import { A, useNavigate } from "@solidjs/router";
import { LANGUAGES } from "~/lib/config";
import { getRequestEvent, isServer } from "solid-js/web";

interface CountrySelectorProps {
  lang: string;
}

export default function CountrySelector(props: CountrySelectorProps) {
  const navigate = useNavigate();
  const [isOpen, setIsOpen] = createSignal(false);

  const lang = LANGUAGES[props.lang];

  const [urls] = createResource(
    () => {
      const event = getRequestEvent();
      const requestUrl = event?.request?.url;

      return Object.entries(LANGUAGES).map(([key, lang]) => {
        return {
          shortName: key,
          href: requestUrl!.replace(props.lang, key),
          flag: lang.flag,
          name: lang.name,
        };
      });
    },
    { deferStream: true }
  );
}

import { createSignal, For, Show, onMount, createResource } from "solid-js";
import { A, useNavigate } from "@solidjs/router";
import { LANGUAGES } from "~/lib/config";
import { getRequestEvent, isServer } from "solid-js/web";

interface CountrySelectorProps {
  lang: string;
}

export default function CountrySelector(props: CountrySelectorProps) {
  const navigate = useNavigate();
  const [isOpen, setIsOpen] = createSignal(false);

  const lang = LANGUAGES[props.lang];

  const [urls] = createResource(
    () => {
      const event = getRequestEvent();
      const requestUrl = event?.request?.url;

      return Object.entries(LANGUAGES).map(([key, lang]) => {
        return {
          shortName: key,
          href: requestUrl!.replace(props.lang, key),
          flag: lang.flag,
          name: lang.name,
        };
      });
    },
    { deferStream: true }
  );
}

// TSX Template
return (
    <div class="relative">
      <button
        class="bg-gray-800 text-white p-2 rounded flex items-center shadow w-[150px]"
        onClick={() => setIsOpen(!isOpen())}
      >
        <span class="mr-2">{lang.flag}</span>
        <span>{lang.name}</span>
        <svg
          class="w-4 h-4 ml-2"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M19 9l-7 7-7-7"
          ></path>
        </svg>
      </button>
      <Show when={isOpen()}>
        <div class="absolute mt-2 w-full bg-gray-800 rounded shadow-lg z-50">
          <Show when={urls()}>
            <For each={urls()}>
              {(url) => (
                <A
                  href={url.href}
                  class="p-2 hover:bg-gray-700 cursor-pointer flex items-center"
                >
                  <span class="mr-2">{url.flag}</span>
                  <span class="text-white">{url.name}</span>
                </A>
              )}
            </For>
          </Show>
        </div>
      </Show>
    </div>
  );

// TSX Template
return (
    <div class="relative">
      <button
        class="bg-gray-800 text-white p-2 rounded flex items-center shadow w-[150px]"
        onClick={() => setIsOpen(!isOpen())}
      >
        <span class="mr-2">{lang.flag}</span>
        <span>{lang.name}</span>
        <svg
          class="w-4 h-4 ml-2"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M19 9l-7 7-7-7"
          ></path>
        </svg>
      </button>
      <Show when={isOpen()}>
        <div class="absolute mt-2 w-full bg-gray-800 rounded shadow-lg z-50">
          <Show when={urls()}>
            <For each={urls()}>
              {(url) => (
                <A
                  href={url.href}
                  class="p-2 hover:bg-gray-700 cursor-pointer flex items-center"
                >
                  <span class="mr-2">{url.flag}</span>
                  <span class="text-white">{url.name}</span>
                </A>
              )}
            </For>
          </Show>
        </div>
      </Show>
    </div>
  );

Source code of LANGUAGES constant

export const LANGUAGES: Record<string, { name: string; flag: JSX.Element }> = {
pl: {
    name: "Polski",
    flag: (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="32"
        height="32"
        viewBox="0 0 32 32"
      >
        <path
          d="M1,24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V15H1v9Z"
          fill="#cb2e40"
        ></path>
        <path
          d="M27,4H5c-2.209,0-4,1.791-4,4v8H31V8c0-2.209-1.791-4-4-4Z"
          fill="#fff"
        ></path>
        <path
          d="M5,28H27c2.209,0,4-1.791,4-4V8c0-2.209-1.791-4-4-4H5c-2.209,0-4,1.791-4,4V24c0,2.209,1.791,4,4,4ZM2,8c0-1.654,1.346-3,3-3H27c1.654,0,3,1.346,3,3V24c0,1.654-1.346,3-3,3H5c-1.654,0-3-1.346-3-3V8Z"
          opacity=".15"
        ></path>
        <path
          d="M27,5H5c-1.657,0-3,1.343-3,3v1c0-1.657,1.343-3,3-3H27c1.657,0,3,1.343,3,3v-1c0-1.657-1.343-3-3-3Z"
          fill="#fff"
          opacity=".2"
        ></path>
      </svg>
    ),
  },
 //[rest of the langs...]
}

export const LANGUAGES: Record<string, { name: string; flag: JSX.Element }> = {
pl: {
    name: "Polski",
    flag: (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="32"
        height="32"
        viewBox="0 0 32 32"
      >
        <path
          d="M1,24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V15H1v9Z"
          fill="#cb2e40"
        ></path>
        <path
          d="M27,4H5c-2.209,0-4,1.791-4,4v8H31V8c0-2.209-1.791-4-4-4Z"
          fill="#fff"
        ></path>
        <path
          d="M5,28H27c2.209,0,4-1.791,4-4V8c0-2.209-1.791-4-4-4H5c-2.209,0-4,1.791-4,4V24c0,2.209,1.791,4,4,4ZM2,8c0-1.654,1.346-3,3-3H27c1.654,0,3,1.346,3,3V24c0,1.654-1.346,3-3,3H5c-1.654,0-3-1.346-3-3V8Z"
          opacity=".15"
        ></path>
        <path
          d="M27,5H5c-1.657,0-3,1.343-3,3v1c0-1.657,1.343-3,3-3H27c1.657,0,3,1.343,3,3v-1c0-1.657-1.343-3-3-3Z"
          fill="#fff"
          opacity=".2"
        ></path>
      </svg>
    ),
  },
 //[rest of the langs...]
}

Why i want to do this? Cuz google SEO does not see the languages variants and it does not index it very well... I would be blad for help 🙂 I used createResource but it does not seems to work. 😭

Jason.jsonOP•2w ago

My website wich i am trying to fix: https://lisia-nora.pl/en

The Best Minecraft Texture Packs on the Web! 🦊 | Lisia-Nora.pl

Lisia-Nora.pl offers a wide selection of textures and mods for Minecraft. Download free resources to enhance your gaming experience and create unique ...

Madaxen86•2w ago

Instead of request Event you can get the current route with useLocation which is isomorphic. But couldn’t you just do construct the url with string concatenation? Also if you look for a "typesafe" file routes there’s this package which helps to create valid routes. https://www.npmjs.com/package/solid-start-typesafe-routes-plugin https://docs.solidjs.com/solid-router/reference/primitives/use-location#uselocation and if you have a dynamic route that has the lang as a route param you can get this with useParams https://docs.solidjs.com/solid-router/reference/primitives/use-params

npm

solid-start-typesafe-routes-plugin

Type-safe routes for solid-start file-routes. No more broken links.. Latest version: 1.1.0, last published: 2 months ago. Start using solid-start-typesafe-routes-plugin in your project by running npm i solid-start-typesafe-routes-plugin. There are no other projects in the npm registry using solid-start-typesafe-routes-plugin.

useParams - SolidDocs

Documentation for SolidJS, the signals-powered UI framework

useLocation - SolidDocs

Documentation for SolidJS, the signals-powered UI framework

Jason.jsonOP•2w ago

Thanks i figured that out But thank you 🫶 Have a nice day/night! 😃

Gaming

Programming

A question about server side rendering an <a> tag based on requestEvent.

Did you find this page helpful?