So this is a fairly new topic, React Server Components has recently been released, paring to SSR/Next.js, how does it affect SEO?

Since the ponent is rendered in the server dynamically when it is requested, it is not really as static as SSR like Next.js, will search engine fail to index those ponent if I use it?

A demo can found here

We can see that in api.server.js,

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);
}

function sendResponse(req, res, redirectToId) {
  const location = JSON.parse(req.query.location);
  if (redirectToId) {
    location.selectedId = redirectToId;
  }
  res.set('X-Location', JSON.stringify(location));
  renderReactTree(res, {
    selectedId: location.selectedId,
    isEditing: location.isEditing,
    searchText: location.searchText,
  });
}

I understand this can help to reduce the workload for client's device, since the ponent are rendered on the server and sent to the client, and that the ponent can be rendered with the secret stored in server as we can just pass it in as props rather we sending the secret to client.

But if SEO matters, is SSR preferred over React Server Component?

So this is a fairly new topic, React Server Components has recently been released, paring to SSR/Next.js, how does it affect SEO?

Since the ponent is rendered in the server dynamically when it is requested, it is not really as static as SSR like Next.js, will search engine fail to index those ponent if I use it?

A demo can found here

We can see that in api.server.js,

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);
}

function sendResponse(req, res, redirectToId) {
  const location = JSON.parse(req.query.location);
  if (redirectToId) {
    location.selectedId = redirectToId;
  }
  res.set('X-Location', JSON.stringify(location));
  renderReactTree(res, {
    selectedId: location.selectedId,
    isEditing: location.isEditing,
    searchText: location.searchText,
  });
}

I understand this can help to reduce the workload for client's device, since the ponent are rendered on the server and sent to the client, and that the ponent can be rendered with the secret stored in server as we can just pass it in as props rather we sending the secret to client.

But if SEO matters, is SSR preferred over React Server Component?

• javascript
• reactjs
• next.js
• server-side-rendering
• react-server-ponents

• 2 The only nuance here is that it won’t be “either or” for server ponents and SSR. The react team has been pretty emphatic that you’ll be able to use them together, so you can use SSR to look like a fully server-rendered app on first page load and then your app will be a regular react app (with both client and server ponents) – Nick Commented Dec 29, 2020 at 13:36

2 Answers 2

Server Components are plementary to rendering into HTML, not an alternative. The plan is to have both.

Server Components were not released. What was released is an early tech preview in the spirit of sharing our research. This preview doesn’t include an HTML renderer. The api.server.js file from the demo you mentioned contains a ment about this:

    const html = readFileSync(
      path.resolve(__dirname, '../build/index.html'),
      'utf8'
    );
    // Note: this is sending an empty HTML shell, like a client-side-only app.
    // However, the intended solution (which isn't built out yet) is to read
    // from the Server endpoint and turn its response into an HTML stream.
    res.send(html);

By the time Server Components are officially released, there will be a streaming HTML renderer for the first render.

It’s not built yet.

It should be same from SEO point of view as SPA.

What happens with classic React SPA is, it loads React ponents (which are essentially JS functions) as part of the JS bundle, and then it starts to request data from the backend in JSON format. After JSON is fetched, it is rendered via the React ponent functions and inserted into the DOM. Modern crawlers use V8 engine (or maybe smth else if it's Bing :D), they wait until page is fully loaded and all JSON data is loaded and all ponents are actually rendered - and then it crawls the resulting DOM.

GoogleBot is crawling SPAs that way for at least 3 years now, probably more - so if you were thinking that SSR is essential for SEO, no, it is not. There were plenty of investigations into this, random example: https://medium./@l.mugnaini/spa-and-seo-is-googlebot-able-to-render-a-single-page-application-1f74e706ab11

So essentially for crawler it doesn't really matter, how exactly React ponent is rendered. In case of React Server Components, ponent function resides on server and is never transferred to the client as part of the JS bundle. So instead of requesting JSON data, the application requests rendered ponent in some intermediate format (not HTML btw). Result of that is transferred to the client and is getting rendered to the DOM. So the end result is still the same - it's some DOM elements that the bot can crawl.