typescript Questions

1 months ago

Next.js: what is the best way to fetch data on the server?

I’m working on a Next.js project and I want to understand the most correct way to fetch API data in a page using server-side rendering.

I tried using useEffect, but the initial content is not available immediately and I’d like to avoid SEO issues and hydration mismatches.

What is the recommended approach between Server Components, getServerSideProps, and client-side fetching?

Are there cases where one is better than the others?

Matteo Marconi

Answers

Upvotes

Views

2 months ago

React: custom hook for data fetching — is this pattern correct?

I wrote a custom hook for fetching data. Is this the right way to do it, or am I missing something?

function useFetch(url: string) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [url]);

  return { data, loading, error };
}

Should I use AbortController? What about race conditions?

react

typescript

David Kim

3 months ago

TypeScript: how to type a function that returns different types based on input?

I have a utility function that returns different types depending on the input parameter:

function transform(input: string | number) {
  if (typeof input === 'string') return input.toUpperCase();
  return input * 2;
}

TypeScript infers the return type as string | number, but I want it to be narrowed based on the input. Is this possible with overloads or conditional types?

typescript

Yuki Tanaka

asked 3 months ago

Answers

Upvotes

3 months ago