All Questions

3 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

3 months ago

Tailwind CSS: how to create a responsive sidebar that collapses on mobile?

I'm building a dashboard layout. On desktop I want a fixed left sidebar (250px), on mobile it should slide in/out as a drawer.

I've tried using hidden and flex breakpoint utilities but can't get the transition to work smoothly. Is there a standard Tailwind pattern for this?

Priya Nair

Answers

Upvotes

3422

Views

3 months ago

How to write effective unit tests for React components with Vitest?

I'm setting up testing for my React app using Vitest + React Testing Library. I'm not sure about best practices:

Should I test implementation details (internal state) or only behavior?
How do I test components that make API calls?
When should I use vi.mock()?

Looking for practical examples, not just "test behavior not implementation."

Lena Müller

Answers

114

Upvotes

4101

Views

3 months ago

How to set up CI/CD pipeline for a Next.js app on Vercel with GitHub Actions?

I want to automatically run tests and type-checking before each deployment to Vercel. Currently I just push to main and Vercel deploys automatically, but sometimes broken code gets deployed.

My stack: Next.js 14, TypeScript, Vitest for tests. How do I set up GitHub Actions to block the deployment if tests fail?

Tom Kowalski

Answers

Upvotes

3101

Views

3 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

asked 3 months ago

Answers

Upvotes

6301

Views

3 months ago

React: useEffect dependency array — when does it cause infinite loops?

My component keeps re-rendering infinitely. Here's a simplified version:

function MyComponent({ onUpdate }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchSomething().then(setData);
    onUpdate(data);
  }, [onUpdate, data]);
}

I think the issue is with onUpdate but I'm not sure. What are the rules for the dependency array?

react

javascript

Tom Kowalski

asked 3 months ago

Answers

Upvotes

7801

Views

3 months ago

How to implement dark mode with Tailwind CSS and Next.js?

I want to add a dark mode toggle to my Next.js app using Tailwind's built-in dark mode support. I want to:

Respect the user's OS preference by default
Allow manual override with a toggle button
Persist the preference in localStorage
Avoid flash of unstyled content (FOUC)

What's the correct implementation? Should I use next-themes or roll my own?

Carlos Ribeiro

Answers

103

Upvotes

9202

Views

3 months ago

Express.js: best practices for structuring a large Node.js API

My Express API started as a simple project but has grown to 50+ routes. The codebase is getting messy. Currently everything is in one app.js file.

What's the recommended folder structure for a production-grade Express API? Should I be looking at something like NestJS at this scale?

express

nodejs

Alex Martinez

asked 3 months ago

Answers

Upvotes

4402

Views

3 months ago

MongoDB aggregation: how to efficiently join two collections?

I have two collections: orders and customers. I want to fetch all orders along with the customer's name and email.

// orders: { _id, customerId, total, status }
// customers: { _id, name, email }

I tried $lookup but it's killing performance on large datasets (~2M orders). Should I be using indexes differently, or is there a better aggregation strategy?

mongodb

Priya Nair

asked 3 months ago

Answers

Upvotes

5671

Views

3 months ago

React Server Components — how to handle client-side state within them?

I'm migrating my Next.js app to use React Server Components (RSC). I love the performance benefits, but I'm confused about the boundary.

Specifically: I have a ProductList RSC that fetches products, but each product card needs a client-side "Add to Cart" button with optimistic UI. What's the recommended pattern?

react

nextjs

Sofia Greco

asked 3 months ago

Answers

Upvotes

6701

Views