# Server Components Notes

- The [blog post](https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html)
- The [video](https://www.youtube.com/watch?v=TQQPAU21ZUw&t=740s) (_skipped ahead to show-me-the-code_)

## They don't get shipped to the client and neither do their dependencies

## Automatic code splitting
Given: `{isAdmin && <EditButton />}`

The `EditButton` component will conditionally be sent to the client like dynamic `imports`

## Server components are opt-in via file naming
`component.server.js` - Render on server only (not user interactive)
`component.client.js` - Render on client only (user interactive)
`component.js` - Render client side (same as `*.client.js`)

## You can access the file system (and any other I/O) in Server Components

import { resolve } from 'path';
import { readDir } from 'react-fs';

export const FileList = () => {
  const files = readDir(resolve('.'));

  return (
    <ul>
      {files.map(file => <li key={file.name}>{file.name}</li>)}
    </ul>
  );
};

## Works with Suspense

## Streaming support of server components to client in the works

## The React team is collaborating with NextJs & ParcelJs on this

## Initial internal testing at Facebook has shown ~30% decrease in client bundle sizes