React Server Component, What It is?

My recap learning what are React Server Component, and why this will be a game-changer from React.

A Featured Image
  1. .server.js
  2. .client.js
  3. .js (Shared)

.client.js

The new extension name front .js which is .client.js the file will not make us satisfied, because we already mostly use that such as to make our component re-render or make interaction with DOM and etc.

.server.js

Basically, we can call any server call in this file such as get data from the Database or read a file and etc. Let’s try to see this example of code below:

// Note.server.js

import db from "db.server";

function Note(props) {
const { id, isEditing } = props;
const note = db.posts.get(id); // let's say this is a process to get a data from Database

return (
<div>
<h1>{note.title}</h1>
<section>{note.body}</section>
</div>
);
}
// NoteWithMarkdown.js

import marked from 'marked'; // 35.9K (11.2K gzipped)
import sanitizeHtml from 'sanitize-html'; // 206K (63.3K gzipped)

function NoteWithMarkdown({text}) {
const html = sanitizeHtml(marked(text));
return (/* render */);
}
// NoteWithMarkdown.server.js

import marked from 'marked'; // 0K atau zero-bundle size
import sanitizeHtml from 'sanitize-html'; // 0K atau zero-bundle size

function NoteWithMarkdown({text}) {
const html = sanitizeHtml(marked(text));
return (/* render */);
}
// NoteWithMarkdown.server.js

import marked from "marked"; // 0K atau zero-bundle size
import sanitizeHtml from "sanitize-html"; // 0K atau zero-bundle size

import NoteEditor from "./NoteEditor.client";

function NoteWithMarkdown({ text }) {
const html = sanitizeHtml(marked(text));
return <NoteEditor html={html} />;
}

.js (Shared)

This file extension just like a normal component that we already use it day-by-day, but after the RSC comes to the production this component will automatically call as .server.js file.

Conclusion

This will help us to make sure there’s no more additional file size on the client that the user will need to more extra to download it. This also comes with the downside which means it will cost more extra on the server which means we need to make sure our infrastructure it’s enough to use this RSC.

--

--

Currently doing some stuff on Web Platform and learn managing a team.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Adib Firman

Currently doing some stuff on Web Platform and learn managing a team.