Component

Framework Next.js 13 Component
Categories:
Tags:

When to use Server vs. Client Components?

What do you need to do? Server Component Client Component
Fetch data. Learn more. ✅ API Fetch
Access backend resources (directly) ✅ ❌
Keep sensitive information on the server (access tokens, API keys, etc) ✅ ❌
Keep large dependencies on the server / Reduce client-side JavaScript ✅ ❌
Add interactivity and event listeners (onClick(), onChange(), etc) ❌ ✅
Use State and Lifecycle Effects (useState(), useReducer(), useEffect(), etc) ❌ ✅
Use browser-only APIs ❌ ✅
Use custom hooks that depend on state, effects, or browser-only APIs ❌ ✅
Use React Class components ❌ ✅

Get the component from function and reuse it

Create a function that returns a Next.js Link component with the desired props. For example:

// CommonComponent.js
import Link from 'next/link';

export const getLinkComponent = (props) => {
  const {
    href,
    label
  } = props;

  return (
    <Link href={href}>
      <a>{label}</a>
    </Link>
  );
}

Reuse the create component on the same page

// page.js
import { getLinkComponent } from './CommonComponent';


export default function Page({ 
  children
}) {
  
  const myLinkComponent = getLinkComponent({
    href: '/about',
    label: 'About'
  });

  return (
    <div>
      <h1>Welcome to my page!</h1>
      {myLinkComponent}
      <h1>Welcome to my page!</h1>
      {myLinkComponent}
    </div>
  );
}

Reference

Server-side Component

Framework Next.js 13 Server-side Component

Client-side Component

Framework Next.js 13 Client-side Component