Helge Posts - Answer Overflow

Helge

Explore posts from servers

•Created by Helge on 1/28/2024 in #support

Use solid as middleware

Goal: parse existing html from third party server, read all data-component attributes from HTML, load dynamic component based on data-component attribute and then return newly rendered HTML w/ interactivity. Hi I would like to create a Solid-Middleware so to speak. I want to parse a given HTML and look for tells to load components dynamically and then return it all to the browser. How would you start doing this? The following markup would be for example fetched dynamically based on given slug

<html>
  <body>
    <h1>this is a headline</h1>
    <p>some para text</p>
    <div data-component="features"></div>
    <p>some more text</p>
  </body>
</html>

<html>
  <body>
    <h1>this is a headline</h1>
    <p>some para text</p>
    <div data-component="features"></div>
    <p>some more text</p>
  </body>
</html>

The goal is to parse, load features.tsx, render it on the server and also make it so that it can be used with interacitivty on the client Any advice is welcome.

15 replies

TTCTheo's Typesafe Cult

•Created by Helge on 5/31/2023 in #questions

Next13 app-router: How to get request headers on client page comp?

All my pages are client components because I want to use page transitions and need to wrap them in a provider from framer-motion. But I also now need request headers on specific pages. How would you do that? Any ideas?

8 replies

TTCTheo's Typesafe Cult

•Created by Helge on 3/10/2023 in #questions

vercel next13 app-router: routing on prod is not clientside

I am having a weird issue. Invoking my local build with vercel dev all my routes in the header are client side navigations as they should be. But when I deploy to vercel the navigation is not clientside anymore and every navigation is a full page refresh. Has anyone some expertise with this issue and can help me out?

2 replies

TTCTheo's Typesafe Cult

•Created by Helge on 11/1/2022 in #questions

[next13] dynamic page or function

Hey yall I am having troubles understanding RSC and how next handles regen of pages. Basically I have a simple fetch / async call in my page. This page does NOT get regenerated upon navigation. Only when I hardload the page by hitting cmd+r. Docs say that all pages are static unless they are dynamic by having something in them that is only known at request time. For example a [id]/page.tsx is considered dynamic if it contains an async default function. a mypage/page.tsx is not considered dynamic, even if its exporting an async default function. So far the only way I have found to regen a page upon navigation to get the latest data is to either access cookies() or headers() from next/headers which is bonkers. So what I end up now is like ugly af

import { headers } from 'next/headers';
import { PageProps } from '@/lib/getCategories';

export default async function Page({ params }: PageProps) {
  const head = headers(); // forces page to be revalidated on every request
  const joke = await fetch('https://icanhazdadjoke.com/', {
    headers: {
      Accept: 'application/json',
    },
    cache: 'no-store',
  }).then((res) => {
    return res.json();
  });
  return (
    <div>
      <h1>Dad Jokes</h1>
      <p>{joke.joke}</p>
    </div>
  );
}

import { headers } from 'next/headers';
import { PageProps } from '@/lib/getCategories';

export default async function Page({ params }: PageProps) {
  const head = headers(); // forces page to be revalidated on every request
  const joke = await fetch('https://icanhazdadjoke.com/', {
    headers: {
      Accept: 'application/json',
    },
    cache: 'no-store',
  }).then((res) => {
    return res.json();
  });
  return (
    <div>
      <h1>Dad Jokes</h1>
      <p>{joke.joke}</p>
    </div>
  );
}

What is the normal way to do this?

7 replies

Gaming

Programming