Um guia de React Server Components

O que é React Server Components?

useEffect(() => {
axios.get("ENDEREÇO AQUI")
.then((response) => {
// set data into state
setData(response.data);
})
.catch((error) => {
console.log(error);
});
}, []);

Como funciona?

"react": "0.0.0-experimental-3310209d0",
"react-dom": "0.0.0-experimental-3310209d0",
"react-fetch": "0.0.0-experimental-3310209d0",
"react-fs": "0.0.0-experimental-3310209d0",
"react-pg": "0.0.0-experimental-3310209d0",
"react-server-dom-webpack": "0.0.0-experimental-3310209d0",
const ReactApp = require('../src/App.server').default;
const {pipeToNodeWritable} = 
require('react-server-dom-webpack/writer');
async function renderReactTree(res, props) {
await waitForWebpack();
const manifest = readFileSync(
path.resolve(__dirname, '../build/react-client-manifest.json'),
'utf8'
);
const moduleMap = JSON.parse(manifest);
pipeToNodeWritable(React.createElement(ReactApp, props), res, moduleMap);
}

Bundle de tamanho Zero

//markdown.jsimport marked from 'marked'; // 37.38KBimport sanitizeHtml from 'sanitize-html'; // 208 KBexport default function TextwithMarkdown({Text}) {
return(
<div className="text-markdown"
dangerousSetInnerHTML={{
__html: sanitizeHtml(marked(text)),
}}
/>
);
}
// markdown.server.jsimport marked from 'marked'; // 0KBimport sanitizeHtml from 'sanitize-html'; // 0KBexport default function TextwithMarkdown({Text}) {
return(
<div className="text-markdown"
dangerousSetInnerHTML={{
__html: sanitizeHtml(marked(text)),
}}
/>
);
}

Acesso do backend ao banco de dados:

export default function NoteList({searchText}) {
const notes = db.query(
`select * from notes where title ilike $1 order by id desc`,
['%' + searchText + '%']
).rows;


return notes.length > 0 ? (
<ul className="notes-list">
{notes.map((note) => (
<li key={note.id}>
<SidebarNote note={note} />
</li>
))}
</ul>
) : (
<div className="notes-empty">
{searchText
? `Couldn't find any notes titled "${searchText}".`
: 'No notes created yet!'}{' '}
</div>
);
}

Restrições

//Page.server.js// import de componente interativo do client
import Button from '.Button.client.js';
export default Page() {
// data fetch, processamento, outras coisas..
return(
// use o <Button /> e outros componentes interativos aqui
);
}

Rotas

Quais as vantagens?

const MyComponent = React.lazy(() => import('./MyComponent.js'));
import MyComponent from './MyComponent.client.js';

Como os Server Components são diferentes de SSR (ex: Next.js)?

M1:{"id":"./src/SearchField.client.js","chunks":["client5"],"name":""}

Server Component x Client Components

Conclusão

Com conteúdo traduzido de:

Links Úteis:

Software Engineer | Front-end Specialist @ Grover (https://rubenmarcus.dev)

Software Engineer | Front-end Specialist @ Grover (https://rubenmarcus.dev)